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




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


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

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

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


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

2010年08月23日

箇条書きの基本(4)マーカーに画像を使用

■ 5-29 マーカーを画像・アイコンに変更

ブログは、訪問者の視線の動きを考えたレイアウトが重要になってきます。

とくに視線の流れに気を配ったレイアウトは、
見た目にも美しく、発信している人の優しさと気配りを感じます。

使い勝手のいいブログは
●ブログの目的がハッキリしている。
●内容が整理されている。
●道筋がたどりやすい。

など、訪問者に対する気遣いがありますね。

「伝えたいことを要約して分かりやすくまとめる」
そのことは、記事(文章)を書くことの基本ですね。

箇条書きも、その要約する手法のひとつですね。

その箇条書きの項目を
●記事の流れを、目で追いやすいようにマーカーの種類を変えたり
●重要な項目には画像(写真・イラスト)やアイコンをマーカーに使用することで
●強調するポイントを作り、訪問者を案内するスムーズな流れ

が作れます。


■ マーカーを画像やアイコンに差し替える。

箇条書きのデフォルトで表示されるマーカーは「●」「○」「■」「1」… の種類でした。
そのデフォルトで表示されるマーカーを写真やイラストなどの画像、独自で作成したアイコンに変更するHTMLタグの記入を確認します。

    注)
   ●アイコンとは
    イラストや写真画像などを「32×32px、16×16px」 のサイズ
    または、それより小さいサイズで作り上げたものの総称。

   ●厳密にはアイコンは拡張子が「….ico」のタイプを言うが、
    最近ではそれほど厳密な区分けをしていないようだ。

   ●この記事で使用している画像やアイコンは「….gif」形式を
    使用しています。

箇条書きのHTMLタグの形式は

【ul】要素
<ul>
  <li>那覇市
  <li>沖縄市
  <li>浦添市
</ul>


の形式でしたね。

項目のマーカーを画像やアイコンに変更する為のプロパティは
list-style-image
を使用します。

   image = 写真やイラスト類を指す

箇条書きのデフォルトでは
「●」や連番の「1、2」アルファベットの「a b」のようなマーカーしかないですね。


■ アイコンを用意する。

ネット上には数多くの無料で使用できるアイコンがあります。
気に入ったアイコンを取得するか、
独自のアイコンを作って、自分なりのブログデザインにするのもいいでしょう。



上記リンクの参照で、独自のアイコンの作り方を確認しておきましょう。

作成した三角形のアイコンが下図です。

【16px サンプル画像】

   

アイコンの基本にそって「16×16px」で作成しました。
拡張子は「ico」形式ではなく「gif形式」です。

このブログの使用書体の大きさは「12px」ですので、書体とマーカーのバランスを取るため
「12px」または少し小さめのサイズに修正した画像を各項目の頭に表示します。

最初から文字の大きさ程度のアイコンを作成して、使用することも出来ますが、
画像の表示段階でジャギングの現象が起こることがあります。

    注
   ● ジャギング = 画像の周辺がギザギザに表示される現象。

画像を使用するときの基本どおり、
大きめのサイズ(2倍以上)で作成してアップロードのあと
使用するときに書体の大きさを基準にした縮小サイズで表示することが望ましいです。

12pxや10pxの画像は、表示上はアイコンと言うよりむしろ「ファビコン」に近いですね。




■ 項目に同じ画像を表示する。

【HTML】

<ul style="list-style-image: url('画像のurl');">
 <li>那覇市
 <li>沖縄市
 <li>浦添市
</ul>

【表示】
  • 那覇市
  • 沖縄市
  • 浦添市

<list-style-image>での指定です。
上手くマーカーの位置に画像が表示されていますね。

●箇条書きの各項目に「同じ画像」を表示するときには
<ul>要素
の中に画像の<URL>を記入。

●項目ごとに「異なる画像」を表示するときは
<li>要素
に、対象となる画像の<URL>を組み込みます。( ↓ 下段「表示2」)


画像を読み込むHTMLソースは、
ブログの画像保存の場所にアップロードしていますので、

<ul style="list-style-image: url('http://tosiji-dreamafi.up.seesaa.net/image/・・.gif');">

のように「絶対パス(絶対番地)」での記入です。
 
【HTML】

●<ul style="  list-style-image ~  " の
    「" ~ "」が「list-style-image」の範囲。

●url(' ~ ') が、画像の<url> ('  ')は入り子の形式です。

●HTML内の
  ” (ダブルコーテーション)と  ' (シングルコーテーション)の記入
 を忘れないように.


<url>番地の指定は
独自のサーバーを所有して、データ類がそのサーバーにあるときの<url>の記入方法と
ブログサービスを利用したときの<url>の形式が異なりますので、注意が必要です。

ここで取り上げた例は、ブログサービスを中心にしたimgタグを確認しています。

