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には、以下のようにクラス名が表示されています。

Font Awesomeのアイコン一覧

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

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

ハートアイコンフォント

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

fa-heart- Font Awesome Icons

ボタンのアイコン設定

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

ガイドボタンの設定変更後

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

設定変更後の表示

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

メニューボタンの表示

メニューアイコンのカスタマイズ

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

トップへ戻るアイコンフォントカスタマイザーとの表示例

まとめ

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

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

スポンサーリンク
アドセンス(大)
アドセンス(大)

スポンサーリンク
アドセンス(大)

コメント

  1. aki より:

    Font Awesomeのアイコンではなく、テキストに変更したい場合はどうすればよいのでしょうか?

  2. わいひら わいひら より:

    button-go-to-top.phpテンプレートを直接カスタマイズしてください。

  3. 澁谷 翔太 より:

    メニューアイコンを消したいのですが、どのようにしたら消えるのでしょうか?

    また、モバイル表示の際ヘッダー画像とメニューの間に400pxの空間が出来てしまいますが埋めるにはどうしたら良いでしょうか?

  4. わいひら わいひら より:

    ちょっと、短い文章だと、どのようにしたいかがわからないので、サイトのスクリーンショットなどを撮影して、注釈を入れて説明していただけると助かります。
    アップローダーなどは、以下に書かれているものをご利用ください。
    説明画像用のアップローダーツール