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
……人気ブログランキング……



この記事へのコメント
利爺さんはじめまして、情報蔵たつです( ´∀`)

この記事わかりやすくて良いですねぇ〜
ファビコンや画像ってただブログやサイトを運営してるだけでも欲しいな〜作りたいな〜って思いますからね( ´∀`)

わかりやすくて為になる記事感謝です^^
応援ポチ☆
Posted by アフィリで稼ぐ情報蔵@たつ at 2010年09月29日 16:25
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

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


※画像の中の文字を半角で入力してください。
※ブログオーナーが承認したコメントのみ表示されます。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/160328610
※ブログオーナーが承認したトラックバックのみ表示されます。

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

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