Cocoonでボックスメニューを表示させて利便性の高いブログに!

Cocoon
この記事は約5分で読めます。

naka(@naka_twilog)という名前でブログ書いてる高校生です。


あいはら
あいはら

ボックスメニューの作り方が知りたい


そう思ったのでいろいろ調べて実際に作ってみました。


記事内、サイドバー、コンテンツ下など基本的にどの場所でも表示できることがわかったので僕の備忘録も兼ねて紹介します。

ちなみに僕は下のような感じにしてみました!



ここではCocoonテーマの使用を想定して書いていきますね…↓

この記事について


コードが書けなくても全然OKです。

ボックスメニューとは?

下のようにアイコンや画像が表示されているメニューのことです。



単に文字だけが書かれているメニューよりも視覚的にわかりやすいですよね。


本文中で表示した場合はこのように4列になっていますが、サイドバーでは2列、コンテンツの上下では6列表示になるそうです。

まずはメニューを作る

具体的な作り方について書いていきますね。



管理画面から「外観」→「メニュー」と選びます。

WordPress


メニュー名を入力したらメニュー作成を押します。



メニュー名はなんでもいいですが、

「メニュー1」、「あ」とかにすると後からわかりにくくなるので

「ボックスメニュー」のように他のメニューとごちゃごちゃにならないようにしておくといいと思います。

表示オプションの設定をする

次に、上の方にひっそりある「表示オプション」から、
「CSSクラス」と「タイトル属性」、「説明」を有効にします。

WordPress


「CSSクラス」はアイコン画像を表示するため、


「タイトル属性」はアップロードした画像を使用するとき、


「説明」はその下の文字に説明を入れるために使います。

メニュー項目を追加する

「メニュー項目を追加」からリンクを繋げたいページを選択し、追加してください。

WordPress

固定ページや投稿、カテゴリーのリンクへ飛ぶようにしたり、

カスタムリンクを設定することで、自分のTwitterやinstagramへのリンクを埋め込むこともできます。

項目ごとの設定をする

「ナビゲーションラベル」、「タイトル属性」、「CSS  class」、「説明」にそれぞれ入力できると思います。

「ナビゲーションラベル」について

ボックスメニューの下の部分になります。

ボックスメニュー

「タイトル属性」、「CSS  class」について

アイコンを表示させる方法は2つあるみたいです。

  1. Font Awesomeを使う
  2. 自分で用意した画像を使う




・Font Awesomeを使う

Font Awesomeとは商用利用がOKでウェブサイトなどで使用できるアイコンのことです。

少し調べてみたところ、よく使われるFont Awesomeには4、5のバージョンがあり、どちらを使うかによってCocoonで設定が必要みたいです。


 「Cocoon設定」→「全体」のサイトアイコンフォントから切り替えができます。

Font Awesome
The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.

このサイトから好きなアイコンのクラス名をコピーして任意のメニューの「CSS  class」欄に貼り付けることでアイコンが表示されるようになります。


<i class="fas fa-arrows-alt"></i>

例えば上の場合、アイコンのクラス名は「fas fa-arrows-alt」の部分になります。
そこだけコピペすればOKです。

・自分で用意した画像を使う

先に「メディア」→「新規追加」から画像をアップロードし、最適化しておくといいと思います。

アップロードした画像のURLを任意のメニューの「タイトル属性」にペーストするだけでOKです。


おすすめの画像サイトをいくつか載せておきます。
(画像タップorクリックでジャンプ)

http://flat-icon-design.com/
https://icooon-mono.com/
https://chojugiga.com/
http://pictogram2.com/

「説明」について

ボックスメニューの下の部分になります。

WordPress

最後に忘れないように「メニューを保存」を押して完了です!



これでボックスメニューが設定できたと思います。

好きな場所に表示させる

ウィジェットで好きな場所に表示する

「外観」→「ウィジェット」から設定できます。

ボックスメニューウィジェットがあると思うのでそれを表示させたい場所にドラッグ&ドロップしてください。

WordPress


「メニュー名」欄で作成したメニューを選択すればOKです。


僕はサイドバーに表示してみました。

その場合、スマホだと投稿本文下に表示されます。

なかむら
なかむら

違和感もなく、気に入っています!!

投稿本文中に表示

あんまりないような気もしますが、投稿本文中にもボックスメニューを表示できます。


ショートコードを使うのが一番簡単です。




「ショートコード」を選択して

WordPress

と書けば表示されました。



仮にメニューの名前を「俺のボックスメニュー」としたなら、
“俺のボックスメニュー”と入力してください。

ボックスメニューを表示させよう!

Cocoonでボックスメニューを表示させる方法について書きました。

訪問者に親切なブログに仕上げるためにも設定しておくといいと思います。
設定するときにいろんなサイトを訪れましたが、Cocoon公式のサイトが一番わかりやすかったです。

アイコンや画像が使える「ボックスメニュー」ショートコードの使い方
アイコンフォントや画像用いて、視覚的にわかりやすいボックスタイプのメニューを表示するショートコード機能の説明です。


うなばら
うなばら

Cocoonの機能を使いこなせるようになりたい。

タイトルとURLをコピーしました