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




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


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

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

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


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

2009年12月22日

画像の表示位置(1)

■ 5-10 画像の表示位置を指定する


●見出しや文章の一部を強調する。
●文章や画像の表示位置もブログ全体の視覚的効果を考えて設定する。
などは、ブログの大切な要素のひとつですね。

伝えたいことを訪問した方に明確に伝えることの出来るサイト。
ブログやホームページ発信の大きな目的の一つです。

見出しや文章の一部を強調することや、画像の使用などは、
その明確に伝えたい効果を助けるためのものです。

簡単な文章の表示位置については前回確認しました。
今回は画像の表示位置の設定を確認してみす。

Seesaaブログの表示位置を設定するアイコンは
ki-ic01.jpg
                ueya.gif  ueya.gif  ueya.gif

画像の表示位置に使うアイコンも、文章のときと同じ三つのアイコンです。 

表示に必要な画像urlを呼び出し、そのurlを選択してアイコンをクリックする方法ですね。



使用する画像のサンプルは「利爺のロゴ」を使用します。
  (アップロードした画像を記事面に貼りこみ、その画像のurlをマウス
  で指定して反転表示したら、必要なアイコンの選択してクリックですね)

左揃えに表示して見てみましょう。

【表示例】
tosiji.jpg

左揃えアイコンをクリックして画像を表示しました。

使用しているHTMLは

【HTML】

<div style="text-align:left;"><img src="http://…使用画像url…/>
</div>




の形式で括られます。

青文字
<div style="text-align:left;">〜</div>
は画像の表示位置を表し

<img src="http://・・・・ />
が画像呼び出しのurlで、入れ子の形です。

赤文字で示している属性が「text」になっていますが、あまり気にする必要はありません。
画像を「text」の一つとして見ても構わないのです。

どうしても気になる方は
text  →  img(イメージ:画像)や margin(マージン:余白)
に変更します。
正式なHTMLの記入です。

論理的には文章のタグと同じ構造です。

「左端」「中央」「右端」への配置は
文章の表示指定と同じですので、詳しくは前回の「文章の表示位置を指定する」で再確認しておきましょう。

この左端配置の表示を見ると
枠内の左の罫線にピッタとくっ付いていますね。
レイアウトの観点から見ると上手な配置とは言えません。右端も同じです。

このような配置は窮屈感を与えますので、使用文字の1文字程度の空きを左端に作って表示するのがレイアウトの基本です。


■画像の自由位置への貼りこみ

アイコンを使っての表示位置指定は、左端・中央・右端などと簡単な位置の指定ですが
貼り込みたい場所を自由に指定して、画像を表示させるタグを確認します。

【画像の左の余白を指定する】
  ※罫線の右側に余白を指定する… 同じ意味です。

【表示例】
tosiji.jpg

表示画像は左から1文字分(12px)の余白を設定しています。

タグは
<div style="margin-left:12px"><img src="http://…使用画像url…/></div>
 
このタグは、画像や文章の開始位置を指定するために、比較的によく使われている形式です。

 「margin(マージン)」は  ⇒ 縁、フチ、余白の意味です。

属性  ⇒  margin-left(左からの余白)
属性値 ⇒  12px(余白の長さ)

左の縁(margin-left)から「12px」の余白を取って、その位置から画像(または文章)を表示しなさい。
という意味になります。

属性を「 left、right、top、bottom 」に差し替えて使用します。
今まで使用したタグと同じ形ですから、覚えやすいですね。

【marginの上・下・左・右の余白をまとめて指定する】

<margin>タグは属性として、<margin-left: margin-right: ・・>の様に、単体で使うほかに

 <div style="margin:@px Apx Bpx Cpx;">


の形式で
「ひとつの属性に複数の属性値」をまとめて指定する方法があります。

<margin>に@からCまで指定した空白を取りなさいというタグです。

    注)
   ●@やAなどの数字は説明の必要上、表記していますので
    タグ使用の際は@などの数字を書き込む必要はありません。

指定方法に、leftとかrightのような細かい指定の属性値を入れる必要が無く

