コクーン(Cocoon)のメニューバーにアイコンを付け加える

このブログはWordPressの無料テーマ「Cocoon」(コクーン)を使用しています。

なぜ利用しているか?

無料なのはもちろんうれしいのですが、なんといってもHTMLタグとかCSSとか全く分からなくても大丈夫って事です。

こんな風に蛍光ペンで下線を入れるもの標準装備。本来CSSを理解していない私にはできなかったことが可能になりました。

まあ、こんなレベルなのでCocoonをインストールしてからも大変。マニュアルを見ながら四苦八苦。

マニュアルの簡単な単語の意味も未だま分からず、笑われてしまうぐらいでお恥ずかしい!だから人一倍疑問が多いので、これらを書いてみました。

目次

メニューバーにアイコンをつけてみた

初めてWordPressでブログを始めた時に、練習という事で、無料のテーマ「Lithing」を使ってみました。

選んだ理由は、最初からデザインが出来上がっていたことと、関連のプラグイン「ExUnit」をインストールすると、ど素人にも簡単にブログデザインができてしまったからです。

アメブロからの初めての事だったので驚きました。

そこにメニューバーのアイコンを付け加える方法も紹介されていたので、これも簡単にできました。

その時のことを思い出して、このコクーン(Cocoon)テーマでも利用できないか試してみることにしました。

メニューバーにアイコンが付いたからどうだって事もないのですが、なんとなく無いよりは、あった方が見た目がいいような感じがしませんか?

新着記事に画像が無い

それでは、メニューバーにアイコンを付け加える方法です。

まず最初に、【外観】➡【メニュー】と進み、アイコンを付け加えたい項目をクリックします。

メニューバーのアイコン2

このブログの場合は、【HOME】の文字の左に家のマーク「」を付け加えてみました。

メニューバーのアイコン3

アイコンは無料のテーマ「Lithing」でもお世話になった、「Font Awesome」サイトのアイコンを使用しています。

あわせて読みたい
Font Awesome Icons Font Awesome, the iconic font and CSS framework

[<i class=”fa fa-home fa-fw”></i>]、[]内が家のマークのテキストコードです。

もし、投稿ページや固定ページでWordPressのビジュアルモードでコピーして貼り付けるとアルファベットの羅列になるので、つける時はテキストモードで張り付ける必要がありますよ

話を戻して、メニューバーの【HOME】に付け加える時は、ナビゲーションラベルの部分が【HOME】になっているので図のように文字の左側に張り付けるだけです。

メニューバーのアイコン4

こうすると、このようにアイコンがメニューバーに付け加えられました。

あと残りの項目も同じように、「Font Awesome」サイトから好みのアイコンを探してテキストコードを張り付ければ完成です。

メニューバーのアイコン

パソコンでもスマホでも画面上にあるメニューバーも一番下にあるメニューバーにも同じようにアイコン付きでメニューバーが出来上がりました。

波乗りアヒル
波乗りアヒル

早く?から卒業できるように!日々奮闘中!なので、CSS使わなくてもできるカスタマイズってありがたいですね。

初心者の?のあるあるを書き出してみました。

コクーンテーマをひと工夫

よかったらシェアしてね!
  • URLをコピーしました!
目次