研Q94.ブログで画像やバナーを横に整列する方法。 - ネットビジネス研Q室(新館)

このエントリーをはてなブックマークに追加

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
このエントリーをはてなブックマークに追加
このエントリーをはてなブックマークに追加

研Q94.ブログで画像やバナーを横に整列する方法。

画像を横に並べたいこともあります。

sleeping doggy x 4 - 無料写真検索fotoq
fotoq.net
photo by Yukari*


ブログに複数の画像やバナーを並べて貼りつけたいとき、
画像を縦に並べるのはわりと簡単なのですが、
画像を横に並べるのには、ちょっとしたコツが必要です。

実際にやってみながら、ブログに画像を並べる方法を研Qしたいと思います。


 画像を縦に並べる方法。

以前この記事で研Qしたことがあるのですが、
研Q45.ブログに画像を貼る方法(画像のURLとは?)

ブログに画像を表示するタグコードは
<img src="画像のURL">
でしたよね。

画像を縦に並べるには、改行を入れながら画像表示のタグコードを
書いていけばいいだけです。

<img src="画像1のURL">
<img src="画像2のURL">
<img src="画像3のURL">


サンプル
 


○印200x200
○印250x250

ブログ管理画面の記事エディタの画像埋め込み機能を使う場合は、
画像を貼りつけて、次の行に画像を貼りつけて・・・
とやっても同じことです。

記事エディタで「改行が記事に反映されない」設定で記事エディタを使っている方は
改行の代わりに改行タグ<br />を入れる必要があります。


 画像を横に並べるには?

改行せずに、画像タグをそのまま繋げれば、画像は横に並びます。

<img src="画像1のURL"><img src="画像2のURL"><img src="画像3のURL">

サンプル
 
○印200x200○印250x250


画像と画像の間に間隔を開けたい場合は、画像タグと画像タグの間にスペースを入れればいいです。

ここでは全角スペースをで表現してみます。

<img src="画像1のURL"><img src="画像2のURL"><img src="画像3のURL">

全角スペースではなくて、半角スペースでもOKです。

サンプル
 
 ○印200x200 ○印250x250

半角スペースが反映されない記事エディタをお使いの方は、半角スペースの代わりに特殊文字 を入れてみてください。

HTMLに &#xA0; を入れれば、ブログ記事では半角スペースとして反映されるはずです。
特殊文字について⇒ 研Q81.ドイツ語のウムラウト記号「Ö」やエスツェット「ß」などをブログに書く方法。


画像を横に並べると、画像の下端を基準に並んでいますね。

画像の上端を基準に並べるには align="top"をつけます。

<img src="画像1のURL align="top"><img src="画像2のURL" align="top"><img src="画像3のURL" align="top">

サンプル
 
○印200x200○印250x250


alignのオプションをつけずにふたつ上のように画像下端を基準に並べる場合は、
align="bottom"をつけたのと同じです。

画像の中心を基準に並べるには align="middle"をつけます。

<img src="画像1のURL" align="middle" /><img src="画像2のURL" align="middle" /><画像3のURL" align="middle" />

サンプル
 

○印200x200○印250x250




このにほんブログ村のバナーとCCライセンスのバナーは、テーブルタグで表を使って横に並べているのですが、(テーブルの中でバナーとテキストを縦に並べることも可能。)テーブルタグを使って画像を横に並べる方法は、またいずれ書きたいと思います。

関連記事:(同窓で開きます)
研Q112.バナーやアフィリンクをブログで一列にに整列させる方法(上級編)

 クリエイティブ・コモンズ 表示 - 継承 2.1
表示 - 継承 2.1
初めて当ブログに訪れた方や何度か当ブログにお越しいただいているみなさま。
もしブログの内容を気に入って頂けましたらRSSリーダーの登録よろしくお願いします。
Subscribe with livedoor Reader My Yahoo!に追加 
ツイッター でも、更新案内を流しています。                          
RSSリーダーとは?⇒ RSSってなんなの
  リンク切れ、動画削除などを発見されましたら、コメントで教えていただけると非常にありがたいです。
▲ネットビジネス研Q室のトップページに戻る▲  ●ネットビジネス研Q室の記事一覧●
記事末尾200posted by +M Inamura (水村亜里)
関連記事
このエントリーをはてなブックマークに追加
コメント
非公開コメント

ブログでつながり隊のバナー(横長)

トラックバック

http://aminamura.blog.fc2.com/tb.php/94-7dc84c66

QLOOKアクセス解析
Related Posts Plugin for WordPress, Blogger...
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。