番号なしulリストを記号・マーク・画像で装飾!CSS初心者が応用できるカスタマイズ説明あり

シェアする

番号なしulリスト前の『・』をCSSでカスタマイズして変更する3つの方法と、目次のプラグインTable of Contents PlusのリストマークをCSSで消すセレクタなどを紹介します。

  • 文字化けしないふつうの記号#や★、*などの記号を使う
  • WebFontを使う
  • アイコンの画像を使う
    • アイコン画像のサイズをCSSで指定する

HTMLに階層を付けたら、ulのliが入れ子になるので、リストの『・』のstyleが同じものが羅列します。せっかく階層をつけたので、リスト前の装飾をCSSで指定して変えたいところ。

はじめに下記CSSコードをコピペすれば、きれいに反映しますよ^^

LINKCSSで番号なしulリストマークのカスタマイズ!※子要素がズレる・はみ出す原因text-indentは入れちゃダメ

『HTMLのどこを装飾するか指定する』CSSの『セレクタ』から順番に見てみましょう^^

リストスタイルタイプの変更については、CSSのクイックリファレンスlist-style-type…マーカー文字の種類を指定するを参考になさってください。

リストの装飾・目次前リストマークけす・リストを記号・Webフォント・画像に!画像サイズの変更

スポンサーリンク

ulリスト前の点『・』基本的なCSSのセレクタ指定

ul li:beforeの装飾を変更した例

ul liを入れ子にしたとき、階層ごとにスタイルを変えたほうが項目の見栄えが良いので、見ていて分かりやすいです。

CSSでスタイルを触りだした頃、この指定方法が分からかったので、ulリストの基本的なセレクタの指定方法から書きますね。

  • ul li:before
    • ul li ul li:before
      • ul li ul li ul li:before

上記は、孫の孫まで反映させ、下記は直下の子だけ反映させる子セレクタ>を使った感じ。

  • ul > li:before
    • ul > li > ul > li:before
      • ul > li > ul > li > ul > li:before

これに#mainなど、テーマに合わせた親要素を前に書いて半角スペースをあけると、優先順位で反映しない…ということがありません。

例えばstinger系では.post ul > li:before.entry-content ul > li:before、Simplicityでは.entry-content ul > li:beforeのように記事内の親要素、クラスpostや.entry-contentを指定します。

このようにリストを入れ子にしたhtmlの書き方は下記をどうぞ^^

LINK箇条書きulとol!liタグを入れ子にする方法で、スッキリ見やすいブログへ♪

リストを入れ子にして、文章をスッキリ変身!

番号なしリストの『・』リストスタイルをCSSで消す

要らないulリストマーク

リストスタイル『・』を消さないとリストマークが無駄についてしまいます。本来のマークを消して装飾するので、リストスタイルをCSSで消してください。

上述どおり記事内の親要素を追加したら、記事内のみ番号なしリストulの装飾が可能です。

目次のプラグインTable of Contents PlusのリストマークをCSSで消す

目次のulリスト前のマークは要らない

目次のプラグインTable of Contents Plusも番号なしリストでできているので、リストマークと次にCSSで装飾するul li:before(番号なしリスト前)の装飾は必要ありません。

プラグインTOCの目次のみ、リスト前のマークを指定して消したいトコロですよね。そのCSSの書き方・指定のしかたは下記。

目次TOCにつけられたタグを指定し目次内のリストスタイルと、自分でカスタマイズした番号なしリスト前の装飾を消す記載です。

マージンは左から上右下左の外側の余白を、文字の大きさ1文字分をあらわす1emを使って余白を付けてますが、カスタマイズに合わせて調整してくださいね(emをpxに変更も可)。

リスト前にマークを付けたら、左にスペースが必要

リストマークを消したら、リストのビフォー(左側)にマークを装飾します。マークを入れる分のスペースが必要になりますよね。

スペースを入れなかったら、マークとリストの文字が重なるからです。

text-indent: 1.4em;で左へ移動すれば対応でき、見栄えもキレいです。が!

テキストインデントあり

テキストインデントなし

リスト前の装飾にはtext-indentを使わない!paddingやmarginを使う

このtext-indentを使うとリストを入れ子にした場合や、リスト内の子要素に入れたリスト、その中に画像を入れた場合、インデントが指定した分すべてズレて、子要素すべて修正が必要になるんです。

下記画像はリスト前にテキストインデントを指定した子要素がズレたものです。

リスト内の子要素が全てズレて、修正が面倒

paddingやmarginを使ったほうがいいです。テキストインデントが原因で、リスト内スタイルを修正する工程を書いたページに色々書いたので、気になるかたはどうぞ。

LINKCSS初心者へ❦スタイルの不具合ってどうやって直すの?その工程、見てみよぉ!

text-indentなど使わない、もっと良いカスタマイズ方法はあります!またの機会にページを作成しますね。

セレクタの指定と不要なリストスタイルの削除方法、使うと面倒なスタイルがわかったトコで、記号・Webフォント・画像を使ってulリストのstyle変更するCSSを見てみましょう。

CSSでリストul li前の点『・』を記号に変える

番号なしリスト前に記号を入れたい場合、リストを階層化(入れ子)にした場合のスタイルを変更する装飾例は下記です。

  • リスト階層1
    • 階層2
      • 階層3

このCSSのセレクタの前に、上述どおり.entry-contentなど、あなたのテーマにあった親要素を書いて半角スペースを開けてくださいね。

こちらのハート❦は環境依存なので、反映しない場合もありそうですが^^;

こんな方法もあるってことで♪またテーマや現状のカスタマイズによって、行間などの見栄えは変わります。

