【Cocoon】画像を使ったボックスメニューの作り方

Cocoon 画像を使ったボックスメニュー Cocoon

こんにちは、ikuzo(いくぞう)です。

プー太郎
プー太郎

ブー太郎です。

今回作るのはCocoon(コクーン)のボックスメニューです。

 

といっても通常のボックスメニューじゃございません。

Cocoonのデフォルトはアイコンを使ったこんな感じのボックスメニューですが、

Cocoonのデフォルト↓

Cocoonのデフォルトのボックスメニュー出典:Cocoon公式サイト

 

ikuzoblogでは、画像を使ったオリジナルのボックスメニューを作ります。

これから作るオリジナルのボックスメニュー↓

ikuzoblogオリジナルのボックスメニュー

 

しかもブログを始めたばかりの人でも楽しみながら簡単に作れる方法を紹介します。

たぶんこれは、やってる人もまだ少数のカスタマイズだと思います。

プー太郎
プー太郎

イラストだけじゃなく写真でも作れるよ。

この記事を見てやる人が増えてくれると嬉しいな。

 

アイコンを使ったボックスメニューの作り方は公式サイトにのってます。

 

ブログって楽しんでなんぼだと思いませんか?

せっかくブログを始めたのに途中で楽しめなくなったり、稼げなくてやめていく…、

そんな人が多いのは、とても勿体ないと思います。

稼げないのはともかく、せっかく始めたブログなんだからワクワクしながら継続していきたいじゃないですか!

これを読んでいるあなたもきっとそう考えているはずです。

ikuzoblogは、そんなあなたとブログの楽しさを追求していきます。

プー太郎
プー太郎

はい、はい、さ、いこか。

スポンサーリンク

ボックスメニュー用の「ボタン」を作ろう

今回はこんな順番で進めていきます。

ボックスメニュー用の「ボタン」を作る
ボックスメニュー用の「メニュー」を作る
ボックスメニューが表示されるように設定する

まずはボックスメニューに使用するボタンを作りましょう。

(ボタンというのか、どうか知らんけど…)

ここが一番楽しいところなので、はりきって行きましょう。

プー太郎
プー太郎

センスの見せどころだよ!

ボタンを作るポイントは2つあります。

 ボタンはすべて同じ大きさで作る
 ボタンの横幅は300~400pxくらいがおすすめ

私はいつも使っている「PhotoScape X(フォトスケープエックス)」でボタンを作りました。

PhotoScape Xは無料(PRO版は有料)ですがとても高性能で、

画像の切り抜きやサイズ変更が簡単に行えます。

インストール方法から基本的な使い方をこちらの記事で紹介しているので、ぜひ参考にして下さい。

【PhotoScape X】の基本的な使い方
プー太郎
プー太郎

初心者の方でもとても使いやすい画像編集ソフトです。

 

ボックスメニューのボタンはこんな感じで作りました。

無地の壁紙(5:3)を用意して、PhotoScape Xにドラッグ&ドロップして「挿入」を押します。

無地の壁紙は「かんたん無地壁紙作成」というサイトをいつも利用させてもらってます。

無地の壁紙(5×3)をPhotoScape Xにドラッグ&ドロップして「挿入」を押す

「挿入」のメニューが開いている状態で、イラストと文字を同じくドラッグ&ドロップして壁紙の上へ重ねます。

壁紙にイラストと文字を重ねる

ここで使用したイラストは「イラストAC」(無料で商用利用もOK)で見つけたのものを、

文字は「フリーフォントで簡単ロゴ作成」というサイトで作りました。

文字(ロゴ)の作り方はこちらの記事を参考にして下さい。

ブログのロゴを作ってみよう!作成からCocoonの設定方法までを解説

 

「編集」→「サイズ変更」を押します。

PhotoScape Xの「編集」→「サイズ変更」を押す

任意の幅に変更して「適用」を押します。

(ここでは幅を300pxに変更しました。高さは比率を維持して自動で変わります。)

ボタンを任意の幅に変更して「適用」を押す

右下にある「保存」を押したら「別名で保存」を押してファイル名を入力しましょう。

「ホーム」用のボタンなのでファイル名は“home.png”にしました。

PNGでボックスメニュー用の画像を保存

イラストや文字を使った画像を保存するには「JPEG」よりも「PNG」がおすすめです。

理由はこちらの記事に書いてあるので、興味のある方は読んでみて下さい。

