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




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


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

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

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


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

2011年02月22日

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

■ 5-33 画像・アイコンの表示位置の調整(2)

前回までに

●箇条書きのマーカーの種類と表示。
●独自の画像を項目の前にマーカーの役割として表示。
●画像の表示位置を調整。

の方法を確認してきました。

参照 
 
前頁で
画像を表示するためにclassを定義したのが、下記のCSSでしたね。

【参照CSS:画像をマーカーにするためのclassの定義】

.samp9 ul{
list-style:none;
margin-left:0px;
padding-left:0px;

background-image:url('url');
background-repeat:no-repeat;
background-position:left 15%;
margin:0px 0px 0px 36px;
padding:0px 0px 0px 24px;

}

⇒class名
⇒マーカーを表示しない
⇒デフォルトの位置をクリア
⇒画像と項目の空きクリア

⇒画像の呼び出し
⇒画像の繰り返し表示しない

⇒画像の表示位置

⇒左ヘリからの位置
⇒項目から画像への空き
⇒セレクタ閉め



上記のCSSの中で「赤文字」で記入している
marginとpadding
の役割にについては、まだ確認していませんね。

両プロパティの値を入れ変えながら見て行きましょう。

参照CSSの「class」の定義(青文字)では
list-style:none;
margin-left:0px;
padding-left:0px;
と定義して

●デフォルトで表示されるリストマーカーの非表示
●表示領域の左ヘリ(縁)からの位置
●項目と使用する画像の間の空き

をクリアしています。

このように、
デフォルトでの表示を全てクリアしていますので

リストマーカーの代わりに
使用する画像と箇条書きの項目を表示する位置(場所)を
新たにCSSに定義する必要があります。



画像のプロパティでは

@ background-image:url('url');
A background-repeat:no-repeat;
B background-position:left 15%;

@画像の呼び出し。
A表示の方法。
B位置。

を<background>で定義しています。

項目と仮想のリストマーカーとして使用する画像は
別個の存在ですので、新たに

項目の位置の定義が必要ですね。


項目の位置の定義には
<margin>
<padding>
のプロパティを使います。

【図1:marginとpadding】
bb.png
  ↑ 画像をクリック。元画像が開きます。

margin」は
記事表示領域、または指定された領域の上下左右の各ヘリからの位置の値を定義します。

左ヘリからの位置は

margin-left:●px;
または
margin:0px 0px 0px ●px;

どのプロパティの形式を使っても同じ意味になります。


padding
も位置を取るプロパティですね。

<margin>  = ヘリからの距離であるのに対して
<padding> = テキストの表示領域からヘリに対する距離になります。

このように<marin>と<padding>は
同じ位置を取るプロパティでも、その取り方と意味が異なります。

単位も、「px、pt」などの絶対サイズ、「em、%」のような相対サイズ
のどれを使用しても構いません。

箇条書きで
仮想のマーカーとして画像を使う時の<padding>の距離の対象は「画像」になります。

箇条書きの項目とその頭に表示する画像との距離は
余白・空きのことです。

参照 
● 図1: marginとpadding
● 図2:paddingの余白の取り方@
● 図3:paddingの余白の取り方A


値の「0px」は「余白無し」を意味しますね。

「余白無し」では
左端から余白を取らない位置、同じ位置に項目と画像は別々に表示されますが
同じ位置ですので重なった形になります。
  ↓
【表示例@】
@ABCDEF
  • 那覇市


例@がその見え方です。

画像と箇条書きの項目が重なって表示されますね。

    注1
   箇条書きと同時に表示している数字の@ABCDEFは
   位置を確認しやすいようにメージャーとして表示しています。

   このブログの基本書体は12pxですので、ヘリに触れている
   @の左端が0px、Aの左は12px、B24pxのように見てください。

    注2
   距離と余白の考え方は、行送りや行間の考え方と同じです。
   

■ 記事表示領域のヘリから余白を取る。

【CSS】
margin:0px 0px 0px 12px;
padding:0px 0px 0px 0px;
 ↓
【表示例A】
@ABCDEF
  • 那覇市


「例2」は
12px(1文字分)を開けて項目を表示した例です。

marginの値は
「0px 0px 0px 12px;

記事表示領域のヘリから右の方に「12px」の位置。
1文字分離れたその位置に「項目と画像」は表示されます。

margin は各ヘリからの距離になりますので、項目も画像も指定された距離だけ移動します。

padding の値を
「0px 0px 0px 0px;
としていますので「項目の表示位置」と「画像の表示位置」は同じ場所になり
重なった表示になります。


