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