コンビニ・フリーク

コンビニのおいしい食べ物・飲み物、おやつの友をご紹介…しました。

コンビニ・フリーク ページレイアウトの紹介です

2004年08月20日 | 雑記
本日は、なにかと要望の多かった、画像の配置方法や、ページのレイアウトを紹介しますよ。とはいっても、本業がWebデザイナーではないので、詳しい解説ナシで、このBLOGで使ってるレイアウトを紹介するだけで、勘弁してくださいね。

【デザート画像の作り方です(こんなことやってます)】
 買ってきました状態。
 Photoshop のペンツールでカップのフチをなぞって、切り抜きました。
パス>選択範囲の作成>アンチエイリアス ぼかし1pixcel
 トーンカーブで明るく仕上げます。
 こんなカーブにすると明るくなります。
 ブラシツールで、それっぽく影をつけて出来上がり♪
画像サイズ:横190px 縦 220px くらいの大きさにリサイズして、JPEG 形式で保存します。およそ 5kB。



【画像の配置方法ですよ】


1)JPEG または GIF の画像を用意します。できれば、JPEG は圧縮率をあげたり、GIF は色数を落としたりして、画像のファイルサイズを落としてください。この「コンビニ・フリーク」で使ってる画像は、およそ3~10kBです。

2)編集画面の「画像フォルダ」のページから、「アップロードサイズ=変更なし(オリジナルサイズ)」を選択して、画像をアップロードします。

3)アップロードされた画像をクリックして別画面に単独表示させて、その画像のURLをコピーします。このとき、画像のタテヨコサイズ 縦100px 横200px(px=ピクセル)など を覚えておいてください。

4)編集画面から新規投稿を選んで記事を書き始めます。このとき、画像を配置するところに、次のようなタグで画像を直接指定するのです。

 <img src="http://~.jpg"
   width=" (画像の横幅を入力) ”
   height=" (画像の縦長を入力) "
   align=" (右に画像/左に文字を配置するなら  right
        左に画像/右に文字を配置するなら  left
        中央に画像を配置するなら center と入力) " >

※ ↑は見やすいために改行を入れてありますが、実際には改行ではなくて半角のスペースを入力します。タグは半角の < > で囲ってください。URLや縦横、揃える指定数値は、必ず " " ダブルクォーテーションで囲ってください。お尻の側の " が抜けると、エラーが出る事があります。
  
5)プレビュー画面で配置が正しいか確認します。




次は、table タグを用いた、実際のレイアウトを紹介しますよ。


「コンビニ・フリーク」の記事作成用ひな型を紹介しましょう。
(青い文字は注釈ですからね)

                 
↓枠線の色です。
<table border="1" bordercolor="#FF6666" align="center">
<tr>
                       ↑中央に配置です
         ↓枠の左側の、ちょっと太くなってるところの塗り
 <td bgcolor="#FF9966" width="5px">
 </td>    
 <td     
↓背景画像を指定できますよ(月おいてみました)。
  background="http://blogimg.goo.ne.jp/user_image/2b/94/
 2bedd060be9120a59c2364818040c958.jpg"
 style="background-repeat: no-repeat;background-position: center bottom;"
 align="center">
  ↑背景画像を繰り返して敷き詰めるかどうかを設定します。
  ↓枠線と文字のマージン設定用のテーブル2重囲みです

<table width="95%"><tr><td>
<font size="2" color="gray">

↓デザートの画像を配置します
<img src="http://.jpg" width="123" height="456" alt="なまえ" align="right"> 

</font>
<font size="3" color="black">「 ¥0」</font>

<font size="2" color="gray"> 

~いつもこのへんに記事の本文を書いてます~
</font><font size="2">
━──────────────────────────━
 甘 さ:</font><font color="#FF6666" size="2">●●</font><font size="2">○○○──
 味わい:</font><font color="#FF6666" size="2">●●</font><font size="2">○○○──
 満足感:</font><font color="#FF6666" size="2">●●●</font><font size="2">○○──
━──────────────────────────━

</font>
</td></tr></table>
</td></tr></table>
 

