こんにちは、まちゃりさです。
今回は、Cocoonカスタマイズのうち、サイドバーにアイコンボックスを表示させる方法について解説していきます。
「アイコンボックス」は、このようなリンク付きの画像のことです。
![これがアイコンボックスです](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/03/cocoon10.png?resize=332%2C464&ssl=1)
私は、このように
- ホーム画面
- カテゴリー(4つ)
- プロフィール
- サイトマップ
の4種類を設定しています。
画像をクリックすれば、それぞれのリンクに飛べるようになっています。
![まちゃりさ](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/04/新まちゃりさ_20210418.jpg?resize=150%2C150&ssl=1)
視覚的な操作ができるので、便利です!
本記事では、サイドバーにアイコンボックスを表示させる方法について、解説していきます。
![まちゃりさ](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/04/新まちゃりさ_20210418.jpg?resize=150%2C150&ssl=1)
最後まで一緒に頑張りましょう!!
それでは、どうぞ!
事前準備① イメージの確認
事前準備の1つ目です。
どのような画像に、何のリンクを付けたいのか?
具体的なイメージをあらかじめ決めておきます。
私のサイトでは、下の画像のイメージで作成しています。
![どのような画像に、どのリンクを付けたいかイメージを決めておきます](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/03/アイコンボックス2_イメージ.png?resize=750%2C422&ssl=1)
例えば、「人」のマークをクリックすれば、「プロフィール画面」に遷移します。
![人のマークをクリックすると、プロフィール画面に遷移します。](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/03/アイコンボックス3_遷移イメージ.png?resize=750%2C422&ssl=1)
奇数個だと見栄えが悪くなるので、偶数個にするのがおすすめです。
![まちゃりさ](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/04/新まちゃりさ_20210418.jpg?resize=150%2C150&ssl=1)
「よくわからない」という方は、私が作成した通りに真似しても、もちろんOKです。
事前準備② 表示オプション設定
続いて、準備の2つ目です。
ワードプレス管理画面から、[外観]→[メニュー]を選択します。
![ワードプレス管理画面から、[外観]→[メニュー] をクリックします](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/03/cocoon7-4.png?w=1358&ssl=1)
[表示オプション▼]を選択し、[カスタムリンク]と[CSSクラス]にチェックを入れておきます。
![[表示オプション▼]を選択し、[カスタムリンク]と[CSSクラス]にチェックを入れる](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/03/アイコンボックス4_表示オプション3.png?resize=750%2C422&ssl=1)
事前準備③ Font Awesome のバージョン確認
準備の3つ目は、「Font Awesome」のバージョン確認です。
Cocoonのデフォルトは「Font Awesome4」(バージョン4)になっています。
私は「Font Awesome5」(バージョン5)を使用しています。
自身のFont Awesomemのバージョンを調べるには、[Cocoon設定]→[全体]→[サイトアイコンフォント]を確認してください。
![](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/03/アイコンボックス14_サイトアイコンフォント.png?resize=779%2C153&ssl=1)
それぞれのバージョンに応じて、後から使用するアイコンが異なります。
どのバージョンを使用しているか、覚えておいてください。
![まちゃりさ](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/04/新まちゃりさ_20210418.jpg?resize=150%2C150&ssl=1)
これで準備OKです!
メニューの作成
それでは、実際にアイコンボックスを作成していきましょう。
まずは、表示用の「メニュー」を作成していきます。
- 手順1ワードプレス管理画面の[外観]→[メニュー]を選択します。
ワードプレス管理画面の[外観]→[メニュー]を選択します。 - 手順2[新しいメニューを作成しましょう]をクリックします。
[新しいメニューを作成しましょう]をクリックします。 - 手順3メニュー名に、それらしい名前を付けます。
※私は「ボックスナビ」としました。
- 手順4最後に、[メニューを保存]を押します。
メニュー項目の追加
作成したメニューの項目を追加していきます。
私の設定しているアイコンボックスメニューは大きく分けて、次の4つです。
- ホーム画面(カスタムリンク)
- カテゴリー(4つ)
- プロフィール(固定ページ)
- サイトマップ(固定ページ)
![](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/03/アイコンボックス2_イメージ.png?resize=750%2C422&ssl=1)
![まちゃりさ](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/04/新まちゃりさ_20210418.jpg?resize=150%2C150&ssl=1)
今回は、それぞれの設定方法を、3つにわけてご紹介していきます。
①ホーム画面の設定
まず、「ホーム」の設定です。家のマークの部分です。
![ホーム画面の設定](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/03/アイコンボックス6_イメージ_home.png?resize=498%2C280&ssl=1)
先ほど作成した「メニュー」を開きます。
[メニュー項目を追加]から、「カスタムリンク」を選びます。
以下の項目を、それぞれ入力します。
- URLに「サイトのトップページアドレス(http://)」
- リンク文字列に「ホーム」
![](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/03/アイコンボックス10_home詳細.png?resize=277%2C469&ssl=1)
入力後、「メニューに追加」をクリックします。
②カテゴリーの設定
次に「カテゴリー」を設定します。これら4つの部分です。
![](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/03/アイコンボックス7_イメージ_カテゴリ.png?resize=750%2C422&ssl=1)
[メニュー項目を追加]の「カテゴリー」から、好きなカテゴリーにチェックを入れ、「メニューに追加」をクリックします。
![](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/03/アイコンボックス11_カテゴリー詳細.png?resize=281%2C529&ssl=1)
③固定ページの設定
最後に、固定ページを追加します。
今回は、「プロフィール」と「サイトマップ」を追加します。こちらです。
![](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/03/アイコンボックス8_イメージ_固定ページ.png?resize=750%2C422&ssl=1)
[メニュー項目を追加]の「固定ページ」から追加したいページを探し、チェックを入れます。
最後に、「メニューに追加」をクリックします。
![](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/03/アイコンボックス11_固定ページ.png?resize=269%2C473&ssl=1)
アイコン画像の設定
メニューをすべて追加したら、それぞれのメニュー項目に画像を設定していきます。
項目の「詳細(▼)」をクリックして、開きます。
![項目の「詳細(▼)」をクリックして、開きます。](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/03/アイコンボックス12_メニュー項目を追加した.png?resize=1024%2C585&ssl=1)
「CSS class(オプション)」にアイコン画像のCSSを入力します。
これは、Font Awesome5のアイコンページです。
![Font Awesome5のアイコンページ](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/03/アイコンボックス15_「Font-Awesome」サイト.png?resize=1024%2C529&ssl=1)
好きな画像を検索するか、スクロールして選びます。
画像を選び、クリックします。
![アイコン画像一覧から好きな画像を選ぶ](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/03/アイコンボックス15_「Font-Awesome」サイト2.png?resize=1021%2C665&ssl=1)
<i class=”以下に書かれている部分を、コピーします。
![アイコン画像詳細ページ](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/03/アイコンボックス15_「Font-Awesome」サイト3.png?resize=1024%2C526&ssl=1)
<i class=”以下の拡大画像は、こちらです。
![<i class=”以下の拡大画像](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/03/アイコンボックス15_「Font-Awesome」サイト4.png?resize=750%2C422&ssl=1)
この画像の例だと、下の赤枠部分をコピーします。
<i class="fab fa-apple"></i>
参考ちなみに、私が使用している画像のCSSは、以下のとおりです。
(ホーム)
![](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/03/アイコンボックス17_home.png?resize=154%2C88&ssl=1)
「ホーム」 fa fa-home
(カテゴリー1)
![](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/03/アイコンボックス18_カテゴリ捨てる.png?resize=155%2C99&ssl=1)
「すてる」 fa fa-trash
(カテゴリー2)
![](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/03/アイコンボックス18_カテゴリそうじ.png?resize=157%2C95&ssl=1)
「そうじ」 fa fa-pagelines
(カテゴリー3)
![](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/03/アイコンボックス19_カテゴリ片付け.png?resize=151%2C96&ssl=1)
「かたづけ」 fa fa-inbox
(カテゴリー4)
![](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/03/アイコンボックス20_カテゴリせいかつ.png?resize=150%2C107&ssl=1)
「せいかつ」 fa fa-child
(プロフィール/固定ページ)
![](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/03/アイコンボックス21_カテゴリプロフィール.png?resize=147%2C111&ssl=1)
「プロフィール」 fa fa-user
(サイトマップ/固定ページ)
![](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/03/アイコンボックス22_サイトマップ.png?resize=146%2C92&ssl=1)
「サイトマップ」 fa fa-sitemap
「ナビゲーションラベル」を変えることで、「表示名」を変えることも可能です。
![](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/03/アイコンボックス23_ナビゲーションラベルの変更.png?resize=467%2C519&ssl=1)
最後まで設定したら、[メニューを保存]をクリックします。
![](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/03/アイコンボックス24_メニューを保存.png?resize=1024%2C505&ssl=1)
![まちゃりさ](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/04/新まちゃりさ_20210418.jpg?resize=150%2C150&ssl=1)
これで80%終了!あと少しです!
ウィジェットの設定
作成したメニューをサイドバーの「ウィジェット」に設定していきます。
[外観]→[ウィジェット]を選択します。
![[外観]→[ウィジェット]を選択します。](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/03/アイコンボックス25_外観、ウィジット.png?resize=357%2C289&ssl=1)
左側から「[C]ボックスメニュー」を探し、右側にある「サイドメニュー」へ向かってドラック&ドロップします。
![](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/03/アイコンボックス26_サイドバーにドラック.png?resize=750%2C422&ssl=1)
別のやり方サイドバーにチェックを入れた状態で、「ウィジェット追加」をクリックしてもOKです。
ドラック後、「[C]ボックスメニュー」の[▼ボタン]を押し、設定画面を開きます。
![「[C]ボックスメニュー」の[▼ボタン]を押し、設定画面を開きます。](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/03/アイコンボックス27_タイトルに「メニュー」.png?resize=589%2C617&ssl=1)
[タイトル]に「メニュー」などの文字を入力します。
※「MENU」など好きなワードでOKです。
[メニュー名]に、先ほど作成した「メニュー」を指定します。
※私の場合は「ボックスナビ」としています。
[save]を押し、[完了]を押して閉じます。
[save]を押して [完了]を押す
これで、サイドバーにアイコン画像付きのメニューが設置されました。
実際に画面で確認してみましょう。
![](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/03/cocoon10.png?resize=421%2C589&ssl=1)
![まちゃりさ](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/04/新まちゃりさ_20210418.jpg?resize=150%2C150&ssl=1)
アイコンメニューのサイドバーへの設定は以上です!お疲れさまでした!!
他の活用例
アイコンボックスメニューは、投稿本文下などにも入れることができます。
![アイコンボックスメニューは、投稿本文下などにも入れることができます](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/03/cocoon10-1.png?resize=717%2C597&ssl=1)
好きな場所に設置して、ブログサイトの回遊率を上げることができます。
![](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/03/アイコンボックス30_投稿本文下.png?resize=1024%2C578&ssl=1)
まとめ:【Cocoon】サイドバーにアイコンボックスを表示させる手順!
いかがでしたか?
今回は、サイドバーにアイコンボックスを表示させる方法についてご紹介しました。
アイコンボックスを設置すると、一気に凝ってるサイト感が出るので、いいですよね。
手順は少し複雑ですが、慣れれば簡単。
色々なアイコンを設定できるようになります。
今回は無料のアイコン画像を指定する手順を紹介しましたが、自分で準備した画像を指定することも可能です。
色々試しながら、一緒にすてきなブログサイトを作っていきましょう。
それでは、今回はここまで。
最後までお読みいただき、ありがとうございました。
参考
本記事は、峠さんの記事(【Cocoon】サイドバーカスタマイズ!カテゴリーのボックスメニューは意外と難しくない)を参考に作成しています。
コメント