【WordPress】ブログの画像を圧縮する方法!JPEGとPNGの違いも比較

 

こんな感じで300×180px(5:3)のボタンを6コ作りました。

完成したボックスメニュー用のボタン6コ

私は壁紙とイラストを使いましたが、もちろん写真を使ってもOKです。

写真を使う場合は、すべての写真を同じ縦横比で切り抜いてから、

同じサイズにリサイズすると、同じ大きさのボタンができあがります。

PhotoScape Xで写真を切り抜くところ

スポンサーリンク

ボックスメニュー用の「メニュー」を作ろう

次にボックスメニュー用の「メニュー」を作りましょう。

画像をアップロード

メニューを作る下準備として、いま作った画像(ボタン)をアップロードしておきます。

ダッシュボードの「メディア」→「新規追加」をクリックします。

WordPressのダッシュボード→「メディア」→「新規追加」をクリック

ボックスメニュー用の画像すべてをドラッグ&ドロップします。

ボックスメニュー用のボタン6コをアップロード

アップロードしたら画像の「編集」を押しましょう。

アップロードした画像の「編集」を押す

「保存」の欄にファイルのURLがあるので、それをコピーしてメモ帳などに保存しておいて下さい。

※「URLをクリップボードにコピー」をクリックでコピーできます。

「URLをクリップボードにコピー」を押す

プー太郎
プー太郎

メニューを作るのに、このURLが必要なんだよ。

URLがもし分からなくなっても「メディア」→「ライブラリ」でファイル名をクリックするとURLが確認できるので心配いりません。

「メディア」→「ライブラリ」のファイル名

メニューの作成

では、ここからメニューを作っていきます。

メニューを作るには、ダッシュボードの「外観」→「メニュー」をクリックします。

ダッシュボードの「外観」→「メニュー」をクリック

「新しいメニューを作成しましょう」をクリックします。

「新しいメニューを作成しましょう」をクリック

「メニュー名」に適当な名前(名前はなんでもOK、ここでは「ボックスメニュー」にしておきます)を入れて「メニューを作成」をクリックします。

メニュー名に「ボックスメニュー」と入れて「メニューを作成」をクリック

※「メニュー設定」の欄は、すべてチェック不要です。

スポンサーリンク

表示オプションの設定

右上にある「表示オプション」を押して、このようにチェックを入れて下さい。

表示オプションでチェックを入れる箇所

今回は「固定ページ」「カテゴリー」「タイトル属性」にチェックがあれば本当はOKですが、

アイコンを使ってボックスメニューを作る際に必要なものにも一応チェックを入れておきました。

プー太郎
プー太郎

いっぱいチェックを入れても特に支障はないからね。

メニュー項目を追加

次はメニューに「メニュー項目」を入れましょう。

ここでは「ホーム」と「カテゴリー」5つ、合計6つの「メニュー項目」を入れます。

「ホーム」と「カテゴリー」以外にも、

「特定の記事」や「外部リンク」などをボックスメニューに加えることも可能です。

 

編集するメニューは「ボックスメニュー」を選択、

「メニュー項目を追加」の「固定ページ」をクリックして「すべて表示」を選択、

「ホーム」に チェックを入れて「メニューに追加」を押します。

「ホーム」にチェックを入れて「メニューに追加」をクリック

次に「カテゴリー」をクリックして「すべて表示」を選択、

ボックスメニューに入れるカテゴリーすべてに チェックを入れたら「メニューに追加」をクリックします。

カテゴリー5つにチェックを入れて「メニューに追加」をクリック

これでボックスメニューに入れる項目がすべて「メニュー構造」に入りました。

「メニュー構造」にボックスメニューに入れる項目がすべて入った

項目はドラッグして好きな順番に並べ替えて下さい。

メニュー項目の設定

ここからはメニュー項目の中を設定します。

設定といっても、さきほどコピーしたURLを項目の中へ貼り付けていくだけです。

メニュー構造の中にある「ホーム」をクリックします。

メニュー構造の中にある「ホーム」をクリック

「タイトル属性」の欄に「ホーム」用に作った画像のURLを貼り付けます。

「ホーム」用に作った画像のURLを貼り付け

同じように各カテゴリーの中にもURLを貼り付けていきます。

各カテゴリー項目へ画像のURLを貼り付け

すべて貼り付けたら「メニューを保存」を押します。

