お家で「好き」を仕事にしたい!ぱるのブログ

ぱるろぐ

ブログカスタマイズ

Cocoon(コクーン)の固定フッターメニューの文字やアイコンを変更するカスタマイズ

投稿日:2018年3月29日 更新日:



無料のWordPressテーマ『Cocoon(コクーン)』では、スマホで固定フッターメニューが表示されるのが魅力ですよね。

でも、ここの文字やアイコンを自分好みにカスタマイズしたい……!!って思ったので、色々いじってみました。

この記事ではCocoon(コクーン)の固定フッターメニューの文字やアイコンを変更するカスタマイズをご紹介します。

ぜひ参考にして、イメージ通りのブログをつくってみてください!

\趣味ブログをはじめるなら/

クロネのブログ講座

Cocoon(コクーン)で固定メニューをカスタマイズする

before

デフォルトでは上のような固定メニューですが、カスタマイズをすることで下のようなメニューが作れます。

after

Cocoon(コクーン)で固定メニューの文字をカスタマイズする方法

mobile-menu-buttons.php内の下記の部分をお好きな文字に変更すればOKです。

  • 'メニュー'
  • 'ホーム'
  • '検索'
  • 'トップ'
  • 'サイドバー'

before
after

今後アップデートで消えないようにするために、子テーマに複製してカスタマイズする方法をおすすめします。

  1. 子テーマに「tmp」というファイルを作成
  2. 中に「mobile-menu-buttons.php」を作成
  3. 元のコードをコピペし複製完了

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の好きなアイコンページにあるこの部分を入れてください。

FontAwesomeの説明

おわりに:Cocoon(コクーン)の固定フッターメニューはカスタマイズ可能!

サクッと固定フッターメニューのカスタマイズ方法を書いてみました。

  • 英語で統一したい
  • 別の文字に変えたい
  • 別のアイコンに変えたい

そんな方はぜひ参考にしてカスタマイズを楽しんでください♪

おすすめ関連記事

-ブログカスタマイズ

Copyright© ぱるろぐ , 2019 All Rights Reserved.