■ 項目と画像の間を空ける。

上記「例A」のpadding の値を調整します。

【CSS】
margin:0px 0px 0px 12px;
padding:0px 0px 0px 12px;
 ↓
【表示例B】
@ABCDEF
  • 那覇市



【図2:paddingの余白の取り方@】
zu01.png
  ↑ 画像をクリック。元画像が開きます。

paddingは項目(テキスト)の方から
上下左右のヘリに向かってスペースを取るプロパティでしたね。

この場合は、padding が取る左への余白は
項目の前に画像を用いますので、距離を取る対象は画像になります。

つまり
「項目と画像の間を空ける」と同じ意味です。

padding:0px 0px 0px 12px;
は項目の左の12pxの位置に画像を表示する領域が空きます。
1文字分のスペースが有りますので、重なることなく表示されます。

表示例Bの形では画像と項目の間に隙間がないので
マーカーの位置としては見た目も窮屈ですね。



■ 項目と画像の間に1文字分の余白を作る。

【CSS】
margin:0px 0px 0px 12px;
padding:0px 0px 0px 24px;
 ↓
【表示例C】
@ABCDEF
  • 那覇市



【図3:paddingの余白の取り方A】
zu02.png
  ↑ 画像をクリック。元画像が開きます。

画像の大きさ(12px) + 使用文字1字分(12px)= 24px
の余白を取り、その後に項目を表示する形です。

「図3」の例のように、項目から24pxの余白と言うことは

● 24px の全てを余白が占めるのではなく

24pxの余白の内

●頭の 12px の部分には画像。
●画像の後ろに1字分(12px)の余白を作り。

その後に項目を表示するので、実質「 24px 」になります。

@ margin:0px 0px 0px 12px; =
記事表示領域の左のへりから12pxの位置を指定。

A padding:0px 0px 0px 24px; =
項目の前に12pxの画像表示部分をつくり
さらに12px(1文字分)を空け、その後ろに箇条書き項目を表示します。

marginとpaddingの組み合わせを、十分に理解しましょう。


項目と画像の間に1文字分の余白を空けましたが
ブログでの文字や余白の大きさには、個人的な好みがあります。

余白は、半角(6px)くらいの小さい方が締りがあってスッキリする。
あるいは、もっと余白を空けたいという方は
paddingの左サイズの指定数値を変更しましょう。

余白サイズを半角小さく
画像(+)半角字分の余白(6px)= 18px のサイズ
padding:0px 0px 0px 18px;

大きく広げるときは、同じように数値を大きく調整します。

    注)
   余白サイズは「1px」単位で調整出来ます。

   行並びや文字の間隔を考え、使用文字の全角・半角を基準とした
   サイズで使用した方が見た目がスッキリします。


【表示例D】
@ABCDEF
  • 那覇市


「表示例C」に比べて、画像と項目の間の余白が半分になりましたね。


■ ヘリからデフォルトに近い位置を決め、項目と画像を表示。

<margin><padding>
の表示の形式が分かりやすいように、箇条書きの階層構造形で確認します。

【CSS】
親項目「那覇市」
margin:0px 0px 0px 36px;
padding:0px 0px 0px 18px;

子項目「人口」
margin:0px 0px 0px 12px;
padding:0px 0px 0px 18px;

  ※階層構造の箇条書きの各classの適用、画像位置の修正は
   前頁で確認しています。

【表示例E】
@ABCDEF
  • 那覇市
    • 人口約318,000人、約135,500世帯



親項目
margin:0px 0px 0px 36px;
padding:0px 0px 0px 18px;

親項目の「那覇市」は
●記事表示領域の左ヘリからmarginで36px(3文字)寄った位置に画像を表示しています。
●その画像と項目の間の空きは padding で「全角+半角=1.5(18px)」を取っています。
●その後ろに項目を表示しています。

子項目
@ margin:0px 0px 0px 12px;
A padding:0px 0px 0px 18px;

親項目に内包(入り子)されている子項目が
@のmargin: ・ ・ ・ 12px で取る対象としているヘリは

「親」が取った「記事表示領域の左端のヘリ」からではなく
「親」の箇条書き項目の領域(この例の薄紅色バックカラーの範囲)の左側を対象とするヘリになります。

そのヘリから「margin:12px」で指定した1文字分の箇所が画像の表示位置。
子項目(人口)は padding:18px(画像表示分12px + 余白6px)のスペースを取って項目の表示にしています。

この表示形式の方がデフォルトでの表示位置に近いいちです。

