当サイトは広告が含まれています

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

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

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

プー太郎
プー太郎

プー太郎です。

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

 

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

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

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

 

下のような画像を使ったボックスメニューの作り方を紹介します。

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

WordPressブログ立ち上げ隊オリジナルのボックスメニュー

 

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

 

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

ボックスメニューのカスタマイズのやり方は、こちらの記事をご覧ください。

 

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

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

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

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

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

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

プー太郎
プー太郎

はいはい、先に進んで下さいな。

スポンサーリンク

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

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

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

まずはボックスメニュー用の「ボタン」を作りましょう(「ボタン」というのかどうか知らんけど)。

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

プー太郎
プー太郎

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

ボックスメニューのボタン(画像)を作るポイントは2つあります。

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

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

PhotoScape Xは無料で使えますがとても高性能で、画像の切り抜きやサイズ変更が簡単に行えます。

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

【PhotoScape X】の基本的な使い方
こんにちは、ikuzo(いくぞう)です。ブログを始めて5年になりますが、私が一番使ってきたツールは無料で使える画像編集ソフト「PhotoScape X」(フォトスケープエックス)です。「PhotoScape X」は無料版と有料版がありますが...
プー太郎
プー太郎

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

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

比率5:2の無地の壁紙を用意して、

PhotoScape Xに壁紙をドラッグ&ドロップしてから「挿入」を押します。

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

無地の壁紙をPhotoScape Xにドラッグ&ドロップする

プー太郎
プー太郎

壁紙の比率は好みで変えてね。

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

イラストと文字を壁紙の上へドロップする

私は「ココナラ」で、yapiころんさんという方にプー太郎のイラストを描いてもらいました。

出品者「yapiころんさん」のページ(ココナラ)yapiころんさんのページ

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

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

【超かんたん】ブログのロゴの作り方
こんにちは、ikuzo(いくぞう)です。「ブログを始めたけれど、ブログのロゴはどうやって作ればいいの?」と悩まれていませんか?今回は私がやったブログのロゴの作り方(無料)やイラストレーターさんにお願いして、唯一無二のロゴを作ってもらう方法を...

 

ボタンができたら「サイズ変更」します。

ボタンのサイズ変更

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

ここではボタンの幅を400pxに変更しました。高さは比率を維持して自動で変わります。

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

これでボタンの完成です。

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

ボタンを「PNG形式」で保存する

イラストや文字を使った画像は「JPEG」よりも「PNG」で保存した方が綺麗に保存できます。

 

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

完成したボックスメニューのボタン3個

私はボタンにイラストを使いましたが、写真を使ってももちろんOKです。

写真を使う場合は、

すべての写真を同じ縦横比で切り抜いてから同じサイズにリサイズすると、

同じ大きさのボタンができあがります。

PhotoScape Xで写真を切り抜く

スポンサーリンク

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

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

メニュー用の画像をアップロード

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

WordPressメニューの「メディア」→「新しいメディアファイルを追加」を押します。

「新しいメディアファイルを追加」を押す

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

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

アップロードしたら「URLをクリップボードにコピー」を押して、各画像のURLをメモ帳などに保存しておきます。

アップロードした画像の「URLをクリップボードにコピー」を押す

プー太郎
プー太郎

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

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

画像のURLを確認する方法

メニューの作成

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

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

「外観」→「メニュー」をクリック

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

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

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

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

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

表示オプションの設定

右上にある「表示オプション」を押して、

たとえばカテゴリーでメニューを作りたいのであれば「カテゴリー」に、投稿(記事)でメニューを作るのであれば「投稿」にチェックを入れます。

詳細メニュー設定の「タイトル属性」には必ずチェックを入れて下さい。

「表示オプション」で必要なものにチェックを入れる

プー太郎
プー太郎

よく分からなければ全部にチェックを入れても問題ありません。

メニュー項目を追加

次はメニューに「メニュー項目」を追加します。

たとえばボックスメニューにホーム(トップページ)を入れるのであれば「固定ページ」→「すべて表示」の「ホーム」にチェックを入れて「メニューに追加」を押します。

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

同じようにカテゴリーでボックスメニューを作るのであれば、メニューに入れるカテゴリーにチェックを入れて「メニューに追加」を押します。

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

投稿(記事)でボックスメニューを作る場合は、「投稿」の中から記事を選択して「メニューに追加」を押します。

、「投稿」の中から記事を選択して「メニューに追加」を押す

追加したメニュー項目はこのように「メニュー構造」の中に入ります。

「メニュー構造」の中に入ったメニュー項目

メニュー構造の中にあるメニュー項目はドラッグで並べ替えることが可能です。

メニュー項目の設定

そしてメニュー項目の中を設定します。

設定といっても、先ほどの画像のURLを項目の中へ貼り付けていくだけです。

メニュー項目の▼マークをクリックして、

メニュー項目の▼マークをクリック

「タイトル属性」の欄に画像のURLを貼り付けます。

「タイトル属性」の欄に画像のURLを貼り付ける

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

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

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

スポンサーリンク

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

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

メニューの「外観」→「ウィジェット」をクリックします。

メニューの「ウィジェット」をクリック

左側の「利用できるウィジェット」の中から「ボックスメニュー」を探して▼マークをクリックします。

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

そしてメニューを表示させるエリアを選びます。

今回はグローバルメニューと記事の中間にボックスメニューを表示させるので「コンテンツ上部」に選択しました。

選択したら「ウィジェットを追加」を押します。

ボックスメニューを表示させる場所(コンテンツ上部)を選択

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

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

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

サイトにボックスメニューが表示された

プー太郎
プー太郎

この段階では画像が小さくてメニューが左に寄っているけど、次の章からこれを修正していくよ。

スポンサーリンク

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

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

初めての方もいらっしゃると思いますので、今回もスタイルシートの編集方法をのせておきます。

メニューの「外観」→「テーマファイルエディター」をクリックします。

WordPressの「テーマファイルエディター」をクリック

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

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;
	max-width: 100%;
	max-height: 300px;
}

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

スタイルシートに貼り付けたボックスメニュー用のCSS

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

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

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

スポンサーリンク

ボックスメニューを中央に表示させるCSS

次に左に寄っているボックスメニューを中央に表示させるCSSです。

なぜ左に寄っているかというと、Cocoonのボックスメニューは「6列表示」で設定されているからです。

そのためボックスメニューを5列以下にすると左に寄ってしまうんですね。

しかし下のCSSをスタイルシートに追記すると、左に寄ったボックスメニューを真ん中に表示させることができます。

.box-menu:first-child {
    margin-left: auto;
}

.box-menu:last-child{
    margin-right: auto;
}

中央に配置したボックスメニュー

ボタンとボタンの間に余白を入れるにはこちらのCSSを使います(横幅600px以上のデバイスのみ余白が入ります)。

@media screen and (min-width: 600px){
.wwa .box-menu{
	margin-right: 4.5%;
}
}

ボタンとボタンの間に余白を入れたボックスメニュー

あとはボックスの大きさを変えるなどして、最終的にはこのようなボックスメニューにしました。

完成したボックスメニュー

ボックスメニューの細かい調整方法はこちらの記事に書きましたので、ぜひご覧になって下さい。

【Cocoon】ボックスメニューの色や数などを変えるカスタマイズ
こんにちは、ikuzo(いくぞう)です。別記事で、画像を使ったCocoonのボックスメニューを作る方法を紹介しました。今回は公式サイトで紹介されているアイコンを使ったボックスメニューと当ブログで紹介した画像を使ったボックスメニュー、両方で使...

 

本日は最後まで読んでいただき、ありがとうございました(^_^)

コメント