「メニューを保存」を押す

これでメニューは完成です。

スポンサーリンク

ボックスメニューの「ウィジェット」の設定

ここまで来ればボックスメニューの表示まであと少しです。

ダッシュボードの「外観」→「ウィジェット」をクリックします。

ダッシュボードの「外観」→「ウィジェット」をクリック

左側の「利用できるウィジェット」の中から「ボックスメニュー」を探し、

メニューを表示させたいエリアに「ボックスメニュー」をドラッグ&ドロップします。

今回はグローバルメニューと記事の中間にボックスメニューを表示させるので「コンテンツ上部」にドラッグ&ドロップで移動させます。

「ボックスメニュー」のウィジェットを「コンテンツ上部」に移動

あとはボックスメニューの「メニュー名」の中から「ボックスメニュー」を選択して「保存」を押します。

「メニュー名」の中から「ボックスメニュー」を選択して「保存」を押す

とりあえずですが、これでボックスメニューがトップページに表示されているはずです。

トップ画面にボックスメニューが表示された

本来はアイコンが表示される部分に画像が小さく表示されていますが、次の章でこの画像を大きくしていきます。

スポンサーリンク

ボックスメニューの画像を大きくするCSS

画像を大きく表示させるには、Cocoon(子テーマ)のスタイルシートにCSSを追記します。

CSSをいじったことのある方はご存知だと思いますが、

初めての方もいらっしゃると思いますので今回もやり方をのせておきます。

ダッシュボードの「外観」→「テーマエディター」をクリックします。

ダッシュボードの「外観」→「テーマエディター」をクリック

編集するテーマは“Cocoon Child”を選択して、黄色の枠の部分にこれから出てくるCSSを貼り付けます。

“Cocoon Child”を選択して、枠の部分にCSSを貼り付ける

プー太郎
プー太郎

編集するテーマは“Cocoon”を選択しないように気をつけてね。

貼り付ける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;
	max-width: 100%;
	max-height: 300px;}

 

上のCSSをコピーしてこんな感じで貼り付けたら、一番下にある「ファイルを更新」を押します。

ボックスメニューをカスタマイズするCSSをスタイルシートに貼り付けた

CSSの編集になれていない人は、編集前に必ずCSSのバックアップをとりましょう。既存のCSSをコピーしてメモ帳などに貼り付けておくだけでOKです。

画像を使ったボックスメニューの完成

これでボックスメニューのボタンが大きな画像になったと思います。

大きな画像になったボックスメニューのボタン

ボックスメニューを記事の上に設置すると、600px以上のデパイス(PCなど)では横6列、

599px以下のデバイス(スマホなど)では横2列に表示されます。

スマホ表示(599px以下)↓

スマホ表示のボックスメニュー

注:ikuzoblogでは1023px以下のデバイスでボックスメニューは消えるように設定してあります

 

また、ボックスメニューはサイドバーにも設置可能です。

サイドバーに入れるには、作成したボックスメニューのウィジェットをサイドバーエリアにドラッグ&ドロップして下さい。

ボックスメニューの上にタイトルを表示させることも可能です(タイトル部分を空白にするとタイトルは表示されません)。

メニューをサイドバーウィジェットにドラッグ&ドロップ

ボックスメニューをサイドバーに表示

サイドバーに設置する方法はこちらの記事をご覧になって下さい。

【Cocoon】サイドバーに画像入りのボックスメニューを設置!

 

他に変更した箇所ですが、

デフォルトではボックスメニューにマウスオーバーするとボタンの周りに線が表示されますが、

この線を消してボタンの色が薄くなるように設定しました。

マウスオーバー時に枠線を消して画像の色が薄くなるように設定した

これ以外のカスタマイズは別記事にしてあります。

【Cocoon】ボックスメニューの色や数などを変えるカスタマイズ

 

カスタマイズの記事にはボックスの間に余白を入れる方法などを書きました。

ボックスメニューを細かく設定したい方は読んでみて下さい。

通常のアイコンを使ったボックスメニューのカスタマイズ方法ものせてあります。

 

今回の記事を読まれて「いい感じの画像入りボックスメニューができた!」という方は、

是非下のコメント欄よりご一報下さい。

私も見に行きますし、ご希望があればこちらの記事の中でも紹介したいと思います。

プー太郎
プー太郎

ぜひご連絡ください。

今回は以上です。おつかれさまでした。

コメント