ul番号なしリストにWebFontを使うCSS

ul li:beforeの装飾を変更した例

ul li:beforeの装飾を変更した例

  • リスト階層1
    • 階層2
      • 階層3

Webフォントを使った装飾は、Font Awesomeのアイコンを使用する方法です。テーマによって導入している場合、前提としてCSSを簡単に紹介しますね。

右側の過去に使ったテーマ(Gush4)のスタイル

元の(親)テーマのスタイルを継承させる形で、簡略化してますがCSSは下記の通り。

ポイントは、下記

を入れたらOK!簡単に表示されます。

反映しない場合。テーマのコンテンツを囲っている親要素を前につけ、優先順位を高めると反映しますよ。

LINKWordPressでコンテンツ部分だけの親要素を作る!カスタマイズするとき本文以外、装飾を反映させない方法

content: “\f046”;の数字は、Font Awesomeのアイコンから好きなアイコンを例えばならそれをクリックした画面上(下記画像の英数字)のものです。

Font Awesomeの番号f14a

Font Awesomeの番号f14a

content: “\f14a”; “\ココに英数字“となります。テーマに導入済みなら手間が省けて楽ですね!

テーマにFont Awesomeを導入されてない場合、超簡単に導入できる方法をかいてるのでどうぞ。

LINKWordPressなどCMSでFont Awesomeアイコンフォントを超簡単に導入!タグ前にCSSで書く方法+追加された最新アイコンが表示しない原因と解決方法

リスト前の点『・』をアイコン画像に変更するCSS

画像を入れる場合のCSSは、画像のURLを指定したらリスト前にアイコンを表示させることができます。

リスト前に入れた画像リストに使用したアイコン

下記ページからアイコンをダウンロード後、アップして使ってます^^

LINK宝石・コイン・真珠・ラインストーン素材::フリー素材*ヒバナ * *

  • リスト階層1
    • 階層2
      • 階層3

画像のURLの指定は、WordPressでどうすれば良いか不明な場合は、下記ページの見出し1.1.2添付ファイルのURLを参考にどうぞ^^

LINKWordPress初心者に画像追加時のメディアを説明!画像サイズ変更・画像のURLはどこ!?キャプション・代替テキストは超大事だからチェックねっ

疑似要素:beforeの画像サイズをCSSで変更したい場合

元の画像のサイズを変更したい場合は、画像を背景にしてサイズ指定し、縦横比を保ったままサイズに収まるように指定します。

コレが元のアイコンの大きさで、下記リンク先からダウンロードしアップました。

アイコン:可愛いクローバー

LINKアイコン素材 – 葉っぱ素材 – フリー素材「blue-green」

この画像をリスト前に持ってきて、CSSで画像サイズを変更させたものが下記リスト。

  • リスト階層1
    • 階層2
      • 階層3

CSSコードの説明は上から順にザックリ下記のとおり。

  • contentの値””は、noneと同じ
  • background背景を画像にして、それをリピートさせない指定
  • リンク前の疑似要素をinline-blockで指定することで
  • リスト前画像とリストの項目とのズレを、marginで右側余白と上下の間隔を指定。

    外側余白でリスト前疑似要素の位置を微調整:右が調整後。

    • 数値は左から、上右下左の右回り
  • widthリスト前(画像)の横幅
  • heightリスト前(画像)の高さ(縦幅)
  • background-size背景サイズの指定方法contain

background-sizeプロパティは、背景画像のサイズを指定する際に使用します。

~ 中略 ~

contain
縦横比は保持して、背景領域に収まる最大サイズになるように背景画像を拡大縮小する

引用元background-size|CSS3リファレンス|HTMLクイックリファレンス

リスト前の大きさはwidth・heightで指定、その大きさに合うように背景サイズをcontainで指定し作ってます。

右側:背景サイズをcontainで幅いっぱいに変更

※heightをautoにしたらCSSが表示しなかったので、数値を入れました。

コレがざっくり。CSSで指定した装飾の説明です。あなたの使う画像サイズにあわせ調整して、カスタマイズにチャレンジください^^

以下おまけのメモ。

background-position: 0% 0%;画像の位置は、いつか試したい個人的なメモ。

  • ul { list-style-image: url(); }

リストを囲む領域全体(親要素)をリストボックスと言う。list-type-position: insideを指定したら、ボックスの左と同じ位置にマーカーが移動。デフォルトはoutsideでboxの外。

1つ項目が数行になったときマーカーの位置を変更して見やすくできる。

リストボックスは使ったことがないけど、何かしらの条件が必要かと思ってるので、いつか試すときのメモ。参考にして試した本は下記。

参考プロとして恥ずかしくない 新・CSSデザインの大原則

さいごに

CSS初心者がリスト前のマークを、思うがままカスタマイズできれば!と書きました。

例えば同じ画像を使えばコピペで対応できるけど、自分やサイト・ブログの色ってあるので、CSSを何度も目にしたことある初心者さんなら、これでカスタマイズは可能かと思われます!

ちなみにCSSが反映しないのは、テーマのコンテンツ部分を囲む親要素の指定をして優先順位を強くしたら反映します。目次でジャンプした人は目にしてないかも知れないので^^;

ほかキャッシュを切ったりすれば、たいてい反映されますよ。それでも反映しない場合は下記を参考にしてください。原因は以外とシンプルな事が多いですから。

LINKCSSが効かない原因!反映させるため、ブログ初心者さんが確認する7つのこと

少しづつカスタマイズをして、より見やすい・より個性豊かなブログにしてってくださいね!

かうたっくでした。

トップへ戻る