【Cocoon】ボックスメニューの設定方法｜画像のカスタマイズでブログをおしゃれに！

「ボックスメニューを設置したい」

「ボックスメニューのカスタマイズ方法は？」

「ボックスメニューの画像が表示されない、どうして？」

この記事では、そんな方に向けて、Cocoonでボックスメニューの設定方法を解説します。

この記事を読めば、あなたもボックスメニューの設置はもちろん

• カスタマイズする方法
• 画像サイズ
• 画像が表示されない対処法

をかんたんに理解できるようになります。

私も面倒で後回しにしていましたが、本記事の方法でパパッと設置できました。

どこよりも分かりやすく書いている自信がありますので、ぜひ最後まで読んでマスターしてください！

また以下の記事では、Cocoonの使い方や設定方法をブログ運営歴・公開した記事数別でまとめて紹介しています。

さっそく本題に入りましょう。

ボックスメニューの完成イメージ

ボックスメニューをカスタマイズせずに設置すると以下の画像のようになりますが、

カスタマイズした当ブログのボックスメニューは、以下の画像のようになります。

ボックスメニューを設置することで、

• 視認性が高まる
• クリック率が上がる
• ブログがおしゃれになる

などの役割を果たします。

Cocoonボックスメニューの作り方

Cocoonでボックスメニューの作り方は、下記の通りです。

ボックスメニューに設定したい5つの項目

Cocoonでボックスメニューに設定するおすすめの項目は、下記5つです。

設定する項目を考える上でのポイントは、

• ユーザーに読んでほしいページへ誘導させる
• ユーザーに他の記事を見つけやすくする

の2つになります。

ボックスメニューに設定するおすすめの項目数

Cocoonのボックスメニューに設定するおすすめの項目数は、

です。

コンテンツ上部に設置する場合

項目数を6より少ない数だと、変な余白が生まれてしまいます。

項目数を6より多い数だと、項目が2行に分かれてしまい、格好悪いです。

ですので、項目数は6にしましょう。

サイドバーに設置する場合

サイドバーに設置する場合、設定した項目が2列で表示されますが、

項目数が奇数だと右下に空白が生まれてしまいます。

ですので、空白が生まれない偶数で項目数を設定しましょう。

Cocoonボックスメニューを設置する方法

Cocoonでボックスメニューを設置する方法は、下記の通りです。

おすすめの設置場所

ボックスメニューを設置するおすすめの場所は、下記2ヵ所です。

設置する場所を考える上でのポイントは

• ユーザーの目にとまりやすいか

になります。

コンテンツ上部に設置したい場合は、代わりに

• おすすめカード

で設置するのもアリです。

Cocoonでおすすめカードの設定方法は、下の記事を参考にしてください。

Cocoonボックスメニューをカスタマイズする方法

Cocoonでボックスメニューをカスタマイズする方法は、下記の通りです。

Cocoonのボックスメニューでカスタマイズできる項目は、下記3つあります。

それぞれのやり方を詳しく解説します。

アイコン・画像を挿入する

Cocoonのボックスメニューに設定する画像は、

• アイコン
• オリジナル画像

のどちらか選びます。

アイコンを設置する

ボックスメニューにアイコンを設定したい場合は、

• Font Awesome4
• Font Awesome5

を使います。

_{＼タブの切り替え／}

3. コピーしたテキストを「CSS class (オプション)」に貼りつける

アイコンを設定完了！

オリジナル画像を設置する

ボックスメニューにオリジナル画像を設定したい場合は、

• Canva

の使用をおすすめします。

画像を作り終えたら…

1. WordPress管理画面でメディア⇒新しいメディアファイルを追加の順にクリックする

2. オリジナル画像をアップロードし、URLをクリップボードにコピーをクリックする

3. コピーしたテキストを「タイトル属性」に貼りつける

オリジナル画像を設定完了！

タイトル・サブキャプションをつける

Cocoonのボックスメニューでは、

• タイトル
• サブキャプション

を設定できます。

タイトルをつける

1. 「ナビゲーションラベル」に表示したいタイトルを入力する

タイトルを設定完了！

サブキャプションをつける

1. 「説明」に表示したいサブキャプションを入力する

サブキャプションを設定完了！

色を変える

Cocoonのボックスメニューの色を変えたい場合は、

1. WardPress管理画面で、外観⇒カスタマイズの順にクリックする

2. 追加CSSをクリックする

3. 下記コードを入力し、公開をクリックする

/************************************
** アイコンの色を変える
************************************/
.box-menu-icon{
	color: #000000;/*こちらにカラーコードを入力*/
}
/************************************
** タイトルの色を変える
************************************/
.box-menu-label{
	color: #000000;/*こちらにカラーコードを入力*/

}
/************************************
** サブキャプションの色を変える
************************************/
.box-menu-description{
	color: #000000;/*こちらにカラーコードを入力*/

}
/************************************
** 背景色を変える
************************************/
.box-menu{
	background: #000000;/*こちらにカラーコードを入力*/
}

CSSを編集する前は、必ずバックアップをとってください。エラーが出たら、復元しましょう。

色の設定完了！

カラーコードを調べる方法は、下の記事を参考にしてください。

Cocoonボックスメニューの画像サイズ

Cocoonでボックスメニューの画像サイズは

• 幅180×高さ180pxの正方形
• 幅320×高さ180pxの長方形

のどちらかをおすすめします。

アイコンを利用する場合は、画像サイズを気にする必要はありませんが、

自分で一から画像を作る場合、作るデザインが

• 横長になる⇒幅320×高さ180px
• 横長にならない⇒幅180×高さ180px

というように決めると良いですよ。

Cocoonボックスメニューの画像が表示されない原因と対処法

Cocoonでボックスメニューの画像が表示されない原因は、下記2つ考えられます。

それぞれの対処法を詳しく解説します。

URLの入力ミス

画像のURLを正しく入力しないとボックスメニューに画像は表示されないです。

URLはそのままコピペして、入力ミスがないようにしましょう。

ファイル名に日本語が入っている

画像のファイル名に日本語が入っていると文字化けしてしまい、ボックスメニューに画像が正しく表示されないこともあります。

ですので、日本語の部分を消したり、英語に直したりして、再度確認してみましょう。

まとめ：ボックスメニューで視認性UP

今回は、Cocoonでボックスメニューの設定方法を紹介しました。

ブログには、ボックスメニュー以上に

• プロフィール
• お問い合わせフォーム

の設置が必須です。

まだ、この2つを設置していない人は、下の記事もあわせて読んでください。

さらにヘッダー・フッターをカスタマイズして、より利便性の高いおしゃれなブログを作りたい人は、下の記事を参考にしてください。

また以下の記事では、その他カスタマイズ方法も紹介しています。