【趣味】アメブロで写真の配置をカッコよくしよう！

こんばんは～～♪


不定期にお送りするシュミなブログです。
今回のはコミュニケーションにも、ちこっとは関係するかも。。。？？


みなさん、アメブロで写真を公開することって多いですよね。
でも、そのまんまだと画像を配置して、文章は画像の上下、ってなりますね。



まさしく、今のこんなカンジです。

これでも、もちろん、問題ないのですが、画像の周りに文章を回り込ませたりしたい時ってありますよね♪
えっ？ない？

。。。
。。。。。。
。。。。。。。。。

ある、ってことにしといてくださいっっ！(笑)


そこで、画像の周りに文章を回り込ませる方法です！
以下のタグを画像のタグの中に埋め込みます。

style="float:right;margin:10px;"

上のタグは画像を右に配置して、画像の周囲に10ピクセルの余白を作る、という意味です。
もし左に配置したければ、rightをleftにします。
余白も好きな数を10の代わりに入力してください。
ちなみに余白は四辺一括指定だけでなく、それぞれ個別に指定することもできます。

margin:上 右 下 左;

例）上の余白を0ピクセル、右の余白を10ピクセル、下の余白を5ピクセル、左の余白を20ピクセル

margin:0 10px 5px 20px;

このタグを埋め込む位置は<img～/>の中です。

例）埋込み例

<img src="http://～～～" alt="～～～" border="0" style="float:right;margin:10px;" />

これで画像の周りに文章が配置されます。

↓こんなカンジ

これは画像が右に配置される例です♪
写真は先週の東京モーターショーでフィルム一眼レフで撮影したレクサス LFAです。
こちらは画像が左に配置される例です。
こちらは日産GT-Rの2012年モデルです。

さて、上記で画像を2枚はってその周りにそれぞれの画像に関する文章を書いてみましたが、なんか上と下で詰ってる感じがしませんか？
ってかレイアウトが崩れてるし。。。(苦笑)

先述のタグ追加で文章を画像の周りに回り込ませることはできましたが、連続させるとこのように互いのエリアに干渉し、きちんと配置されないことがあります。
これを解消します。

それには以下のタグで画像のタグと文章を囲ってあげます。

<div style="overflow:hidden;">～～～～～</div>

例）埋込み例

<div style="overflow:hidden;"><a href="http://～～～"><img src="http://～～～" alt="～～～" border="0" style="float:right;margin:10px;" /></a>文章をここに書きます。</div>

実際に埋め込んでみると、こうなります。
上のと比べてみてね♪

これは画像が右に配置される例です♪
写真は先週の東京モーターショーでフィルム一眼レフで撮影したレクサス LFAです。

こちらは画像が左に配置される例です。
こちらは日産GT-Rの2012年モデルです。

きっちりと、段組みが出来てますね。
こうなると、ちゃんと文章と画像がリンクして読みやすくなりますね。




どうせ書くブログです。
伝えたい何かがあるからこそ更新しているブログです。
であれば、読みやすさを追求するのも大切だと思います。

読者にスポットライトを当て、読みやすいブログを提供することもコミュニケーションで大切な要素ですね。