どうも。ブログ初心者のsoleil mamanです。
ブログのデザインやレイアウトをもっとおしゃれにしたくて初心者ながら、少しずつ勉強しております。
最近はブログのヘッダーメニューバーにアイコンをつけてみました。
以外に簡単にできました(^^♪自分でも忘れないように記事にしときます。
※当ブログが使用しているのはwordpressでテーマはcocoonを使用しております！
ヘッダーメニューにアイコンを付ける前と付けた後の比較
ヘッダーメニューとは、ブログの一番上に表示されるメニューのことです！(写真参照)
アイコンを付ける前のヘッダーメニュー
アイコンを付けた後のヘッダーメニュー
スマホだとこんな感じ
やっぱりアイコンあった方がおしゃれに見えます！！
しかもアイコンが主張しすぎてないのがいい☆
こんな感じのアイコンをヘッダーメニューに付ける方法を具体的に説明していきます。
アイコンフォント「Font Awesome」
今回メニューバーのアイコンに使用したのはWord Pressテーマのcocoonの中に組み込まれている、
「Font Awesome」です。
「Font Awesome」のコードをcocoonのヘッダーメニューに設定するだけ。
初心者は何も考えずこれを使えば簡単にアイコンを付けることができます！
cocoonのヘッダーメニューにアイコンを付ける方法
では実際にcocoonのヘッダーメニューに「Font Awesome」のアイコンを入れていく方法について詳しく書いて行きます。
１．cocoonで使用している「Font Awesome」のバージョンを確認する
cocoonですでに組み込まれている「Font Awesome」のバージョンによって、アイコンを入れる時のコードが違ってくるので、まずは自分が使用しているcocoonの「Font Awesome」のバージョンを確認します。
ちなみに今回はFont Awesome５でアイコンを入れていきたいと思います☆
まずは、ダッシュボードを開きます。
① ダッシュボード➡Cocoon設定➡Cocoon設定をクリック
② 全体をクリックして下にスクロール
③ サイトアイコンフォントをFont Awesome 5 に設定する。
④ 設定したら変更をまとめて保存をクリック
２．「Font Awesome」のサイトを開いてアイコンを選びコードをコピーする
アイコンは「Font Awesome」にアクセスしてそこからコードを引っ張ってきます。
Font Awesomeのサイト ➡ https://fontawesome.com/icons?d=gallery
①アイコンを探す
無料のアイコンでも十分なので、左のバーの無料にチェックしてアイコンを探します。
お気に入りのアイコンが決まったら、そのアイコンをクリックします。
②アイコンのコードをコピーする
アイコンの上部にあるコードをクリックします。➡クリックするとコードがコピーされます。
(一応バージョンが５なのをチェックしてください☆)
３．メニューバーにアイコンを設定する
wordpressに戻ってメニューバーにアイコンを設定していきます。
①外観➡メニューをクリック
②アイコンを付けるメニュー名の左端にある▼をクリックして設定タブを開く。
③ナビゲーションラベルにアイコンコードをコピーする。
ここでちょっとひと手間。そのままのコードを使用するとアイコンが少し小さめなんです。
なので、コードを少し修正してアイコンをちょっとだけ大きくします。
元のコード ➡ <i class=”fas fa-robot”></i>
修正コード ➡ <i class=”fa fa-robot fa-lg“></i>
修正したコードの後にメニュー名を入力します。
<i class=”fa fa-robot fa-lg“></i> 子育て(メニュー名)
④メニューを保存をクリック
アイコンを付けたいメニューのコードをすべて入力したら保存します。
ブログを表示してメニュー名にアイコンがついていることを確認してくださいね。
アイコンがついていない場合は、もう一度バージョンの確認と、コードの確認をしてみてください。
まとめ
いかがでしたか？？
ヘッダーメニューにアイコンを付けるのは思ってたより短時間できました！
初心者のかたで、ブログデザインもちょっと工夫したいって方の参考になればいいです(^^♪
コメント