無料のWordPressテーマ『Cocoon(コクーン)』では、スマホで固定フッターメニューが表示されるのが魅力ですよね。
でも、ここの文字やアイコンを自分好みにカスタマイズしたい……！！って思ったので、色々いじってみました。
この記事ではCocoon(コクーン)の固定フッターメニューの文字やアイコンを変更するカスタマイズをご紹介します。
ぜひ参考にして、イメージ通りのブログをつくってみてください！
Cocoon(コクーン)で固定メニューをカスタマイズする
デフォルトでは上のような固定メニューですが、カスタマイズをすることで下のようなメニューが作れます。
Cocoon(コクーン)で固定メニューの文字をカスタマイズする方法
mobile-menu-buttons.php内の下記の部分をお好きな文字に変更すればOKです。
- 'メニュー'
- 'ホーム'
- '検索'
- 'トップ'
- 'サイドバー'
今後アップデートで消えないようにするために、子テーマに複製してカスタマイズする方法をおすすめします。
- 子テーマに「tmp」というファイルを作成
- 中に「mobile-menu-buttons.php」を作成
- 元のコードをコピペし複製完了
Cocoon(コクーン)で固定メニューのアイコンをカスタマイズする方法
アイコンはCSSを変更することでカスタマイズできます。
/*「メニュー」アイコン変更*/
.navi-menu-icon::before {
content: '\好きなアイコン番号';
}
/*「ホーム」アイコン変更*/
.home-menu-icon::before {
content: '\好きなアイコン番号';
}
/*「検索」アイコン変更*/
.search-menu-icon::before {
content: '\好きなアイコン番号';
}
/*「トップ」アイコン変更*/
.top-menu-icon::before {
content: '\好きなアイコン番号';
}
/*「サイドバー」アイコン変更*/
.sidebar-menu-icon::before {
content: '\好きなアイコン番号';
}
アイコン番号には、FontAwesomeの好きなアイコンページにあるこの部分を入れてください。
おわりに：Cocoon(コクーン)の固定フッターメニューはカスタマイズ可能！
サクッと固定フッターメニューのカスタマイズ方法を書いてみました。
- 英語で統一したい
- 別の文字に変えたい
- 別のアイコンに変えたい
そんな方はぜひ参考にしてカスタマイズを楽しんでください♪