Simplicityの「メニューボタン」と「トップへ戻るボタン」のアイコンを変更する方法

Simplicity201401004から、メニューボタンのアイコンと、トップへ戻るボタンのアイコンを変更できるようになりました。

今回は、その方法を紹介したいと思います。

ボタンはアイコンを変更する方法

Simplicityには、以下の2つのガイドボタンがあります。

モバイルや、レスポンシブ表示になった時に表示されるメニューボタン。

ページをしばらくスクロールしたら表示されるトップへ戻るボタン。

これらのアイコンは、Font Awesomeのアイコフォントを利用しています。

Simplicity201401004のバージョンアップにより、この2つのアイコンをテーマカスタマイザーから変更できるようになりました。

テーマカスタマイザーの設定部分

テーマカスタマイザーから変更を行うには、Wordpress管理画面から「外観→カスタマイズ→レイアウトの設定」を表示させます。

「レイアウトの設定」項目の中に以下のような設定部分があるので、ここから設定します。

設定の入力ボックスに「fa-list」などと書かれていますが、これがFont Awesomeのアイコンクラス名です。

ボタンのアイコンを変更するには、Font Awesomeからクラス名を取得して入力する必要があります。

Font Awesomeからクラス名を取得

Font Awesomeからクラス名を取得するには、Font Awesome Iconsに移動して一覧の中からクラス名を取得します。

Font Awesome Iconsには、以下のようにクラス名が表示されています。

好きなアイコンを選んでクラス名を取得します。

例えばハート形のアイコンだったらアイコンをクリックすれば、

個別ページが表示されるので、クラス名をコピーなどして取得します。

ボタンのアイコン設定

取得したクラス名を、先程のテーマカスタマイザーの設定項目に入力します。

「メニューボタンのアイコン」にハート型のクラス名を入力し、「トップへ戻るボタンのアイコン」に、デフォルトとは違った矢印の上アイコンを設定してみました。

設定変更後の表示

設定変更後は、このように表示されます。（「外観→カスタマイズ→色→ガイドボタン色」の設定から色も変更してあります。）

メニューボタンの表示

トップへ戻るボタンの表示。

まとめ

ちょっとしたワンポイントの変更を行なうことで、結構印象が変わって見えます。

Simplicityデフォルトのアイコンに飽きてきた場合などは、ファイル編集など必要なく、簡単にできるので、試しに変更してみてください。