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




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


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

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

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


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

2010年11月15日

箇条書きの基本(CSSの定義2)

■ 5-31 CSSで箇条書きのマーカーを画像に変更。

ブログや文章を書くときの[箇条書き]のメリットは

●要点が一目でわかる。
●文章を要約して相手に伝えることができる。
●内容を重要度順に表示できる。

などが上げられますね。

箇条書きは
記事の内容を整理することや伝えたい内容を明確にすること
において有効な手法です。

前回の「箇条書きの基本(CSSの定義1)」では

●使用するリストマーカーの変更
●多層構造の箇条書きのHTMLタグ
●各層へのCSSのセレクタの適用

を確認しました。


参照してCSSの「class」や「id」定義
HTMLでCSSを適用する方法を覚えましょう。

箇条書きを再度確認します。

【デフォルトでの階層の構造とリストマーカーの表示】
【HTML】
<ul>
<li>
那覇市   ← 第一層(親)
 <ul>
  <li>
人口約312,000人、約122,000世帯 ← 第二層(子)
 </ul>
</ul>
【表示】
  • 那覇市
    • 人口約312,000人、約122,000世帯


デフォルトでの階層のリストマーカーは上記の表示例のように
第一層は黒丸(●)第二層では白丸(○)が自動的に表示されますね。

前回はCSSに
第一層、第二層にそれぞれプロパティの値の異なったclassを
「samp ul」「samp2 ul」として定義をして適用した例を確認しました。

classを適用して表示したのが下記の例ですね。

【表示】
  • 那覇市
    • 人口約312,000人、約122,000世帯

デフォルトと異なっている点は

親の項目のリストマーカーが「」文字色は、大きさは少し大きい13px。
子は「○」の替わりに「」文字は一回り小さい11pxで色は「薄茶」に替わっています。

おもに記事や日記類を中心に展開している一般的なブログでは
箇条書きのリストマーカーはデフォルトで表示される「 ● ○ ■ 」の範囲で十分に対応できますが、

アフィリエイトのためのブログでは

 ● 力を入れている商品の項目を他の商品より目立たせたい。
 ● 訪問した方に注意を喚起し目を止めさせ、クリック率を高めたい。
 ● 独自のリストマーカーを使うことで項目を見やすくして、ビジュアル的に
  も親しみのもてるブログにしたい。

などの視点からみても
箇条書きのリストマーカーを自分なりに修正したり、アイコンに置き換えたり
することはブログ構成上の重要な要素のひとつだと言えます。

ブログには
人それぞれのいろいろな思い入れや、その人なりのページ構成の考え方
があります。

その思いや考えを反映したブログを構築することが、理想的なページ
表現となり、集客率の高いブログに仕上がっていくと思っています。

参照 
箇条書き・マーカーに画像を使用
●リストマーカーを画像(アイコン)に差し替える例
http://tosiji-dreamafi.seesaa.net/article/160328610.html



■ 独自のアイコンを使用するため「class」を定義。


リストマーカーに画像やアイコンを使用。

箇条書きの項目のリストマーカーに、
画像やアイコンを指定するCSSセレクタの「プロパティ」と「値」は
list-style-image:url(url);
ですね。

例題に使用するclass名を「.samp3 ul」としておきます。

「箇条書きCSS:class定義B」

.samp3 ul{
font-size:12px;
color:#0000ff;
list-style-image:url(url);
}


⇒ class名
⇒ 文字(12px)
⇒ 文字の色(青)
⇒ アイコンの呼び出し(注)
⇒ セレクタの閉め


   注)  
  list-style-image:url(url);
  の赤文字で表示してあるurlは、ブログサービスでアイコンを保存してい
  る場所のアドレスになりますね。

  このブログでの、アイコン「 」を保存した場所(アドレス)は

  list-style-image:url (http://tosiji-
  dreamafi.up.seesaa.net/
image/画像ファイル名);

  のurlとなります。

  各自が利用しているブログサービスの画像の保存や利用方法、
  保存場所を確認してから記入しましょう
  

