新着記事
2006年11月08日

ブログでの画像の使い方(回り込みなど)

※この記事は以前に別のブログで書いた記事を、こちらに移行したものです。

ブログは記事の中に画像とテキストをバランスよく配置するのが難しい。特に記事中の画像が多くなると、記事は縦にどんどん伸びていくのでスクロールするのもたいへんである。だからこそ、少しでも読みやすいレイアウトを心がけたい。

ほとんど各社ブログの編集機能において、画像をサムネイルで表示させる機能があるのではないかと思う。しかしなんでもかんでもサムネイル表示にしてしまうのは考え物だと思う。元画像が小さいのにサムネイル表示させている記事も見かける。おそらくサムネイルファイルでの画像貼り込みがデフォルトになっていて、そのまま変更しないで編集していると思われる。しかし大きな画像で見たいと思ってクリックしたら、別画面にも同じサイズの画像が出てきたときは、ガッカリを通り越して腹立たしいときもある。ブログの編集に慣れてきたなら、サムネイル表示にするかしないか、その記事、その写真の持ち味を生かすのはどちらだろうかと考えて選択することも必要である。

2カラムのテンプレートで画像2,3ファイルを載せる程度なら、記事幅とのバランスを考えて横幅300〜400ピクセルの画像をサムネイルではなく使ったらどうか。そのほうが見栄えもして、読みに来た人を惹きつけるのではないだろうか。また私の場合は、記事の内容をもっともよく表す一枚が記事のトップに大きめサイズで配置してあると、記事も読んでみたい気持ちになる。数枚の画像を配置する場合は、記事トップの画像とサムネイルと組み合わせて配置するとメリハリがあると思う。

全て同じ大きさのサムネイル画像を、縦に並べて配置するのも読みやすいと思う。先日久しぶりに画像をペタペタ貼り付けた記事を作ったが、パッとしない写真ばかり。だからサムネイル表示にする必要もなかったのだが、枚数が多いのでダウンロードの表示速度を考えサムネイルにしてある。

逆に記事枠いっぱいの500ピクセルくらいの画像がずらずらっと貼ってある記事もある。さすがにヒカリ接続といえども、また時間帯、ブログ側のサーバーの重さなどの影響があると、なかなか表示されずにイライラすることもある。

で、サムネイル画像にすると記事の片側にスペースが空くので、そういう場合は「画像の回り込み」をしてテキストを画像の横に配置する。最近一般的なブログでは、画像の回り込み指定のタグを入れてくれる編集機能が付いているようだ。Seesaaブログでは画像の貼り込み機能がいつの間にか進化し、画像を貼り付けたい場所にカーソルを置けばその位置に貼り込みが出来るようになったし、回り込みor回り込みなしの指定もできるようになった。

それまでは生成された画像のリンクをコピーで貼りたい位置にペーストし、その都度HTML align="left" をペーストで入れていた。

さて、「画像の回り込み」をした場合、回り込むテキストの分量が少ないと下に貼った画像も回り込んでしまう。時々画像が幾つも回り込んで、階段状になってしまい、挙句画像脇のスペースは一行分が数字しかないのにそれも回り込ませてしまっている記事を見かける。

例えばこんな具合↓

05.10.24.jpgベーグル、おいしかったよ(^^)
05.10.23.jpg今年の冬もスノーシューでいっぱい遊ぼう!
05.09.29.jpgこの写真は去年の秋の銀杏の実り具合でして…今年はもっとたくさん実りましたが、全部風で落ちました。


これを避けるには、回り込みを止めたい箇所に回り込み解除を指定する <br clear="all"> というHTMLを書く。

つまり ベーグル、おいしかったよ(^^)<br clear="all"> とすれば↓

05.10.24.jpgベーグル、おいしかったよ(^^)

05.10.23.jpg今年の冬もスノーシューでいっぱい遊ぼう!

05.09.29.jpgこの写真は去年の秋の銀杏の実り具合でして…今年はもっとたくさん実りましたが、全部風で落ちました。

このようになる。

ちなみにSeesaaブログでは <br clear="all"> は、いったん記事を「確認」または「保存」すると自動挿入されるようになった。

拍手してくださるとうれしいです→ 拍手する

このエントリーをはてなブックマークに追加
posted by Masako at 07:25 | Comment(1) | TrackBack(0) | サイト制作試行錯誤 | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
ありがとうございました。参考になりました!!
Posted by bunbun at 2007年11月12日 23:55
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック
最近のトラックバック