ワードプレスリストをマテリアルアイコンを使ってカスタマイズする方法

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

LuxeritasではLuxeritasu Theme 3.18.0からマテリアルアイコンがデフォルトになっていますので上のコードは不要です。

グーグルマテリアルフォント

/*リストアイコン*/
.list-1 { list-style: none; }
.list-1 li
      { position: relative;
        padding-left: 25px; }
.list-1 li:before
      { content: '\e834';
       	font-family: 'Material Icons';
        position: absolute;
        left: -5px;
        top: 3px;
        font-size: 1.5em;
       	line-height: 1 }

このコードをスタイルシートに貼り付けます。

ダッシュボード→Luxeritas→子テーマの編集→スタイルシート→コード貼り付け→保存

これで準備完了。

<ul class="list-1">
 	<li>ここにテキストを入力</li>
 	<li>ここにテキストを入力</li>
 	<li>ここにテキストを入力</li>
</ul>

カスタムHTMLに上のコードを貼り付けると

• ここにテキストを入力
• ここにテキストを入力
• ここにテキストを入力

こんな感じでできましたね。

先ほど作ったコードを手打ちしていたら面倒なので定型文登録します。

ダッシュボード→Luxeritas→パターン登録

HTML定型文→新規追加

ラベルに入力→コード貼り付け→保存

これでリストアイコン１が登録されましたので、実際に記事内での使い方を説明します。

ブロック→Luxeritas Blocks→定型文挿入エディター

定型文→リストアイコン

• ここにテキストを入力
• ここにテキストを入力
• ここにテキストを入力

これで簡単にリストアイコンを挿入することができました。

アイコンは自分好みのアイコンを選ぶ事が出来ます。

例えば

であればdone_outlineなのでコードポイントe92fに変えるだけです。

.list-1 li:before
      { content: '\e834';
       	font-family: 'Material Icons';
        position: absolute;

赤字の部分をe92fに変えれば反映されます。

push_pinなら赤字部分をf10dにすればok

これら以外にも沢山のアイコンがありますので自分のブログに合ったアイコンを選択してみてください。

又アイコンの色を変えたい場合はカラーコードを参考に変えます

カラーコード（原色大辞典）

.list-1 li:before
      { content: '\e834';
       	font-family: 'Material Icons';
        position: absolute;
　　　　color: #ff0000;

color: #ff0000;を追加し、赤字部分をカラーコードを参考に好みの色に変えてください。