こんにちは、ikuzo(いくぞう)です。
プー太郎です。
今回作るのは、Cocoon（コクーン）のボックスメニューです。
といっても通常のボックスメニューじゃございません。
Cocoonのデフォルトはアイコンを使ったこのようなボックスメニューですが、
出典：Cocoon公式サイト
下のような画像を使ったオリジナルのボックスメニューの作り方を紹介します。
これから作るオリジナルのボックスメニュー↓
しかもブログを始めたばかりの人でも楽しみながら簡単に作れます。
アイコンを使ったボックスメニューの作り方は公式サイトにのってます。
ボックスメニューのカスタマイズのやり方は、こちらの記事をご覧ください。
ブログって楽しんでなんぼだと思いませんか？
せっかくブログを始めたのに途中で楽しめなくなったり、稼げなくてやめていく……、
そんな人が多いのはとても勿体ないと思います。
稼げないのはともかく、せっかく始めたブログなんだからワクワクしながら継続していきたいじゃないですか！
これを読んでいるあなたもきっとそう考えているはずです。
ikuzoは、そんなあなたとブログの楽しさを追求していきます。
いいからさっさと早く始めろ！
ボックスメニュー用の「ボタン」を作る
今回はこんな順番で進めていきます。
❷ ボックスメニュー用の「メニュー」を作る
❸ ボックスメニューが表示されるように設定する
まずはボックスメニュー用の「ボタン」を作りましょう（「ボタン」というのかどうか知らんけど）。
ここが一番楽しいところなので、はりきって行きましょう。
センスの見せどころだよ！
ボックスメニューのボタン（画像）を作るポイントは2つあります。
ボタンの画像サイズは横幅300～400pxくらいがおすすめ
私はいつも使っている画像編集ソフト「PhotoScape X（フォトスケープエックス）」でボタンを作りました。
PhotoScape Xは無料で使えるのにとても高性能で、画像の切り抜きやサイズ変更が簡単に行えます。
インストール方法から基本的な使い方をこちらの記事で紹介しているので、ぜひ参考にしてください。
初心者の方でもとても使いやすい無料の画像編集ソフトです。
私はボックスメニューのボタンをこんな感じで作りました。
比率5：3の無地の壁紙を用意して、
PhotoScape Xに壁紙をドラッグ＆ドロップしてから「挿入」を押します。
無地の壁紙は「かんたん無地壁紙作成」というサイトをいつも利用させてもらってます。
壁紙の縦横の比率は好みで変えてね。
「挿入」のメニューが開いている状態で、イラストと文字をドラッグ＆ドロップして壁紙の上へ重ねます。
このイラストは、イラストACというサイトで無料で使える素材をダウンロードしました。
文字は「フリーフォントで簡単ロゴ作成」というサイトで作りました。
ボタンができたら「編集」→「サイズ変更」を押します。
ボタンを任意の幅に変更して「適用」を押します。
ここではボタンの幅を300pxに変更しました。高さは比率を維持して自動で変わります。
これでボタンの完成です。
PhotoScape Xの右下にある「保存」を押したら「別名で保存」を押してファイル名を入力します。
イラストやロゴは「JPEG」よりも「PNG」の方が綺麗に保存できるよ。
こんな感じで300×180px（5：3）のボタンを6コ作りました。
私はボタンにイラストを使いましたが、写真を使ってももちろんOKです。
写真を使う場合は、
PhotoScape Xですべての写真を同じ縦横比で切り抜いてから同じサイズにリサイズすると、
同じ大きさのボタンができあがります。
ボックスメニュー用の「メニュー」を作る
次にボックスメニュー用の「メニュー」を作ります。
メニュー用の画像をアップロード
メニューを作る下準備として、いま作った画像（ボタン）をアップロードしておきます。
WordPressメニューの「メディア」→「新しいメディアファイルを追加」を押します。
ボックスメニュー用の画像をドラッグ＆ドロップでアップロードします。
アップロードしたら「URLをクリップボードにコピー」を押して、ボックスメニューに使用する全ての画像のURLをメモ帳などに保存しておきます。
メニューを作る際にこのURLが必要なんだ。
もしURLが分からなくなっても「メディア」→「ライブラリ」で画像をクリックするとURLが確認できるので心配いりません。
メニューの作成
では、ここからメニューを作っていきます。
メニューを作るには、「外観」→「メニュー」をクリックします。
「新しいメニューを作成しましょう」をクリックします。
「メニュー名」に適当な名前（名前はなんでもOK、ここでは「ボックスメニュー」にしておきます）を入れて「メニューを作成」を押します。
表示オプションの設定
右上にある「表示オプション」を押します。
たとえばカテゴリーでメニューを作りたいのであれば「カテゴリー」に、投稿（記事）でメニューを作るのであれば「投稿」にチェックを入れます。
詳細メニュー設定の「タイトル属性」には必ずチェックを入れてください。
よく分からなければ全部にチェックを入れても問題ありません。
メニュー項目を追加
次はメニューに「メニュー項目」を追加します。
たとえばボックスメニューにホーム（サイトのトップページ）を入れるのであれば「固定ページ」→「すべて表示」の「ホーム」にチェックを入れて「メニューに追加」を押します。
同じようにカテゴリーでボックスメニューを作るのであれば、メニューに入れるカテゴリーにチェックを入れて「メニューに追加」を押します。
投稿（記事）でボックスメニューを作る場合は、「投稿」の中から記事を選択して「メニューに追加」を押します。
追加したメニュー項目はこのように「メニュー構造」の中に入ります。
メニュー構造の中にあるメニュー項目はドラッグで並べ替えることが可能です。
メニュー項目の設定
そしてメニュー項目の中を設定します。
設定といっても、先ほどの画像のURLを項目の中へ貼り付けていくだけです。
メニュー項目の▼マークをクリックして、
「タイトル属性」の欄に、メモ帳などに保存した画像のURLを貼り付けます。
すべてのメニュー項目にURLを貼り付けたら「メニューを保存」を押します。
これでメニューは完成です。
ボックスメニューの「ウィジェット」の設定
ここまで来ればボックスメニューの表示まであと少しです。
メニューの「外観」→「ウィジェット」をクリックします。
左側の「利用できるウィジェット」の中から「ボックスメニュー」を探して▼マークをクリックします。
そしてメニューを表示させるエリアを選びます。
今回はグローバルメニューと記事の中間にボックスメニューを表示させるので「コンテンツ上部」に選択しました。
選択したら「ウィジェットを追加」を押します。
あとは「メニュー名」の中から「ボックスメニュー」を選択して「保存」を押します。
とりあえずですが、これでボックスメニューが表示されているはずです。
この段階ではボックスメニューの画像が小さく表示されているけど、次の章でこれを修正するよ。
ボックスメニューの画像を大きくするCSS
画像を大きく表示させるには、Cocoon（子テーマ）のスタイルシートにCSSを追記します。
メニューの「外観」→「テーマファイルエディター」をクリックします。
編集するテーマは“Cocoon Child”を選択して、これから出てくるCSSを貼り付けます。
貼り付けるCSSがこちらです。
.box-menu{
padding: 0;
min-height: 0;
}
.box-menu:hover{
box-shadow:none;
opacity: 0.8;
}
.box-menu-label,
.box-menu-description{
display: none;
}
.box-menu-icon *{
margin: 0!important;
max-width: 100%;
max-height: 300px;
}
上のCSSをコピーしてこんな感じで貼り付けたら、下にある「ファイルを更新」を押します。
これで大きな画像のボックスメニューになったと思います。
左に寄ったボックスメニューを中央に表示させる方法
今回は6列でボックスメニューを作ったので、メニューが真ん中に配置されていますが、5列以下で作るとメニューが左側に寄ります。
なぜ左に寄るかというと、Cocoonのボックスメニューは元々「6列表示」で設定されているためです。
そのためボックスメニューを5列以下にすると左に寄ってしまうんですね。
しかし下のCSSを追記すると、左に寄ったボックスメニューを真ん中に表示させることができます。
.box-menu:first-child {
margin-left: auto;
}
.box-menu:last-child{
margin-right: auto;
}
詳しいやり方は下の記事に記載してあります。
ボックスメニューのボタンとボタンの間に余白を作るやり方も書いてあるので参考にしてください。
コメント