いとをかし

みつけた「をかし」=「興味深い」モノを書き留める個人ブログ。自称・鉛筆彫刻家

Wordpress マテリアル

wordpressテーマ「マテリアル」で採用されてるアイコンフォントでカスタマイズ

2016/01/15

Ligature Symbols 2

当ブログでも採用している無料のwordpressテーマ「マテリアル」ではアイコンフォントの「Ligature Symbols」が採用されています。

見出しなどに付け加えるだけでも個性が出るため、始めてのカスタマイズにはもってこいです。

変更・使い方をご紹介します。

スポンサーリンク

どこで使われてるの?

マテリアルのカスタム無しの場合は、下記の場所で使われてましたね。

マテリアル アイコンフォント例

マテリアル アイコンフォント例

記事のカテゴリー欄と関連記事に見出しの「フォルダ」のアイコン

マテリアル アイコンフォント例

ページ右下にある「ホーム」「上へ戻る」のボタン

マテリアル アイコンフォント例

トップページのNew Postの前にある「スター」のアイコン

マテリアル アイコンフォント例

実はこのシェアボタンもアイコンフォントなんですよ。便利ですねぇ。

(反射的に上のシェアボタンを押したくなった人は手を上げて笑)

合字アイコンフォント「Ligature Symbols」を使ってみよう

アイコンフォントを入れたいところに下記のコードを入れると表示されます。

   <span class="lsf">該当のアイコン用テキスト</span>

該当のアイコン用テキストは公式サイトで紹介されてるテキストを入力してください。例えば「home」なら「home」になります。

元テーマで利用してるアイコンもテキスト部分だけ変えれば別のアイコンに変わるので、本採用前にどう反映されるかお試しください。

もちろん記事中でも使えるので、ワンポイントに使ってもいいですね。

※ただし、woredpressのテーマを変えると、自分でアイコンフォントを使えるように準備が必要になるからご注意を。

おまけ

classで挟むテキストによってアイコンが変わりますが、実は公式ページの一覧には無いアイコンフォントも存在しています。

興味ある方は「kudakurage」 と入力してみましょう。

かわいらしいクラゲのアイコンになります。styleやcssをいじれば下記みたくカラフルにもなる。

kudakuragekudakuragekudakuragekudakuragekudakuragekudakurage < ナカヨシ!

まとめ

この合字アイコンフォントは他のテーマでも導入できますが、その場合は元ファイルをサーバーにアップして読み込ませる必要があるため、難易度は少しあがります。

ただ、このマテリアルではclassで挟むだけなので、仕組みを完全に理解しなくても扱えるカスタマイズになってますね。手軽に個性が出せるので、ぜひお試しください。

利用できるアイコンの一覧は、こちらからどぅぞ。

「くらげさんいとをかし」

-Wordpress, マテリアル