こんにちは、まちゃりさです。
今回は、Cocoonカスタマイズのうち、サイドバーにアイコンボックスを表示させる方法について解説していきます。
「アイコンボックス」は、このようなリンク付きの画像のことです。
私は、こんな感じで、ホーム、カテゴリ4つ、プロフィール、サイトマップを設定しています。
画像をクリックすると各リンクに飛べるようになっています。
視覚的な操作ができるので、便利です！
この記事では、サイドバーにアイコンボックスを表示させる方法について、解説していきます★
最後まで一緒に頑張りましょう！！
それでは、どうぞ！
事前準備① イメージの確認
どのような画像で何のリンクを付けたいのか？イメージをあらかじめ決めておきます。
最初はよくわからないという方は、私が作成した通りに真似しても、もちろんOKです。
事前準備② 表示オプション設定
ワードプレス管理画面から、[外観]→[メニュー]を選択します。
表示オプション▼を選択して、[カスタムリンク]と[CSSクラス]にチェックを入れておきます。
事前準備③ Font Awesome のバージョン確認
「Font Awesome」とは、無料で利用できるWebアイコンフォントのことです。
これのバージョンを確認しておきます。
Cocoonのデフォルトは「Font Awesome4」（バージョン4）ですが、私は「Font Awesome5」（バージョン5）を使用しています。
自身のFont Awesomeｍのバージョンを調べるには、[Cocoon設定]→[全体]→[サイトアイコンフォント]を確認してください。
それぞれのバージョンに応じて、後から使用するアイコンが異なりますので、少し覚えておいてください。
これで準備OKです！
メニューの作成
さて、それではまず表示用のメニューを作成していきます。
ワードプレス管理画面の[外観]→[メニュー]を選択します。
①[新しいメニューを作成しましょう]を押します。
②メニュー名にそれらしい名前を付けて[メニューを保存]を選択します。私は「ボックスナビ」としました。
③[メニューを保存]を押します。
メニュー項目の追加
私の設定しているアイコンボックスメニューは大きく分けて次の4つです。
①ホーム（カスタムリンク）、②カテゴリー（4つ）、③プロフィール（固定）、④サイトマップ（固定）
今回は、それぞれの設定方法をご紹介していきます。
まず、「ホーム」から。ここです。
左側の「メニュー項目を追加」から、「カスタムリンク」を選びます。
URLに「サイトのトップページアドレス（http://）」、リンク文字列「ホーム」で「メニューに追加」をクリック。
次に「カテゴリー」を設定します。これらです。
カテゴリーから好きなカテゴリーにチェックを入れ、「メニューに追加」をクリック。
最後に、プロフィールとサイトマップです。こちらです。
固定ページから探し、チェックを入れて「メニューに追加」をクリックします。
アイコン画像の設定
メニューをすべて追加したら、それぞれのメニュー項目に画像を設定していきます。
項目の詳細（▼）を開きます。
「CSS class（オプション）」にアイコン画像のCSSを入れていきます。
ここで、事前準備③で確認した「Font Awesome」のバージョンにあわせたアイコンページにいきましょう。
▶Font Awesome4の場合は、こちらのFont Awesome4のアイコンページにいきます。
▶Font Awesome5の場合は、こちらのFont Awesome5のアイコンページにいきます。
好きな画像を検索するかスクロールで選び、クリックします。
<i class=”以下に書かれている部分をコピーしていきます。
この画像の例だと、下の赤枠部分をコピーして貼り付けます。
<i class="fab fa-apple"></i>ちなみに、私が使用している画像のCSSは、ご覧のとおり。
「ホーム」 fa fa-home
「すてる」 fa fa-trash
「そうじ」 fa fa-pagelines
「かたづけ」 fa fa-inbox
「せいかつ」 fa fa-child
「プロフィール」 fa fa-user
「サイトマップ」 fa fa-sitemap
ナビゲーションラベルを変えることで、表示名を変えることも可能です。
最後まで設定したら、[メニューを保存]をクリックします。
これで80%終了！あと少しです！
ウィジットの設定
作成したメニューをサイドバーの「ウィジット」に設定していきます。
[外観]→[ウィジット]を選択します。
左側から「[C]ボックスメニュー」を探し、右側にある「サイドメニュー」へ向かってドラック&ドロップします。
ドラック後、「[C]ボックスメニュー」の▼ボタンを押し、設定画面を開きます。
[タイトル]に「メニュー」を入れます。※MENUなど好きなワードでOKです。
[メニュー名]に、先ほど作成したメニューを指定します。（私の場合は「ボックスナビ」です）
[save]を押し、[完了]を押して閉じます。
これでサイドバーにアイコン画像付きのメニューが設置されました。
実際に画面で確認してみましょう。
アイコンメニューのサイドバーへの設定は以上です！お疲れさまでした！！
他の活用例
アイコンボックスメニューは、投稿本文下などにも入れることができます。
好きな場所に設置して、ブログサイトの回遊率を上げることができます。
まとめ
いかがでしたか？
今回は、サイドバーにアイコンボックスを表示させる方法についてご紹介しました。
アイコンボックスを設置すると、一気に凝ってるサイト感が出るので、いいですよね。
手順は少し複雑ですが、慣れれば簡単。
色々なアイコンを設定できるようになります。
今回は無料のアイコン画像を指定する手順を紹介しましたが、自分で準備した画像を指定することも可能です。
色々試しながら、一緒にすてきなブログサイトを作っていきましょう。
それでは、今回はここまで。
最後までお読みいただき、ありがとうございました。
参考
本記事は、峠さんの記事（【Cocoon】サイドバーカスタマイズ！カテゴリーのボックスメニューは意外と難しくない）を参考に作成しています。
コメント