追加したclass「.samp3 ul」をCSSに保存して適用します。

class を適用するためのHTMLは

<div class="samp3 ul">
 <ul><li>〜</ul>
</div>

の形式ですね。

【HTML】
<div class="samp3 ul">
 <ul>
   <li>那覇市
 </ul>

【表示】
  • 那覇市

CSSのclass「.samp3 ul」が適用され、
リストマーカーとして独自のアイコン(シアン色の三画形)が表示されました。


■ 親項目にプロパティを適用したとき、子項目の状態を確認。

親項目に適用したCSSプロパティは、子項目に別のclassの適用がなければ、そのまま親項目のclassが適用され、文字の大きさや色、リストマーカーの形状も同じ「値」を取ります。

下記がその表示例です。

【HTML】
<div class="samp3 ul">  ← class定義Bを参照
<ul>
<li>那覇市
  <ul>
  <li>人口約318,000人、約135,500世帯
  </ul>
</ul>
</div>
【表示】
  • 那覇市
    • 人口約312,000人、約120,000世帯

子項目にも親項目のclassが適用され
同じリストマーカー、文字、文字色で表示されますね。

この例から、親と子の関係は、
<div class="samp3 ul"> 〜 </div>の適用範囲内にあることが分かりますね。

逆に項目にリストマーカーやアイコンを表示したくないときは、
classのプロパティとその値を

list-style-type:none;
list-style-image:none;

の形式にします。

リストマーカーの表示されない項目になります。


■ 子項目のマーカーを親とは異なるアイコンで表示。

親と異なる画像を表示するには
CSSに新しいclassと使用する画像(アイコン)が必要ですね。


CSSの子項目用のセレクタ「class」を作成します。
class名を「samp4 ul]とします。

「箇条書きCSS:class定義C」

.samp4 ul{
color:#990000;
list-style-image:url(url);
}


⇒ class名
⇒ 文字色(薄茶)
⇒ アイコンの呼び出し
⇒ セレクタの閉め

 ※親項目と同じ大きさの文字、文字色を使用するときは、
  同じプロパティを記入する必要はありません。
  この例では、文字色を「薄茶」に指定しています。

保存して適用ですね。

CSSのclass
「samp3 ul」と「samp4 ul」を同時に記事に適用してみましょう。

【HTML】
<div class="samp3 ul> ← 第一層(親)にCSSを適用
<ul>
 <li>
那覇市    
   <div class="samp4 ul> ← 第二層(子)にCSSを適用
    <ul>
     <li>
人口約312,000人、約122,000世帯
    </ul>
   </div>

</ul>
</div>


【表示】
  • 那覇市
    • 人口約312,000人、約122,000世帯


子項目のマーカー「」のピンクの菱形は、新しく作成して、ブログにアップロードしています。

過去記事でも確認したように、画像はある程度大きく作成して、小さく表示するのが望ましい使い方です。

第一層の親に「   」第二層の子には「  」
異なる独自のアイコンをリストマーカーとして表示できました。

画像やアイコンを使用するとき

@画像やアイコンを作成する。
A利用しているブログサービスにアップロード、保存をする。
BCSSにclassを定義する。
CHTML構文にclassを適用するタグを書き込み、画像やアイコンを
 呼び出す。
D表示

の流れになります。

何度か使っているうちに
HTMLとCSSの関係が理解できるようになります。


次回は

●リストマーカーの表示位置の調整。
●リストマーカーの代わりに画像やアイコンを使う。

を確認してみます。



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

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



この記事へのコメント
利爺さん こんにちわ♪
光です^^

ブログへの訪問&コメント
ありがとうございます^^

箇条書きを使うと
伝えたいことが 伝わりやすいですよね。

HTMLとCSSが少しでも理解できれば
リストマークも 自由自在ですね♪

応援です☆光
Posted by 光☆アフィリエイトで幸せ新生活 at 2011年02月10日 16:00
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

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


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

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

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