フォト

おしらせ

  • おしらせ
    2011年12月でこのブログの更新は終了しました。
    2012年からは新しいブログで更新を続けているので、そちらのブログでお会いしましょう!
    Twitter

運営サイト

  • RouxRil
    2007年から運営しているサイトです。日々の暮らしの様子を綴っています。モノ・コト・キモチを記録しているレビューサイトでもあります。家族旅行の記録、京都の話題、私が好きなコスメの話題などを書いています。

このブログについて

« このページのを考えている。 | トップページ | Googlemapで地図 »

2008年8月22日 (金)

地味にこだわっているブログ記事に掲載する画像の件

ブログの記事部分の横幅を把握してますか?
いきなり余談を書きますが、わたしは横幅とか、数字のごろ合わせをやたら気にするタイプで、444pxとかちょっといや。しあわせしあわせしあわせ!とか思えるけどやっぱり違うイメージが・・・。555px(ゴーゴーゴー!)とかちょっとテンションが上がります。まあこれはすごい余談です。

さて、ブログの記事部分の横幅を○pxとかで指定してある場合、そこに掲載する画像の大きさもそれに合わせて表示しないと気持ち悪くて仕方がありません。私のブログで横の大きさが多い写真が多いのがそのせいです。
ココログの画像掲載画面では、カスタム設定で「画像を本文の横幅に合わせて表示する」というものがあり、ぴったりと勝手に合わせてくれる機能があってちょっと好きなんです。
このブログの場合、記事部分の横幅はだいたい500pxくらいで、記事の中に、「画像を本文の横幅に合わせて表示する」で写真を掲載した場合、こうなります。

Imgp7069

だいたいもとからブログ用に撮った写真は、横640pxで撮影する癖がなぜかあり、何でそうしているのかもわからないのですがいつもそんな感じ。なんでだろう???

これがもし仮に、340pxくらいだとこうなります。

Imgp7069_2

これだと、センタリングさせたくなります。文字を回りこませようと思っても、なんだか?な感じになるので、どうしていいかわからない大きさ。めんどくさいので、本当はあまり好ましくないかもしれませんが、centerタグで囲ってみます。

Imgp7069_2

雰囲気は変わるんですが、やっぱり横の余白がなんだかバランスが悪い気がする。
じゃあ仮に、340pxをやめて、そうだなあ・・・。携帯電話の240pxくらいにしてみます。だいたい横幅500pxの半分ですね。

Imgp7069_3

ココログだと、画像を載せる時に、文字を回りこませる?みたいなのを設定できるので、それをやって文字を回りこませてみるとこんな感じになります。「画像は左側に寄せて文字を回りこむようにしてください」というお願いの呪文は、
「 style="float: left; margin: 0px 5px 5px 0px;" 」 
この部分です。 float: left; 左側にしてください。右にしたい場合だと、left の部分を right にします。
margin は、余白なので、これを指定しないと、文字がぴったり画像にくっついてカッコ悪いんです。margin: 上 右 下 左 ; で指定しています。仮に、上下共15px、左右共10px、にしたい場合は、margin: 15px 10px ; で大丈夫だと思います。適当に書いたので気になる方は調べてください。

Imgp7069_3文字を回りこませる場合は、記事が自動で改行するようになっているタイプのブログがほとんどなので、/a に改行を入れないで続ける形で文章を書きます。でもこれをすると、パソコン画面ではちゃんと表示されますが、携帯とかRSSとかで見ると変になります。こういうときはどうしたらいいの?と思うので、もうめんどくせえよおおおおー。横幅ぴったりのがぞうでええわーい。というのがめんどくさがりやの、本音です・・・。下5pxの余白だと微妙な感じになるので、ちょっと変更してみるなら・・・まあいいや。大きさのことはどうでもよくて、なぜブログの記事内でそういう風な画像の大きさへの地味なこだわりをもったかという記事があったのだけれどそれが思い出せないのでちょっと思い悩んだという記事です。

おわり。

ちなみに、Firefoxで、[Ctrl]と[-]を同時に押したら、ズームアウトして、[+]だとズーム、[0]だと元に戻るのを今月発見して、かなり喜んで使っています。めっちゃちっこくなるの。しかもそのサイトにアクセスするたびにそのサイトだけちっこいの。不思議な機能だ・・・。文字が線になるくらい小さくしてそれを見て、なぜか笑っています。むしょうに愉快で面白い。全体のバランスがよくわかっていいですね。サイト縮小させると。

« このページのを考えている。 | トップページ | Googlemapで地図 »

■ブロガーソウル」カテゴリの記事

コメント

この記事へのコメントは終了しました。