TOP ブログの基本 アフィリエイト アクセスアップ カスタマイズ ブログ・HTML ブログ・CSS




ハイサイ(ようこそ)利爺のブログへ


●ブログの基本、アフィリエイト、HTML・CSSまで
初めての方にも分かり易いように下記のシリーズで纏めています。

・・・・・・・・・・・・・・・・ 各章の項目(目次) ・・・・・・・・・・・・・・・
= 現在、シリーズ記事を書いているブロックです。

エントリー順に確認できるように【目次】を作ってありますので
上段のコンテンツバー(menu)または上記の項目から各ブロックに入れます。


●本文中に表示しているアイコンは
= 参照記事  = 頁中の章  = 注釈  = 記事ブロック
を表します。

2009年12月24日

画像の表示位置(2)

■ 5-11 画像を組み合わせる

●ブログやホームページなどのウェブサイトは、全体の構成を考えて、統一性のあるデザインすることが大切です。

●タイトルの文字の大きさ・文字の色、見出し項目、記事で使用している書体、文字の大きさや行送り(高さ)など、一つの流れに沿ったデザインの統一性が重要になります。

●文字の強調や画像の表示も、自分のコンセプトを基にトリミングや配置をすべきでです。

●文字や画像・表などの使用は
大き過ぎず小さ過ぎず、全体のバランスを考えたサイズでの表示がポイントになります。


画像を思った位置に自由に貼り込む方法を、前回、確認しました。
貼り込みは理解できていると思いますので

【複数の画像を組み合わせる、HTMLの使用方法を確認します。



画像を
「横」や「縦」に並べる簡単なHTMLの組み合わせをみてみましょう。

「画像を横に並べる」

画像を横に並べて表示するには、画像img「url」をそのまま改行無しで続けて記入します。

「HTML」
<img src="http://…@の画像url…/><img src="http://…Aの画像url…/>

【例1:横並び画像】
tosiji.jpgtosiji.jpg


「画像を縦に揃える」

画像を縦に並べて表示するには、一枚目の画像img「url」を記入して、その後に「改行<cr>を入れ、2枚目の画像urlを記入します。

「HTML」
<img src="http://…@の画像url…/>● ← 強制改行<cr>を挿入
<img src="http://…A画像urlL…/>

【例2:縦揃い画像】
tosiji.jpg
tosiji.jpg

「例1」や「例2」のように、記入するHTMLタグを
連続で記入するか、改行を入れて記入するかで横並び、縦揃いの表示になります。

「例1」や「例2」で
表示している画像は互いの画像が隙間なく、画像と画像の境目がありませんね。

このように画像同士を隙間なく、境目がないように表示する方法を
デザインや印刷では「毛抜き合わせ]といいます。

何枚かの写真を一枚の様に見せるテクニックは、個人の日記ブログとしては面白いですが、
アフィリエイトの商品の紹介ために使用する画像の配置では、いい使い方ではありません。

組み合わせるために、何枚かの画像を貼り込む場合でも、
相手に分かりやすい画像のレイアウトが必要です。

さらに上記「例1」のタグの使用の方法は、厳密に言えば間違ったタグの使用になりますので、
CSSに準拠した方法を薦めます。


画像を右や左に回り込ますには、それなりのタグの使い方が有ります。

タグの記入形式は「例1」と同じです。
そのタグに「回り込み」のための「属性と属性値」を追加します。

画像を右側に配置する属性には

@「align="left"」 = 右に回り込ますためのalign属性
A「style="margin-right:●px 」 = 右に余白を空けるmargin属性

があります。
属性の使い方でタグは色々な形に変わりますが、使いやすい上記2種を確認します。

「align="left"」

<img src="http://@の画像url… border="0" />

赤丸印の場所に「 align="left"」を追加します。
その後ろには改行無しで、次の使用する画像urlを記入します。

貼り込む画像が「img@・imgA」の2点のときの「 align="left"」属性の追加場所は、
画像<img@●>の要素内「●」の部分です。画像<A>には挿入しません。

「HTML」
<img src="http://@の画像url… border="0" align="left/><img src="http://Aの画像url… border="0" >

2点以上のときは
<omg@●><imgA●>の各要素内に挿入して<imgB>はそのままです。
つまりタグの<img@>にも<imgA>も「align="left"」を書き込み<imgB>には書き込みません。

表示結果は「例1」と同じ結果になりましたが、タグの正式な書き方です。

「 align="left"」は回り込みの属性として使っていますが
右に回り込ますのに属性値は「left」になっています。

感覚的にイメージ的には、
右に表示するのだから「right」ではないのかと思いますね

「 align="left"」の align 
は「揃える・並べる」でしたので、基準の「left」にある画像に揃えるの意味になります。
つまり、
最初の画像の表示位置は「左側」(left)にして、次の画像は「左の画像」に揃えてその「右」に表示という意味で捉えます。

「align="right"」にすると表示が逆になります。

このほかに「align=""」属性の仲間には
「vspace=""、 hspace=""」を付け、位置を指定する方法もありますが、ここでは省略します。


「style="margin-right:●px 」

このタグは
●画像を右側に配置する(回り込み)ための属性 ⇒ 「align="left"」
●余白を指定するための  ⇒ 「style="margin-right:●px 」
属性を組み合わせます。

「align="left"」で右に回りこみ
「style="margin-right:●px 」で指定された余白を取る…。  の形です。  

画像と画像の間に余白のないレイアウトは
ページに窮屈感を当てえますので、画像と画像の間には、見栄えのいいように余白を設定した方がいいでしょう。

●空白を生かすこともデザインの基本ですね。

使用するタグを確認します。

@の画像urlの赤丸印の場所に
「align="left" style="margin-right:●px」
と入力します。

<img src="http://@の画像url… align="left"
style="margin-right:●px"/>
<img src="http://Aの画像url… "/>

の形式です。

画像を表示して見ましょう。

【例3】
tosiji.jpgtosiji.jpg

画像と画像の間に●px分の隙間が空きましたね。
●pxの単位を調整することで、余白の大きさを自由に設定できます。

「style="margin-right:●px 」を使用するときは
「align="left"」の属性がなくても結果は同じですが

属性の使い方を取得するためにも、意味の通じる使い方に慣れた方がいいでしょう。

ブログのレイアウトのために、このタグ形式を覚えましょう。

そして
@「align="left"」
A「style="margin-right:●px 」

の属性を使用した後は、属性解除のタグ
<br clear="all">
を入れます。

解除タグを入れることによって、右や左の回りこみが解除され
次からは、元通りの初期設定(文章や画像の左揃え)に戻ります。

【例4】
tosiji.jpgtosiji.jpgtosiji.jpg

「例4」は3枚の画像を横一列に配置した例で「例3」の応用です。

タグの使用方法は前述したとおりで、使用画像が増えているだけです。

【例A】
tosiji.jpg

tosiji.jpg

「例A」は「例2」と同じですが
上の画像と次の下の画像の間には空白行(改行)が挿入されています。

空白のサイズは、記事の行の高さ(行送り)を定義したCSSに準拠しています。、
定義した「line-hight:●px」の値が基準になります。

一行や二行分の空きは
改行(空白行)=<br>の数で調整するのが一般的です。



次回は
回り込みのタグ用いて「画像と文章」の組み合わせを確認します。



▲HTMLの関連記事
   holder01.gif ブログで使うHTML-目次ー
    http://tosiji-dreamafi.seesaa.net/article/133635358.html

★ご協力お願いいたします★   
      kame.jpg
    banner_01.gif
……人気ブログランキング……



この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

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


※画像の中の文字を半角で入力してください。
※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバック
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。