また
子項目にCSSの「class」定義を適用しなければ
子項目の位置は親項目で定義した値が継承され適用されます。

●画像表示位置についての注意点と
●階層構造の箇条書きについては


前頁の記事で確認していますので、チェックしておきましょう。

参照 

marginとpaddingはブログで画像や文章
あるいは段落、テーブルの作成などで頻繁に使うプロパティで
結構、重宝します。

上手く使うことによって
箇条書きでも思い通りの位置に画像や項目を配置出来るプロパティです。

ブログのレイアウトをきっちりと纏めたり
アフィリエイト用の説明箇条書きを目立たせたい
など、使い方は数多くあります。

使い方をしっかり把握しましょう。

………

記事上段の参照CSS
【画像をポイントにするためのclassの定義】には

画像の表示位置を決めるプロパティとして

background-position:
margin:
padding:

の3種類を使っています。

marginn padding
で位置決めをしているのだから
background-position:
は定義する必要はないのでは

と思えますね。

marginは
画像だけに作用するのではなく「画像と項目を含めた範囲」
つまり「行」の位置決めになります。

例えば
margin:10px 0px 0px 0px;
のようにtopから10pxとして適用した時には「画像と項目を含む行」が
前の行の行送りに10pxを足した位置に移動します。

このブログの例は、行送りは18pxですので
margin:10px 0px 0px 0px; は

18+10=28px
で、直前の行(上の行)から 28px の 
位置が、画像と項目を表示する行の位置になります。

marginを上、あるいは下に適用する時には、それらのことを考えて
注意して使いましょう。


margin padding backgroundのプロパティを
重複して適用しているように見えますが

各々の役割があり、画像だけの「上下左右」の表示位置を決めるためには
background-position:プロパティが必要になります。

………

箇条書きの「項目」や「画像」の表示位置の調整は、
marginやpaddingの使い方を把握しておけば、比較的に簡単に出来ますので
レイアウトをしっかりと纏めたいときに応用して使い切りましょう。

シリーズでは
「箇条書きの基本(CSSの定義1)から(定義4)」の確認で
classへの定義とHTMLでの適用の例をいくつか挙げています。

使用例に伴う「class」を各確認の毎に作成して適用しました。

「class」を数多く作りましたので、CSSの記述が乱れています。

整理と纏めが必要です。

整理と纏めは「CSS」のシリーズで確認します。




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

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



2011年01月29日

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

■ 5-32 画像・アイコンの表示位置の調整(1)

箇条書きは
デフォルト(初期)値では自動的に「● ○ ■」のマーカーが項目の前に表示されます。

デフォルトでのリストマーカーが表示される位置は決まっています。

CSSに<class>や<id>属性を定義して、
使用するリストマーカーを画像やアイコンに変更した場合でも、表示される位置は変わりません。


具体的に
「デフォルトで表示されるリストマーカーの位置」
「リストマーカーと項目とはどのような関係にあるか」
確認してみます。


@ 項目とリストマーカーをデフォルト値で表示。

互いの位置関係を、視覚的に捉えられるように
項目の背景<background>に色を付けて、領域の範囲を調べて見ます。

【HTML】
<ul>
<li style="background-color:#FFE4E1;">沖縄県那覇市
</ul>

【表示@】
  • 沖縄県那覇市


ページや文章、あるいは文字の背景に画像を使用したり、色を付けるには
background-colorプロパティを使います。
  
CSSとHTMLの関係は過去記事で度々確認しています。

    注)
   ●background-colorはCSSプロパティです。
 
   ●例文のように、HTMLの構文にCSSプロパティとHTMLの
    タグが混在することは構造的には間違った使い方と言えます。

   ●混在して使用しても表示上はエラーにはなりませんが、
    HTMLとCSSの概念からしても、両者の意義は異なりますので
    意識して使い分け、両方の構造体系とその立場を把握していくように
    しましょう。

   ●この章ではHTMLを確認しつつ、CSSの流れを掴むために
    タグとプロパティの使い分けをしていません。

   ●HTMLとCSSの関係を確認する段階で
    互いの住み分けをして行きます。
         

項目の背景に「薄い紅色」が付きましたね。

その色の付いた範囲が「項目」の領域です。

箇条書きのデフォルト値での
リストマーカーの位置は項目の領域の外側になります。


リストマーカーの表示位置を定義するには
<list-style-position:>プロパティを使います。

<list-style-position:>は
outside;
inside;
inherit;

= 項目の外側
= 項目と同じ領域内
= 定義の継承
  (この章ではinherit;の解説は省略します)


の値を取ります。

