箇条書きのマークをアイコンにしたいこともあります。次のようなイメージです。

箇条書きのマークをアイコンにしたい

箇条書きのマークをアイコンにしたい

このような箇条書きを作成する場合、画像を準備して背景画像に設定する方法もありますが、少し面倒かもしれません。ここでは手軽にShortcodes Ultimateプラグインを使ってアイコン付きの箇条書きを作る方法を紹介します。

スポンサーリンク

アイコンを使った箇条書きの作成

「プラグイン」‐「新規追加」メニューからShortcodes Ultimateプラグインをインストール、有効化します。

Shortcodes Ultimateプラグインのインストール

Shortcodes Ultimateプラグインのインストール

投稿または固定ページの編集画面で「ショートコードの挿入」ボタンをクリックします。

「ショートコードを挿入」をクリック

「ショートコードを挿入」をクリック

箇条書きを作るため「リスト」をクリックします。

「リスト」をクリック

「リスト」をクリック

アイコンを選ぶため「アイコンピッカー」をクリックします。

「アイコンピッカー」をクリック

「アイコンピッカー」をクリック

使いたいアイコンを選択します。

使うアイコンを選択

使うアイコンを選択

設定画面に戻ると、使うアイコンのコードが入力されます。

使うアイコンのコードが設定される

使うアイコンのコードが設定される

アイコンの色を選ぶこともできます。

アイコンの色を選択

アイコンの色を選択

画面を下にスクロールして、liタグの内側に箇条書き項目を入力(1)します。「ショートコードを挿入」ボタン(2)をクリックすると設定完了です。

箇条書きを入力してショートコードを挿入

箇条書きを作成してショートコードを挿入

ショートコードで囲まれた箇条書きが編集画面に追加されます。

箇条書きが追加される

箇条書きが追加される

ページを表示すると、選んだアイコンが箇条書きに設定されます。

アイコン付の箇条書きが表示される

アイコン付の箇条書きが表示される

既存の箇条書きのマークをアイコンに変更する

すでに作成済みの箇条書きのマークをアイコンに変更したい場合は、上記の手順で作成したショートコードで既存の箇条書きを囲めば大丈夫です。

たとえば、Shortcodes Ultimateプラグインの「リスト」で次のようなショートコードを作成します。

サンプルのショートコードを作成

サンプルのショートコードを作成

この赤い下線部分がアイコン付き箇条書きのショートコードなので、作成済みの箇条書きを囲めばアイコン付きのショートコードに加工できるでしょう。

作成済みの箇条書きをショートコードで囲む

作成済みの箇条書きをショートコードで囲む

これで作成済みの箇条書きがアイコン付きになります。

作成済みの箇条書きがアイコン付きに

作成済みの箇条書きがアイコン付きに

サイト全体の箇条書きにアイコンを設定する

サイト全体の箇条書きに同じアイコンを付けたい場合、全ページを開いてショートコードで囲む作業は非常に面倒です。その場合、CSSを使ってサイト全体の箇条書きに同じアイコンを設定する方法があります。

それには、次のサイトから使いたいアイコンを選びます。

Font Awesome Icons

ここでは矢印を選びました。

使うアイコンを選択

使うアイコンを選択

クリックして開いたページからUnicodeをコピーします。

Unicodeをコピー

Unicodeをコピー

WordPressに戻って子テーマのstyle.cssなどに次のCSSを入力します。ポイントは7行目です。上記のステップでコピーしたUnicodeに半角の「¥」(スラッシュの逆に見える場合があります)を付けて入力します。たとえば、コピーしたUnicodeが「f18e」なら「content: '\f18e';」のようになります。

/* 箇条書きのアイコン設定 */
#content li {
    list-style-type: none;
}

#content li:before {
    content: '\f18e';
    font-family: 'FontAwesome';
    margin-right: 10px;
    color: red;
}
このCSSはBizVektorの例です。テーマによってはCSSセレクタの修正が必要な場合があります。

これでサイト全体の箇条書きにアイコンが付加されます。箇条書きを使っているページを開いてショートコードで囲む必要はありません。

サイト全体の箇条書きにアイコンが付く

サイト全体の箇条書きにアイコンが付く

この記事をSNSで共有する
困ったときに役立つCSSの辞書です
HTML5 & CSS3ポケットリファレンス [改訂新版] (POCKET REFERENCE)

HTML5 & CSS3ポケットリファレンス [改訂新版] (POCKET REFERENCE)

森 史憲, 藤本 壱
1,814円(09/21 21:20時点)
発売日: 2018/03/02
Amazonの情報を掲載しています
WordPressでお困りのときはご相談を
この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
こんなときはご相談を
  • WordPressの使い方(ページやメニューの作り方を教えてほしい)
  • カスタマイズ(機能の追加やデザイン調整をお願いしたい)
  • トラブル対応(画面真っ白・「ログインできない」を解決したい)
マンツーマンなので相談内容は自由です。いただいた課題をその場で解決、CSSやPHPも目の前で修正します。気軽にご相談ください。
お急ぎの方はWordPressメールサポートもご利用ください。
wordpress講座受講予約
WordPress講座の問い合わせ先

関連記事

スポンサーリンク