<"margin:@px Apx Bpx Cpx;">

 @ = 上(top)
 A = 右(right)
 B = 下(bottom)
 C = 左(left)

表示の指定は@の上から始まり
「時計回りの順」で位置が決まっていますので、必要な箇所に指定したいサイズを書き込みます。

使い慣れている言葉「上下左右」の順ではないのですね。

よく使用されるタグで、CSS(スタイルシート)を開いたときにもよく目にします。

使い方の例は

●上から12px の余白
●右はなりゆき(指定無し)
下に12pxの余白
左から 108px の位置

に画像を表示したい場合は

【HTML】
<div style="margin:12px 0px 12px 108px;">

の属性値の記入順(文字色別)になります。
  ↓
【表示例】
tosiji.jpg

余白が必要のないところは、
そのまま 「 0px  」として残しておきます。

サンプル画像のような「小さい画像」の表示例の場合は
「右の余白」の指定は必要ないですね。
小さい画像ですので、左から余白を取って画像を貼り込んだら、右のサイズは余っているサイズです。

そのことをデザイン用語では「なりゆき」と言います。「成り行きのままのお任せサイズ」の意味です。

「margin」タグは、表示位置指定の自由度が高いため、
慣れてきたら使いやすいタグになります。


この利爺のブログでは、
文字の大きさの単位を「px」で使っていますので、余白を指定する単位も統一する上で
「px」を使っていますが、「pt」など使いやすい別の単位で指定しても構いません。

ただし使用文字の単位を「px」にしていれば、画像の単位も「px」で、marginnなどの単位も「px」
で指定するようにした方が楽です。

使っている単位を統一しておくことが理想です。

余白サイズも、自分のブログで使用している基本的な文字サイズが12pxでしたら
12pxの倍数で指定した方が、文章と画像の面(ツラ)が揃ってスッキリします。

文字の大きさ「12px」の2個分の余白なら(12×2=24:余白24px)という使い方になりますね。
余白は使用文字の「×個数」で計算できるようしておきましょう。


●属性「margin」に

<div style="margin:●px;">

のように指定を一つだけにしますと、上・右・下・左の全ての余白を同じサイズに指定した意味になります。


「margin」属性と同じような
余白指定をする「padding(パディング)」と言うタグがあります。

「margin」と「padding」は厳密に言えば、ペアで使って、余白を調整するタグです。
両方のタグをうまく使えれば、色々な形の画像の配置や文章の表記が出来ます。

「margin」   ⇒ 要素の外側の余白
「padding」  ⇒ 要素の内側の余白

その使用法を一緒に覚えることが理想的ですので、余白のHTMLの時に再度詳しく確認します。



次回は、
ブログの表示上で重要な役割を果たす、画像の組み合わせを確認します。



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

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



この記事へのコメント
ハイサイ利爺さん

コメント有難うございます。

コメントとどいてます、確認がおくれて済みません。
気おつけて見るようにしていますが、
めったにこないのでいつも見逃して、
承認がおくれました。

利爺さんのサイトは、いつも参考にさせてもらつてます。

失敗して削除するほうがまだ倍以上ですが、
疲れていても毎日2時間以上はパソコンに取り組んでいます。

5時間こえると年齢のせいかつかれます。
打っている時は時間をすっかりわすれて、
寝夜になることがおおいですが、
パソコンはたのしですね。

長くなってすみません。
いつも応援してます。
Posted by octagon at 2009年12月22日 22:53
こんにちは!

アイコン、のコトバに惹かれて読んでみましたが、
ちょっと難しかったです。

まず、ロゴも覚えなくては・・・。

でも、ここに来れば説明があることがわかるので、
安心しています。

よろしくお願い致します。

Posted by サリー at 2009年12月22日 23:29
ハイサイ利爺さん こんにちは


なんとなくランキングから来ましたが勉強になるサイトみつけたって感じでうれしくなりました。

タグの使い方が分かりやすく説明されてて参考になります。

応援ぽちしときやした。
Posted by 速収アフィ♪taro at 2009年12月23日 15:30
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

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


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

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

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