外側への表示はデフォルト値が<outside>になっていますので、
CSSに新たに定義する必要はありません。

上記の例【表示@】のような表示からみても
「リストマーカー」と「項目」は別々に存在することが分かりますね。

別々の存在であることで、リストマーカーの形状を変更したり、
数字や英文字、画像やアイコンに差し替えて表示することが出来ると言えます。


A リストマーカーを「項目と同じ領域内」に表示。

項目と同じ領域内に表示するプロパティの値は「inside」ですね。

【HTML】
<div style="list-style-position:inside";>
<ul>
<li style="background-color:#FFE4E1;">沖縄県那覇市
</ul>
</div>

【表示A】
  • 沖縄県那覇市

表示例@とAの違いはハッキリしていますね。

@ ではマーカーの位置は「項目の外側」
A は「項目と同じ領域内」になっています。

デフォルトの<outside>と<inside>の両方を並べて
表示パターンを確認してみます。

【リストマーカーの表示位置比較】
  • 那覇市(outside) = マーカーは外側
  • 那覇市(inside) = マーカーは内側

<outside>と<inside>では
項目を表示する領域の範囲(色ついたバック)は同じ範囲を取っていますが
リストマーカーの位置は移動しています。

過去記事の「箇条書きの基本」でも確認したように
項目の表示位置を動かすとリストマーカーの位置も動きますね。

参照 


■ 画像リストマーカーの表示位置。

リストマーカーを画像やアイコンに差し替えて表示した時
項目の文字のベースラインより、画像やアイコンのベースラインが
少し中央寄りに表示される現象が見られます。

とくに、プラウザのIE(Internet Explorer)を使用している方は
その微妙なズレを経験していると思います。

【画像@】=プラウザのIEでの見え方
hyo01.jpg
項目の文字のベースラインの位置より、アイコンで表示した
リストマーカーのラインは少し上付きになって揃っていませんね。

  ※Firefoxではラインが揃って表示されます。

使用している「三角形」「ひし形」のアイコンは
ズレを計算して文字より小さいサイズで作りあげています。

それでもアイコンの上部は文字のトップラインより上に出ています。

この様な表示上のほんの僅かなズレは

ウェブデザインを本格的に学んでいる訳でもないので、
それほど気にする問題でもないことですが、なかには

 ●どのプラウザでも決まった位置に表示にしたい。
 ●マーカーと項目のベースラインをしっかりと揃えたい。
 ●ブログのデザインを綺麗に仕上げたい。

と言う考えも有ります。

プロパティの
<list-style-position:>は
リストマーカーを表示する位置を
「外側に」「内側に」の値を指定するだけです。

左右への位置の移動は出来ますが、上下には無理があります。

---

■ 項目のマーカーの代わりに「独自の画像やアイコン」を表示する。

マーカーを自由に動かせないのは「箇条書きの一部」であるための制約です。

箇条書きのマーカーとして、別の画像やアイコンを使用して表示すると言うことは
マーカーが表示される位置に、その画像やアイコンと差し替えて表示するという意味ですね。

画像やアイコンは独立しているので、CSSでの定義やHTMLのタグ指定で、思いどおりの場所に自由に表示すればいいことです。

●マーカーを表示しないようにする。
●独自の画像やアイコンを、指定する箇所(マーカーの位置)に表示する。

の考え方になります。

マーカーの表示をしないで
独自の「画像やアイコン」を、その位置に呼び出して表示したら

表示上の見た目は
箇条書きのリストマーカーを表示したのと同じ形になりますね。

独立した画像の表示ですので
上下左右の位置調整は比較的簡単に出来ます。


CSSに定義するプロパティは
【プロパティと

●list-style:none;
  デフォルトで表示されるマーカーを表示しないようにする。
  (その位置に画像を表示するので二重表示にならないように)

●background-image:url( url );
  項目の頭に表示するための画像を呼び出す。

  項目のリストマーカーの代わりに
  画像をポイントとして使用するので、箇条書きの
  <list-style-image:>プロパティの適用ではなく
  画像を呼び出す
  <background-image:>プロパティ。

●background-repeat:no-repeat;
  背景画像の表示の繰り返しを禁止。
  値は「no-repeat;」または「none;」
  このプロパティと値を適用しないと、同じ画像が繰り返して
  表示される。

  逆に画像を繰り返し表示させるには
  background-repeat:repeat-repeat;
  
●background-position:* *;
  画像の表示位置の指定
  値は
  left right center top bottom %(比率) px(サイズ)
  などがある。

  background-position:@left Atop;
  「領域」の @左 A上の位置がデフォルト値。