●<list-style-type> と<list-style-image>
のプロパティを同時に指定した場合には<list-style-image>が優先されます。


■ 各項目に異なる画像を表示する。

項目ごとに異なる画像やアイコンを表示するときは
<li>要素に対象となる画像のURLを組み込みます。

【HTML】

<ul >
 <li style="list-style-image: url('画像1url');">那覇市
 <li style="list-style-image: url('画像2url');">沖縄市
 <li style="list-style-image: url('画像3url');">浦添市
</ul>

【表示2】
  • 那覇市
  • 沖縄市
  • 浦添市

各<li>要素に一個いっこの画像urlを記入する煩雑さはありますが、思い通り画像やアイコンが表示できますね。


■ 画像の表示位置を修正する。

画像やアイコンを使用してみると、表示位置が微妙にずれますね。

表示位置を調整する方法として
画像配置の<background>をHTMLのタグとして使う方法があります。

<background>は
背景色や背景画像を指定するCSSプロパティですが、タグとして
<li要素>に設定すると、画像やアイコンをリストマーカーとして表示することができます。


次回は

●CSSへの箇条書きの定義
●HTMLでの適用

を確認します。



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

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



2010年08月02日

箇条書きの基本(3)

■ 5-28 マーカーの表示位置を指定

個条書き項目の表示位置は、
自動的にデフォルト値で表示されますね。

文章を読みやすく・見やすい位置に項目(リスト)を揃え
余白とのバランスを取る方法が
以前、確認した<marginとpadding>の余白を取るタグの活用です。



【表示1】
箇条書きのデフォルト値

<ol>
 <li>沖縄県の人口
  <ul>
   <li>那覇市
  </ul>
</ol>

@ABCDEF
  1. 沖縄県の人口
    • 那覇市

デフォルト値での表示位置です。

●破線(ドット線)で囲まれている領域を、ブログ記事の仮の領域に見たてています。

●マーカーとの箇条書きの位置が分かりやすいように

 「親項目」(沖縄県の人口)の領域には薄いピンク色
 「入り子の項目:子項目」(那覇市)には薄いブルーを

バックに使います。

●@ABCDEFのの数字は
左からの位置を確認するため、メジャー・目印として表示しています。

    注
   ●このブログの文字の大きさは「12px」を使用していますので、
    @やAの文字の横サイズは「12px」です。

●<margin-left="0">の位置は
記事を表示する領域を囲んだ破線の左端と、数字の@が触れる位置になります。

デフォルト値の箇条書き項目のマーカーの表示位置は

親項目「沖縄県の人口」では、左端から1文字分(12px)の位置、
子項目「那覇市」では3文字(36px)を取った位置です。

この例のように
項目の領域部分にはバック色が表示されていますが
マーカーにはバック色が塗られていません。

このことは

「箇条書き項目」と頭の「マーカー」は別個に表示される

ことを意味しています。

別々に表示されるから
●マーカーの種類の変更、●連番の形式を変える
ことが可能なのです。

「入り子」の要素も同じ性質です。

実際のブログの記事領域での箇条書き、デフォルト値の表示を確認します。

@ABCDEF
  1. 沖縄県の人口
    • 那覇市

ブログの記事の表示領域に、デフォルト値で表示した形がこの表示です。

【箇条書きの特徴】
(1)余白の大きさは、使用文字の大きさに準拠します。
(2)マーカーと項目は別々の表示になります。
(3)マーカーの位置と項目の間には、1字分の余白が作られます。
(4)余白部分は
   ●表示領域の左端から「項目の頭」までのサイズ。
   ●マーカーは項目が左側に取った余白の中
    表示される。

     ⇒ 【表示1】を参照。



    注
   ●マーカーのサイズ
   <ol>の順序あり箇条書きでは「1.」のように数字の後ろに
   「.」半角のコンマが付きますので、実際には1.5倍くらいの
   (18pxくらい)の余白です。 
   ●半角ほどの誤差はあまり気にする必要はないでしょう。

   ●<ul>順序なし箇条書きでは「●」(全角1字分)の大きさです。


以上の要約が <margin>や<padding> を使用して、
箇条書きの表示位置を調整する時の考え方の基本になります。


■ <margin>での余白設定。

<margin>は外側から内に対する余白。

ブログ表示領域の各々の端から、
項目や段落を表示する領域の位置を指定するタグになります。

「margin」の基本形

margin:0px 0px 0px 0px
margin-top:0px
margin-bottom:0px
margin-left:0px
margin-right:0px
margin:0px

⇒上下左右の余白
⇒上の余白
⇒下の余白
⇒左の余白
⇒右の余白
⇒四縁が同じサイズ

<padding>も同じ形式です。

<margin>で箇条書き項目の表示位置を設定してみます。

