研Q94.ブログで画像やバナーを横に整列する方法。
画像を横に並べたいこともあります。
photo by Yukari*ブログに複数の画像やバナーを並べて貼りつけたいとき、
画像を縦に並べるのはわりと簡単なのですが、
画像を横に並べるのには、ちょっとしたコツが必要です。
実際にやってみながら、ブログに画像を並べる方法を研Ｑしたいと思います。
画像を縦に並べる方法。
以前↓この記事で研Ｑしたことがあるのですが、研Q45.ブログに画像を貼る方法（画像のURLとは？）
ブログに画像を表示するタグコードは
<img src="画像のURL">
でしたよね。
画像を縦に並べるには、改行を入れながら画像表示のタグコードを
書いていけばいいだけです。
<img src="画像１のURL">
<img src="画像２のURL">
<img src="画像３のURL">
サンプル
↓
ブログ管理画面の記事エディタの画像埋め込み機能を使う場合は、
画像を貼りつけて、次の行に画像を貼りつけて・・・
とやっても同じことです。
記事エディタで「改行が記事に反映されない」設定で記事エディタを使っている方は
改行の代わりに改行タグ<br />を入れる必要があります。
画像を横に並べるには？
改行せずに、画像タグをそのまま繋げれば、画像は横に並びます。<img src="画像１のURL"><img src="画像２のURL"><img src="画像３のURL">
サンプル
↓
画像と画像の間に間隔を開けたい場合は、画像タグと画像タグの間にスペースを入れればいいです。
ここでは全角スペースを□で表現してみます。
<img src="画像１のURL">□<img src="画像２のURL">□<img src="画像３のURL">
全角スペースではなくて、半角スペースでもOKです。
サンプル
↓
半角スペースが反映されない記事エディタをお使いの方は、半角スペースの代わりに特殊文字 を入れてみてください。
HTMLに   を入れれば、ブログ記事では半角スペースとして反映されるはずです。
特殊文字について⇒ 研Q81.ドイツ語のウムラウト記号「Ö」やエスツェット「ß」などをブログに書く方法。
画像を横に並べると、↑画像の下端を基準に並んでいますね。
画像の上端を基準に並べるには「 align="top"」をつけます。
<img src="画像１のURL align="top"><img src="画像２のURL" align="top"><img src="画像３のURL" align="top">
サンプル
↓
alignのオプションをつけずにふたつ上のように画像下端を基準に並べる場合は、
「 align="bottom"」をつけたのと同じです。
画像の中心を基準に並べるには「 align="middle"」をつけます。
<img src="画像1のURL" align="middle" /><img src="画像2のURL" align="middle" /><画像3のURL" align="middle" />
サンプル
↓
↓このにほんブログ村のバナーとCCライセンスのバナーは、テーブルタグで表を使って横に並べているのですが、（テーブルの中でバナーとテキストを縦に並べることも可能。）テーブルタグを使って画像を横に並べる方法は、またいずれ書きたいと思います。
関連記事:(同窓で開きます)
研Q112.バナーやアフィリンクをブログで一列にに整列させる方法（上級編）
 表示 - 継承 2.1 |
初めて当ブログに訪れた方や何度か当ブログにお越しいただいているみなさま。
もしブログの内容を気に入って頂けましたらRSSリーダーの登録よろしくお願いします。
ツイッター でも、更新案内を流しています。 RSSリーダーとは？⇒ ＲＳＳってなんなの？
リンク切れ、動画削除などを発見されましたら、コメントで教えていただけると非常にありがたいです。もしブログの内容を気に入って頂けましたらRSSリーダーの登録よろしくお願いします。
ツイッター でも、更新案内を流しています。 RSSリーダーとは？⇒ ＲＳＳってなんなの？記事末尾200posted by +M Inamura (水村亜里)
- 関連記事
Tweet