●padding
  項目と画像との間の空きの指定(項目側から空ける)
●margin
  画像位置の指定(テキスト領域のへりから)

  参照 ⇒ marginとpadding・その応用(1)〜(3)
        応用(1)  応用(2)  応用(3)


上記のIEでは、リストマーカの位置がズレていましたね。

リストマーカーの代わりにポイントとして用いる画像を
表示するCSSを確認してみましょう。


セレクタの仮のclass名を「samp9 ul」とします。

【画像をポイントにするためのclassの定義】
【class定義@:親項目】

.samp9 ul{
list-style:none;
margin-left:0px;
padding-left:0px;

font-size:12px;
color:#0000ff;
background-image:url('url');
background-repeat:no-repeat;
background-position:left 15%;
margin:0px 0px 0px 24px;
padding:0px 0px 0px 24px;
}

⇒class名
⇒マーカーを表示しない
⇒デフォルトの位置をクリア
⇒画像と項目の空きクリア
⇒文字の大きさ
⇒文字の色
⇒画像の呼び出し
⇒画像の繰り返し表示しない

⇒画像の表示位置

⇒左ヘリからの位置
⇒項目から画像への空き
⇒セレクタ閉め


同時に箇条書きにする第二階層の子項目の定義
class名は「samp10 ul」とします。

【class定義A:子項目】

.samp10 ul{
list-style:none;
margin-left:0px;
padding-left:0px;
color:#990000;
background-image:url('url');
background-repeat:no-repeat;
background-position:left center;
margin:0px 0px 0px 24px;
padding:0px 0px 0px 24px;
}


画像例の
IEでの見え方のリストマーカーの表示ズレを修正するため

【class定義@:親項目】【class定義A:子項目】

でclass定義をしてリストマーカーの代わりに
画像を使用したのが、下記の表示例です。

【表示例】
  • 那覇市
    • 人口約318,000人、約135,500世帯


親項目の「那覇市」、子項目の「人口」の前に表示されている「三角」「ひし型」のアイコンが、ポイントとして使用したマークで、仮想のリストマーカーになります。

見た目は、リストマーカーそのものですね。

親項目の表示領域に薄紅色、子項目には薄青色を付けてみると
薄紅色の親項目の領域は、子項目の領域にまたがって色が乗っています。

子項目は
親項目の「那覇市」の領域に内包されていることが分かりますね。

箇条書き構造は
その下の層(孫項目)次の層を組み立てても親の領域内ということです。

このことは重要な要素の一つで、プロパティとして定義する
background-position:left center;
の値を「center」と定義した時

その位置は
親と子、あるいは孫も含めた親の領域内の上下の中央(center)
と言う意味になりますので
「▲」画像のベースラインは、子や孫まで含めた広い親の領域の中央に来ます。

「center」指定では、リストマーカーの代わりとしては
歪な位置へ表示されますね。

親、子、孫のような階層構造では
画像を置く位置に気を付ける必要があります。


表示例では画像位置の値を「%」にして
background-position:left 15%;
の形式で親項目のトップラインから、15%下げた位置に指定しています。

 ※「%」は領域の広さに対する相対値です。
  この例では、領域は子項目の範囲まで入ります。

  絶対値の「px」を使って細かい指示をしてもいいでしょう。

親項目、子項目で成り立っている
階層構造における適用例を示しましたが

親だけの項目(ここでは那覇市の項目)
の単独での箇条書きでは、項目領域は親だけの範囲になりますので、

画像位置の値を「無指定」にするか、または値を
background-position:left center;
の形式で領域の中央に指定します。

【表示例】
  • 那覇市


アイコンが上下の中央に位置していますね。

アイコンが文字より大きい、あるいは極端に小さいサイズを使用している時には上下位置を計算して表示します。

このように
単独の項目と多層の時の「値」の使い方には気を付けましょう。

backgroundには
image の他に
color  position  repeat  attachment(スクロール指定)
の値があります。

ある領域内
たとえばブログの記事領域、テーブルのセルの中、ページを分けるフレームなどに画像を表示する時、 paddingやmarginn と共に頻繁に使用されます。

アフィリエイトなどで、商品画像を貼り込む位置を決めるなど
便利なプロパティです。


---
リストマーカーの代わりに
独自の画像をポイントとして使用するために
CSSのclassを定義し、表示方法と位置の指定を確認しました。



次回は
今回の「箇条書きでの画像使用」の補遺で
「marginとpadding」を確認します。



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

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



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



×

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