ブログノウハウ

【Cocoon】 ヘッダーにカテゴリーアイコンを作る

cocoonのヘッダー部分に見栄えのするカテゴリーアイコンをつけたいと思っていましたが、やっとできました😀

今日はこのアイコンのつけ方を記事で残します。

早速ですが下の写真が、変更前のヘッダー部分です。

ブログ初めて2週間くらい経過してからヘッダー部分にカテゴリーメニューを作ったんですが、最初はこれで満足してたんです( ・`д・´)

今は2カ月が経過しようとしていますが、いろんな方のブログを参考にさせていただいていたら、急にアイコンつけたくなってしまいました!

ちょうどcssをいじるのも楽しくなってきて、ブログを始めた目的から少しずれてきてますがwebデザインも面白いなぁと。

スキルが身につけば副業で少し贅沢な生活がしたいですね。
無料体験もたくさんあるみたいなので受けてみようかな(´・ω・)

話が逸れてしまいましたが、本題に戻りますね😀

先ほど変更前のヘッダー部分をお見せしましたが、下の写真が変更後のヘッダー部分です( ・`д・´)

だいぶ見た目が良くなった気がしませんか??

今回、このヘッダーへのアイコンのつけ方を記事にしましたので、ヘッダー部にアイコンつけたい方参考にしてください!

ヘッダーにアイコンをつけるためにやること

ヘッダーにアイコンをつけるためのステップは大きく分けて下の4ステップです。

  1. ヘッダー部分に表示させたいカテゴリーを作る
  2. カテゴリーのメニュー(グループ)を作る
  3. アイコンを設定する。
  4. ヘッダー部分にメニューを入れ込む

さっそくこの4ステップの説明をしていきます。

1.ヘッダー部分に表示させたいカテゴリーを作る

まずはカテゴリーを作ります。

カテゴリーは記事の分類です。私の例で行くと、「ものづくり」というテーマの親ブログがあって、その中に「3Dプリンター」や「DIY」の記事を分類してます。

これがカテゴリーですね😀

カテゴリを作るには、下のキャプチャ①の投稿 ➡ カテゴリーの順にクリックし、カテゴリー編集ページを開きます。

次に②の「新規カテゴリーを追加」で作りたいカテゴリーの名前、スラッグなどの情報を入力します。

必要な情報を入力したら新規カテゴリーを追加を押すと、③のオレンジ枠に追加されます。

これを作りたいカテゴリーの数だけ繰り返します。

2.カテゴリーのメニュー(グループ)を作る

次は1で作ったカテゴリーでメニューというグループを作ります。

外観 ➡ メニューの順にクリックし、メニュー画面を開きます。

開いたら②の新しいメニューを作成しましょうをクリックします。

クリックしたら下記の画面が開きましたね。

ここで任意のメニュー(グループ)の名前を入力します。

例えば、ボックスヘッダーと入力しメニューを保存するとしますね。

すると下のキャプチャのオレンジ枠に作った保存したメニューが選択できるようになります。

これでメニュー(グループ)ができました。

さて、このメニュー(グループ)の中に目次1で作ったカテゴリーを入れていきましょう。

下のキャプチャーで①のカテゴリの中から、チェックを入れ、メニューに追加を押すと②に入ります。

これでメニュー(グループ)ができました。

3.アイコンを設定する

いよいよアイコンの設定をしましょう!

アイコンはFont AwesomeというWordPressのプラグインを使用しますので、まず初めにインストールしてください。

Font Awesomeのインストール

プラグインの①の新規追加から②のキーワード検索のところにFont Awesomeと入れてください。

するとFont Awesomeが出てくるので、「今すぐインストール」をクリックし、有効化にします。

これでアイコンを使う準備はOKです!

使いたいアイコンを選ぶ

いよいよアイコンを選びましょう!

Find the Perfect Icon for Your Project in Font Awesome 5 | Font Awesome
Search all the Version 5 icons and match your project with a look and feel that's just right. Better yet, try Font Awesome 6 with the all-new Sharp Solid icons.

↑のサイトから好きなアイコンを選んでクリックします。

ここでは下のキャプチャのオレンジ枠を選びますね。

アイコンをクリックすると下記の画面になりますので、Start Using This Iconをクリックしてください。

クリックすると↓の黒枠にコードが出てきますので、オレンジ戦の引いてある部分(fab fa-500px)のみコピーしてください。

各カテゴリーにアイコンを設定する

それでは先ほど選んだアイコンをカテゴリーに設定しましょう!

外観 ➡ メニューで先ほど作ったボックスヘッダーを開きます。

そして先ほどのアイコンをつけたいカテゴリーのタブを開いて、css class(オプション)のところにペーストし右下のメニューを保存をクリックしてください。

ちなみにほかのカテゴリーも同様にFont Awesomeからアイコンコードを入手し、ここに貼ってください。

4.ヘッダー部分にメニューを表示させる

ここまでアイコンを表示させるための準備をしてきましたが、もう少しでヘッダーにカテゴリーアイコンを表示できますよ!

最後は外観 ➡ ウィジットを開きます。

その中に[C]ボックスメニューがありますね。これを右のコンテンツ上部にドラック&ドロップし、挿入します。

挿入したらメニュー名に先ほど作ったボックスヘッダーを選択し、保存を押します。

これで、完了です!

実際にヘッダー部分を見てみましょう😀

Adというアイコンが反映されてますね( ・`д・´)

まとめ

以上でCocoon ヘッダーに好きなアイコンを作る方法でした😀

ほかにもこういったサイトデザインを変更するメモ書きは残してますので、よろしかったらこちらの記事も見てください。

記事本文にSNSボタンをカスタマイズ!【Cocoonプラグイン不要】

\ Follow me /
タイトルとURLをコピーしました