【無料】グローバルナビにアイコン画像を表示させる方法~Cocoon編

Cocoon
スポンサーリンク

あ~。ブログをおしゃれにしたいなぁ~。

ではグローバルナビ(メニューバー)を装飾してはどうですか?

なんか難しそうじゃないですか?

いえいえ。とっても簡単にできるのでオススメですよ。

スポンサーリンク

アイコン画像であなたのWordpressブログもおしゃれに変身

こんにちは としぞうです!

今回はアイコンフリーの画像をメニューバーに導入する方法をシェアしたいと思います。

百聞は一見に如かず。まずは↓をご覧ください。

なにもないよりは、オシャレになったでしょう?( *´艸`)グフフ

 

実は、アイコン画像を使ってメニューバーを装飾することは2つのメリットがあります。

  1. 自分のサイトがおしゃれになる
  2. アイコンを見るだけで直観的にどんなページなのかわかる

これであなたのサイトのビジュアルやユーザービリティもさらに向上するはずです。

 

手順通りにやればあっという間に導入できますので、

早速いってみましょう!

WordPressのCocoonを使った場合の設定方法

ぼくが使用しているのが、わいひらさんがフリーで公開されている万能テーマの「Cocoon」をベースにしていますので、同じテーマをご利用の人は5分もあればできますし、Word Pressなら基本的に同じように進めればいけると思いますので、手順だけでも覚えておくといいです。

まずは、バックアップを取りましょう!

CSSやPHPなどのコードをいじるときには、最初にバックアップを取ってからが基本ですよね。

今回はPHPを少し触るので、よろしくお願いします。

Font Awesomeにアクセスする

まずはFont Awesomeにアクセスして、トップページのコードをコピーします。

Font Awesome

【テーマの編集】→<head> </head>にコードを挿入する

Cocoonの場合は、子テーマに「head-insert-php」という項目がありますので、

【外観】→【テーマの編集】→【tmp-user】→【head-insert-php】

と進んでもらって、先ほどコピーしていただいたコードを一番下にペースト。

 

他のテーマで子テーマに【head-insert-php】がないなら、直接「親テーマを編集」する形になります。

【ファイルを更新】ボタンを押せば、準備完了です。

お気に入りのアイコン画像を調達しよう!

Font Awesomeにアクセスして、【アイコン】からお気に入りのアイコンを選び、コードをコピーしましょう!

Font Awesome

ブログに実装しよう

アイコン画像のコードを入手したら、【外観】→【メニュー】→【ライブプレビューで管理】をクリック。

 

即時反映されるので、実際の画面を見ながら編集できます。

ここでは、「ホーム」という文字の前にアイコンを設置したいので、<i class=”fas fa-home”></i>を文字の前に貼り付けます。

コードについては<i class=”fas fa-home”></i>を入れるとうまくいかない場合があり、sの部分を削除していますが、phpを入れれば問題なく表示されると思います。

 

万が一うまく表示されなければ、sを消してみてくださいね。

注意事項

Font Awesomeは結構頻繁にアップデートされますので、PHPの表記が変わった場合、再度手順の最初に戻ってPHPを最新版に更新しましょう。

もし、表示がおかしくなったときはPHPを疑えばいいんじゃないかと思います。

まとめ

今回は、フリーアイコンを使って、Word Pressのグローバルメニューのアイコン画像を追加する方法をご紹介させていただきました。

ちょっとした装飾ですが、イメージはかなり変わると思います。

 

活用方法はメニュー装飾だけにとどまらず、本文にも追加できますのでいろいろ楽しめそうですよ!

 

さらに独自性を出しくなったら、有料プランを開放するのもアリですね。

 

それでは また!

編集後記~不具合報告

早速不具合が発生したので、報告させていただきます。

Cocoonの編集画面には、便利なショートコード「評価スター」というものがありまして

5
←コレです。

 

ちょうどこれを使いたい記事を書いていると、カラの星が上手く表示されなかったため原因を調べてみると、やはり、この星のアイコンはfunctions.phpに「Font Awesome4」を使っているみたいで、今回の「Font Awesome5」と競合するみたいです。

4

 

詳しく解説されている方がいらっしゃいましたので、その通り追加設定。

両方うまく稼働したことを確認しましたので、ご紹介しておきます。

参考ページ:https://hellokidneylife.com/rating-star-error/

 

さらに追記させていただきますと、最新のiPhoneでは星アイコンの方がうまく表示されない状態になっていますので、こちらの方は解決次第報告させていただきます。(/・ω・)/

コメント