リストマークに画像を使う
リストマークの設定は、＜ul＞タグに対して、スタイルシート（ＣＳＳ）のほうで、スタイルを設定しています。
その、リストマークを無くしたり、リストマークに画像を使う事も出来ます。
やり方は、＜ul＞か＜li＞タグに対して、スタイルシートでリストマーカーに画像を設定しますが、こちらの場合、文字列と画像との間の間隔の調整しか出来ません。
したがって、文字の大きさ（高さ）と使いたい画像の大きさ（高さ）に差があったりした場合の、縦方向の微調整に難がありますので、＜li＞タグに対して背景画像を設定する、というやり方の方が良いのでは？と思いますから、こちらの方法で説明したいと思います。
まあ、どちらにせよ、ＰＣやＯＳやブラウザやその設定によって、文字の見え方はまちまちですから、あまり神経質になっても無駄なのですが(^^;)
【リストに背景画像を設定するやりかた】
当ブログ配布のテンプレートの、プラグイン内のリストに対するスタイルの設定は、以下のブロックになります。
（スタイルシート（ＣＳＳ）内にあります。）
/* アーカイブなどのリスト化部分 */
.side_text_p ul ｛
list-style-type: square;
（省略）
｝
.side_text_p li ｛
（省略）
｝
【basic_3column】テンプレートの場合は、最初からリストマークが入っていますから、上記のブロックから下記の一行を削除しておきます。
list-style-type: square;
そして、 .side_text_p li ブロックの ｛ から ｝ までの間に以下の２行を追加します。
background: url(画像ＵＲＬ) no-repeat 0px 0px;
list-style-type: none;
すると、以下のようになります。
/* アーカイブなどのリスト化部分 */
.side_text_p ul ｛
（省略）
｝
.side_text_p li ｛
background: url(画像ＵＲＬ) no-repeat 0px 0px;
list-style-type: none;
（省略）
｝
ここまで出来たら、プレヴューしてみましょう。
文字と画像が重なってる等、いまひとつな表示(^^;)になっていると思います。
次は、文字と画像の間を調節してみましょう。
（ａ）画像と文字との高さをあわせるのには、 .side_text_p li ブロック内の以下の数値を調整します。
background: url(画像ＵＲＬ) no-repeat 0px 0px;
（ｂ）画像と文字との間隔を調節するのには、 .side_text_p li ブロック内の以下の数値を調整します。
padding: 0px 0px 0px 0px;
（ｃ）画像の始まりの位置が、普通のリストマークで表示させていた時と、微妙に変わってしまって気になる場合は、 .side_text_p ul ブロック内の数値を調整します。
.side_text_p ul ｛
（省略）
padding: 0px 0px 0px 14px;
｝
- Posted at:
- 2006年
- 02月
- 22日
- (水)
- 11:58
- TOP △
トラックバックＵＲＩ
Copyright © 2006 FC2blogの着せ替えブログ.
all rights reserved.
