本日は、なにかと要望の多かった、画像の配置方法や、ページのレイアウトを紹介しますよ。とはいっても、本業がWebデザイナーではないので、詳しい解説ナシで、このBLOGで使ってるレイアウトを紹介するだけで、勘弁してくださいね。
【デザート画像の作り方です（こんなことやってます）】
【画像の配置方法ですよ】
次は、table タグを用いた、実際のレイアウトを紹介しますよ。
以上、いかがでしたでしょうか？ HTML に不慣れな人は、とほほのWWW入門のページを参照しながら読むと、わかり易いとおもいます。Photoshop の使い方は、お近くの書店においてある大概の入門書に丁寧に書いてあります。私σ(^_^; の場合は、何冊かを熱心に立ち読みして覚えてきました。Photoshop 以外の画像処理ソフトでも似たような作業は可能だと思いますので、試してみてください。まずTRYですよ。
ホームページ持ってるような HTML 知識人の方にとっては、つまんない記事だったかと思いますが、これを読んだ BLOG初心者の方が、今後キレイで面白い記事を作るための一助になれば幸いです。
【デザート画像の作り方です（こんなことやってます）】
 | 買ってきました状態。 |
 | Photoshop のペンツールでカップのフチをなぞって、切り抜きました。 パス＞選択範囲の作成＞アンチエイリアス ぼかし１pixcel |
 | トーンカーブで明るく仕上げます。 |
 | こんなカーブにすると明るくなります。 |
 | ブラシツールで、それっぽく影をつけて出来上がり♪ 画像サイズ：横190px 縦 220px くらいの大きさにリサイズして、JPEG 形式で保存します。およそ 5kB。 |
【画像の配置方法ですよ】
１）JPEG または GIF の画像を用意します。できれば、JPEG は圧縮率をあげたり、GIF は色数を落としたりして、画像のファイルサイズを落としてください。この「コンビニ・フリーク」で使ってる画像は、およそ3～10kBです。 ２）編集画面の「画像フォルダ」のページから、「アップロードサイズ＝変更なし（オリジナルサイズ）」を選択して、画像をアップロードします。 ３）アップロードされた画像をクリックして別画面に単独表示させて、その画像のURLをコピーします。このとき、画像のタテヨコサイズ 縦100px 横200px（px=ピクセル）など を覚えておいてください。 ４）編集画面から新規投稿を選んで記事を書き始めます。このとき、画像を配置するところに、次のようなタグで画像を直接指定するのです。 <img src="http://～.jpg" width=" （画像の横幅を入力） ” height=" （画像の縦長を入力） " align=" （右に画像／左に文字を配置するなら right 左に画像／右に文字を配置するなら left 中央に画像を配置するなら center と入力） " > ※ ↑は見やすいために改行を入れてありますが、実際には改行ではなくて半角のスペースを入力します。タグは半角の ＜ ＞ で囲ってください。URLや縦横、揃える指定数値は、必ず " " ダブルクォーテーションで囲ってください。お尻の側の " が抜けると、エラーが出る事があります。 ５）プレビュー画面で配置が正しいか確認します。 |
次は、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"> ↑背景画像を繰り返して敷き詰めるかどうかを設定します。 ↓枠線と文字のマージン設定用のテーブル２重囲みです <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初心者の方が、今後キレイで面白い記事を作るための一助になれば幸いです。
つぶやき日誌（http://homepage1.nifty.com/ukyou/）いつも楽しく読ませていただいていますよっ。先に大幅リニューアルされてからスッキリ見やすくなりましたね。
写真の加工はヒマがないとできませぬ。
最近は、これでもかと手抜きなんですよ～。(^^;
年末の仕事がおわったら気合いいれてキレイな画像をお届けしますよ。
前々から綺麗に加工してあるなーとは思っていたんですが、、
これを見ると、僕のサイトの写真はいかに手抜きかバレてしまう．．．(´・ω・`)
写真をこねくりまわすより、ストレートに素材で勝負！
ばにら さんとこの写真は、いつもおいしそうですよ。
こうやって、中身を公開してしまったので、今度はもっと目をひくレイアウトを探求するんですよ。ちょっとずつ工夫してますからっ。
タグ使いは、ちょっとずつまねっこしながら覚えていくのが楽しくて良いですよ～。勉強しなきゃっ、なんて本から読むと、眠くなってきますからね。
お役に立てて、光栄です。
これからも、よろしく。
なべなべ さんが、レタッチ職人とは、びっくりです。
切り抜きの技は、このBLOGを始めてから身につけたんですよ。
毎日やるのが、上達のコツかもしれません。（笑
そろそろ、ちょっと変わったワザを習得してみたいと狙っています。
こんごともよろしく～
参考に(出来るかわからないけど）します！！
私なんて撮った写真をただ取り込んで乗せるだけだもん。。。
キレイな切り抜き方ですね。
なべなべの中の人はレタッチ職人なので、是非是非参考にさせていただこうと思いますです。
なんだか、みかん さんも、コンビニ好きそうですね…
ファミマのコーヒーゼリー、食べて感想はもうできてるけど、記事かく余裕がなくてなくてなくて～。楽しみにしてくれて、どうもありがとう！ もちょっと待っててくださいね。
ずっと『すごいキレイな画像だなぁ』って思っていました！
こんなご苦労されていらっしゃるんですね！
ありがとうございます＆これからも楽しみにしています＾＾
ご自分なりのスタイルを、いろいろ試して楽しんでくださいね。
たくさんの人が参考にしていただけると、記事書いた甲斐が感じられて、また やる気が出てきます。こちらこそ、ありがとうございました。
ときに
今日…また仕事で帰れなくなりました。
記事アップする余裕なくて、カナシイです。
早速やってみました♪
今まで、どうやって、キレイに画像貼るのか分からなかったんですよ。
とっても勉強になりました＾＾
ありがとうございましたｍ（_ _）ｍ
goo から移った後も、お元気そうで。
そうですよ、こんなことやってたんですね。
時々、影がありえない方向にのびていたりするのは、ご愛嬌ということで…
「食べたものを淡々と記録するよ」 http://tabetan.2log.net/
の人は、たぶんレフ板使ったりして、ホントにキレイに撮影されてるんですけど、私σ(^_^; のほうは、アイロン台にのせて、テキトーに撮った写真を、姑息な加工でごまかしているだけですから。（笑
あ、アイロン台だって、書いちゃった．．．．
これからも、どうぞよろしく～。
ブログは、使えるタグが制限されていますけど、見やすさ重視なら、そんなにレイアウトに凝らないシンプルな画面のほうが良い場合もありますよ。
画像は極力、軽くなってると嬉しいです。
私σ(^_^; なんか、いまだに PHS の 64k 回線でやってますから、自分のページさえ、ちと重いかな？なんて。
この記事を参考に素敵なBLOGが生まれたら、とても嬉しいです。
それでは、頑張ってくださいませ～。
table タグは、文書の横幅を調節するくらいにしか使ってませんけど、２重に囲むと案外ややこしいことになってしまいます。ついでに、table 内のフォントサイズは、どうやら記事のフォントと同じにならないようで、やや大きめになっちゃいます。そんなわけで、あらためて font タグで文字の大きさを指定すると、さらにタグが増えて．．．もうこんがらがってますよお。
Photoshop は、ちょっと難しかったですけど、使ってみると便利なんです。
jun_creamy さんも頑張ってっ。0(^o^)o
一つ勉強になりました。
いつも楽しみにしていただいているとは、嬉しい限りです。
好物のデザートですから、画像の加工も熱が入ります。(^^;
写真だけでも、楽しんで行ってください。
よろしくおねがいします～。
いずれ画像とかも載せていきたいなと思っているので、参考にさせていただきます。
こうしてkazumuchaさんのブログが作られていると知って、ちょっと感動～。
写真はPhotoshopで影をつけていたんですね。
私も頑張ってPhotoshopを使いこなそう。
とっても勉強になりました。
また、楽しい記事を期待してます。
レイアウトって、こりだすときりがないんだけど、BLOGですから、読み易さ優先でなんとかやっていますよ。style や、TOP 画像の縛りはあるけど、どこまでも熱心に詰めるんなら、MovableType や、ホームページを作った方がいいわけで、Goo BLOG はこのくらいで丁度いいんじゃないかと思ってます。
こちらこそ、どうぞよろしくお願いします。
これからもよろしくお願いします。
ダルマに目を入れる作業じゃないけれど、プリンの影をつける作業が、一番のクライマックスです。（？
今日はどのくらい浮遊感をだそうか、それともベタ塗りの上に転がってる様子にしようか、そこで悩んでます。
何分かけて書いているのかは、永遠に秘密です。（笑
大学ノートの上や、タタミの上も、風情があってよいですよ。おやつといったら、やはり仕事や勉強の合間にたべちゃいますからね。
飲料系BLOGの「Drink Me!」の清水りょうこ 先生は
http://qrl.jp/?u=110159
これまで、橋の上からの公園を背景にしてたんですけど、最近は白地の背景が増えちゃいました。公園の方が、季節感があってよかったかなぁと思って見ているんですけどね。
これまで愛用してきたエディタの検索・置換機能は強力だったんですけど、なぜかこいつからブラウザ画面にコピー・ペーストすると、全部文字化けするんですわ。
目がチカチカするよー ■＿m（⊃Д｀）
となりながら、ちまちま手動で直しました。
３月頃のgoo BLOG なんか、何故かMacからは「改行」の入力が無効だったんで、いちいち＜br＞を入力してました。記事を修正すると改行がなくなってるので、再び＜br＞を入力してました。半月くらい、それで頑張ってたんです。今思い返すと、よく耐えてたなーと。
びっくりして感激しましたわ。
３～１０KBなんだ～。なるほど。φ(..)メモメモ
とっても勉強になりました。
どうもありがとう。
まぁ、真似は出来ないですけどね。(^^ゞ
すごいっす、うちも今度やってみるかもです（元気があれば・・・
>ひえー。
経験済みです（笑
僕はそんな時、文字列置き換え用のツールを使ってますよ。
この記事、ちょっと修正しようと思ったら、編集画面にもどったとたんに ＆lt； ＆gt；で書いた半角の＜ ＞記号が、ぜんぶタグと同化しちゃって、エライ目に遭ってますから。
ひえー。
キレイな画像の方が、おいしそうに見えますからね。
苦労のしがいがあるといいんですけど。
こんごともよろしく～。
こんな苦労をされていたんですね。
びっくりびっくりですよ。