【表示2】
●margin-left:0px;padding-left:0px; の例

<ol style="margin-left:0px;padding-left:0px;">
 <li>沖縄県の人口
  <ul>
   <li>那覇市
  </ul>
</ol>

@ABCD
  1. 沖縄県の人口
    • 那覇市

<nargin>と<padding>の各ヘリからの余白(属性値)を「0」にしました。

項目の表示は、指定された「0」の位置からになります。

前述の要約(4)で分かるように
項目の前に余白がないためマーカーが領域外に表示されています。

このような領域外への表示は
サイドのカラムが下段に追われる「カラム落ち」の原因となり、表示エラーになりますので注意が必要です。

●表示結果からみても<margin>で指定する余白は、
マーカーに対してではなく、項目を表示する位置であると分かりますね。

表示領域の左端ギリギリにマーカーを表示するには

表示領域の左端から

 ●マーカーのサイズ(使用文字の大きさ)
  +(プラス)
 ●項目までの空き

の余白が必要ですね。

言い方を変えれば

●項目の前にマーカーを表示するだけの余白が必要。
と言うことです。

最小限の余白サイズは

 @ マーカーの大きさ(このブログでは12px) = 12px
 A マーカーと項目の間の余白        = 12px
 の計「24px」が必要と言うことですね。

<margin:0px 0px 0px 24px;>で
左端に「24px」の余白を取り項目を表示すれば、領域の左端ギリギリの位置にマーカーが表示されます。

下記の「表示3」がその例です。

【表示3】
●margin-left:24px;padding-left:0px; の例

<ol style="margin-left:24px;padding-left:0px;">
 <li>沖縄県の人口
  <ul>
   <li>那覇市
  </ul>
</ol>

@ABCD
  1. 沖縄県の人口
    • 那覇市

マーカーが表示領域の左端に表示されましたね。

表示例のような
左端ギリギリに箇条書きをすることは無いでしょうが
<margin>タグを使用するときの考え方として確認をしておきます。

この形式は「入り子」にも適用されます。

「親項目」の表示位置が変わると、それに準じて「子項目」も移動します。

入り子でも、余白の指定がなければデフォルト値が反映されます。


■ 入り子の例

【表示4-a】
●入り子=margin-left:0px;padding-left:0px; の例

<ol style="margin-left:24px;padding-left:0px;">
 <li>沖縄県の人口
   <ul style="margin-left:0px;padding-left:0px;">
    <li>那覇市
   </ul>
</ol>

@ABCD
  1. 沖縄県の人口
    • 那覇市

親項目では<margin="0">の位置は、ブログの表示域の左端でしたが、
入り子の「子」項目での<margin="0">の位置は

●親項目の項目の頭の位置になります。

同じように、子項目に対する入り子「孫」項目は、子項目の頭になりますね。

【表示4-b】
●入り子=margin-left:24px;padding-left:0px; の例

<ol style="margin-left:24px;padding-left:0px;">
 <li>沖縄県の人口
  <ul style="margin-left:24px;padding-left:0px;">
   <li>那覇市
  </ul>
</ol>

@ABCD
  1. 沖縄県の人口
    • 那覇市

上記の【表示】例が、箇条書きの表示位置のデフォルト値を書き換えて、自分なりの位置に表示する方法です。

余白の取り方には、<padding>での形式もあります。
確認してみましょう。

■paddingでの余白。

【表示5】
margin-left:0px;padding-left:24px; の例

<ol style="margin-left:0px;padding-left:24px;">
<li>沖縄県の人口
<ol>

@ABCD
  1. 沖縄県の人口

「表示3」は<margin>で
「表示5」は<padding>での

箇条書きにおける余白の取り方です。

表示の結果は同じに見えますね。

実際にはプラウザのIEとFirefox(Netscape)では
余白の取り方が違うと言われています。

IEは<margin>で、
Firefoxは<padding>で

余白(表示位置)を設定するというのが原則になっているようです。

両プラウザで検証してみましたが、表示に微妙な違いがあるだけで気にすることもないくらいです。

その両プラウザに対応するように
CSSでの設定の方法を次回、確認してみましょう。


以上
IEをメインにした(marginを中心に)
箇条書きの実例をみてきました。

IEでは箇条書きの位置指定は、<margin>タグを使用することから
<padding-left:0px;>
は省略して書かなくてもいいのではと思いますが、<margin>だけでは、思うように表示ができません。

<margin>で位置を指定して、<padding>の値が"0"でも記入しておきましょう。

CSSを利用するときに確認できます。


※HTMLやCSS、
wwwプラウザの種類を問わずに
同じタグで同じ表示が出来るように統一されることが望ましいですね。

「marginとpadding」



●マーカーの代わりに画像を表示。
●CSSを使った箇条書き。

を次回、確認します。




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

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



×

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