以上、いかがでしたでしょうか? HTML に不慣れな人は、とほほのWWW入門のページを参照しながら読むと、わかり易いとおもいます。Photoshop の使い方は、お近くの書店においてある大概の入門書に丁寧に書いてあります。私σ(^_^; の場合は、何冊かを熱心に立ち読みして覚えてきました。Photoshop 以外の画像処理ソフトでも似たような作業は可能だと思いますので、試してみてください。まずTRYですよ。

ホームページ持ってるような HTML 知識人の方にとっては、つまんない記事だったかと思いますが、これを読んだ BLOG初心者の方が、今後キレイで面白い記事を作るための一助になれば幸いです。

最新の画像もっと見る

30 コメント

コメント日が  古い順  |   新しい順
おおー (えっけん)
2004-08-20 23:31:47
画像については、昔からキレイだなと感心していました。

こんな苦労をされていたんですね。



びっくりびっくりですよ。
修正中です。 (kazumucha)
2004-08-20 23:38:24
えっけん さん、こんばんはぁ。

この記事、ちょっと修正しようと思ったら、編集画面にもどったとたんに &lt; &gt;で書いた半角の< >記号が、ぜんぶタグと同化しちゃって、エライ目に遭ってますから。

ひえー。



キレイな画像の方が、おいしそうに見えますからね。

苦労のしがいがあるといいんですけど。

こんごともよろしく~。
Unknown (えっけん)
2004-08-21 00:18:49
>編集画面にもどったとたんに &lt; &gt;で書いた半角の< >記号が、ぜんぶタグと同化しちゃって、エライ目に遭ってますから。

>ひえー。



経験済みです(笑



僕はそんな時、文字列置き換え用のツールを使ってますよ。
そうやってやるんですかっ! (こぎそ)
2004-08-21 00:21:56
どうやって背景を白にして撮るのかなって思ってたら、そうやってたんですかー!

すごいっす、うちも今度やってみるかもです(元気があれば・・・
す、すごい! (じゃすみん)
2004-08-21 01:11:49
1記事にとてつもな大変な苦労を・・・。

びっくりして感激しましたわ。

3~10KBなんだ~。なるほど。φ(..)メモメモ

とっても勉強になりました。

どうもありがとう。

まぁ、真似は出来ないですけどね。(^^ゞ

置き換えツール… (kazumucha)
2004-08-21 09:28:37
えっけんさん



これまで愛用してきたエディタの検索・置換機能は強力だったんですけど、なぜかこいつからブラウザ画面にコピー・ペーストすると、全部文字化けするんですわ。



目がチカチカするよー ■_m(⊃Д`)

となりながら、ちまちま手動で直しました。





3月頃のgoo BLOG なんか、何故かMacからは「改行」の入力が無効だったんで、いちいち<br>を入力してました。記事を修正すると改行がなくなってるので、再び<br>を入力してました。半月くらい、それで頑張ってたんです。今思い返すと、よく耐えてたなーと。
おやつのある風景 (kazumucha)
2004-08-21 09:38:51
こぎそ さん、こんにちは♪



大学ノートの上や、タタミの上も、風情があってよいですよ。おやつといったら、やはり仕事や勉強の合間にたべちゃいますからね。



飲料系BLOGの「Drink Me!」の清水りょうこ 先生は

http://qrl.jp/?u=110159

これまで、橋の上からの公園を背景にしてたんですけど、最近は白地の背景が増えちゃいました。公園の方が、季節感があってよかったかなぁと思って見ているんですけどね。

影を付けるのが楽しいんですよ (kazumucha)
2004-08-21 09:43:55
じゃすみん さん、こんにちは♪



ダルマに目を入れる作業じゃないけれど、プリンの影をつける作業が、一番のクライマックスです。(?

今日はどのくらい浮遊感をだそうか、それともベタ塗りの上に転がってる様子にしようか、そこで悩んでます。



何分かけて書いているのかは、永遠に秘密です。(笑
はじめましてkazumuchaさん。 (じゅん吉)
2004-08-21 11:13:24
画像いつもきれいだし、レイアウトも素敵だし、私に見る目はどちらかというとそちらの方にむいていましたよ。わたしもいい加減だけどホームページつくってますのでこの記事よく理解できるんですよ。私も勉強になりますよ。タグを表示すると後が大変だから、なかなか更新できない記事になっちゃうんだよね。



これからもよろしくお願いします。
はじめまして じゅん吉 さん (kazumucha)
2004-08-21 17:33:19
あ!じゅん吉さんだ、ようこそ いらっしゃいませー。

レイアウトって、こりだすときりがないんだけど、BLOGですから、読み易さ優先でなんとかやっていますよ。style や、TOP 画像の縛りはあるけど、どこまでも熱心に詰めるんなら、MovableType や、ホームページを作った方がいいわけで、Goo BLOG はこのくらいで丁度いいんじゃないかと思ってます。



こちらこそ、どうぞよろしくお願いします。