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

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

Cocoon サイドバーにボックスメニューを作る

私はこんな安易なことをしてもいいのでしょうか?

プー太郎
プー太郎

何のこと?

いや実は、Cocoonのボックスメニューに関する記事を2つ書いたんだけど、

サイドバーに設置するボックスメニューの設定方法をその記事の中に含めようか、

別記事にしようか悩んでいて……

プー太郎
プー太郎

それで?

ユーザビリティを考えると分けた方がいい気もするし、

しかしあまりに似たような記事になるからどうしようかと……

プー太郎
プー太郎

というか、もう書いてるよね。

( ゚д゚)ハッ!

じゃ、しょうがないね。

それでは、サイドバーに画像を使ったボックスメニューを設置する方法、いってみましょう!

プー太郎
プー太郎

アホか。

ボックスメニューに関する記事2つがこちらです↓

【Cocoon】画像や写真を使ったボックスメニューの作り方
こんにちは、ikuzo(いくぞう)です。プー太郎プー太郎です。今回作るのは、Cocoon(コクーン)のボックスメニューです。といっても通常のボックスメニューじゃございません。Cocoonのデフォルトはアイコンを使ったこのようなボックスメニュ...
【Cocoon】ボックスメニューの色や数などを変えるカスタマイズ
こんにちは、ikuzo(いくぞう)です。別記事で、画像を使ったCocoonのボックスメニューを作る方法を紹介しました。今回は公式サイトで紹介されているアイコンを使ったボックスメニューと当ブログで紹介した画像を使ったボックスメニュー、両方で使...
スポンサーリンク

ボックスメニュー用の「メニュー」までは同じ

プー太郎
プー太郎

見出しからも手抜き感がひしひし伝わってくるな……

Cocoonはこのようなアイコンを使ったボックスメニューが簡単に作れます。

Cocoonのアイコンを使ったボックスメニュー出典:Cocoon公式サイト

今回は画像使ったボックスメニューにカスタマイズして、Cocoonのサイドバーに設置する方法を紹介します。

完成するボックスメニューはこんな感じです。

サイドバーに画像が大きくなったボックスメニューが表示された

上のボックスメニューはイラストと文字で画像(ボタン)を作りましたが、写真を使ったボックスメニューも作成可能です。

画像の縦横比は自由で、画像の大きさは2列のメニューだと幅を200~300pxくらいでボタンを作るといいかと思います。

 

今回のサイドバー用ボックスメニューの作り方ですが、こんな順番で進めていきます。

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

については大変恐縮ですが、下の記事にやり方が書いてありますので、読んでからこちらの記事に戻ってきて下さい。

メニューを作るところまでは、まったく同じです

【Cocoon】画像や写真を使ったボックスメニューの作り方
こんにちは、ikuzo(いくぞう)です。プー太郎プー太郎です。今回作るのは、Cocoon(コクーン)のボックスメニューです。といっても通常のボックスメニューじゃございません。Cocoonのデフォルトはアイコンを使ったこのようなボックスメニュ...
プー太郎
プー太郎

どこまで手を抜く気だ、オッサン。

スポンサーリンク

ボックスメニューをサイドバーに設置

おかえりなさい、ボックスメニュー用の「メニュー」は完成しましたか?

では、ここからマジメにいきます。

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

「外観」→「ウィジェット」をクリック

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

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

そしてメニューを表示させるエリアを選びます。今回は「サイドバー」ですね。

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

「サイドバー」を選択して「ウィジェットを追加」を押す

「メニュー名」の中から「ボックスメニュー」(もしくは自分が決めたメニュー名)を選択して「保存」を押します。

「ボックスメニュー」を選択して「保存」を押す

これでサイドバーにボックスメニューが表示されているはずです。

Cocoonのサイドバーにボックスメニューが表示されたところ

画像が小さく表示されているので、次の章で画像を大きくします。

スポンサーリンク

ボックスメニューの画像を大きくする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はコンテンツ上部(記事の上)にボックスメニューを表示させる際に使ったコードとまったく同じです。

なのでコンテンツ上部にもボックスメニューを表示させると、同じメニューが2つできてしまいます。

コンテンツ上部とサイドバーに同じボックスメニューが表示されている状態

プー太郎
プー太郎

コンテンツ上部用とサイドバー用のメニューを2つ用意すれば、別々のボックスメニューを表示させることも可能だよ。

あとはコンテンツ上部には通常のボックスメニュー、サイドバーには画像を使ったボックスメニューを表示させるには、こちらのCSSを使って下さい。

サイドバーの画像入りボックスメニュー用↓

.nwa .box-menu{
	padding: 0;
	min-height: 0;
}

.nwa .box-menu:hover{
	box-shadow:none;
	opacity: 0.8;
} 

.nwa .box-menu-label,
.nwa .box-menu-description{
	display: none;
}

.nwa .box-menu-icon *{
	margin: 0;
	max-width: 100%;
	max-height: 300px;}

サイドバーのみ画像入りボックスメニューが表示された状態

逆にコンテンツ上部に画像を使ったボックスメニュー、サイドバーには通常のボックスメニューを表示させるには、上記コードの“.nwa”の部分を“.wwa”に変えてあげて下さい。

スポンサーリンク

ボックスメニューの列数を変える

Cocoonのサイドバーにボックスメニューを表示させると横2列になりますが、これを3列、4列に変更することも可能です。

とは言っても、サイドバーはもともと幅があるわけではないので、せいぜい3列が限界でしょうか。

サイドバーのボックスメニューを横3列にするCSSはこちらです。

.nwa .box-menu {
	width: 33.33%;
}

横3列にしたボックスメニュー

プー太郎
プー太郎

値を“25%”にするとボックスメニューが4列になります。

また“width”の値を51%以上で指定するとボックスが縦1列に並びます。

.nwa .box-menu {
	width: 60%;
	margin: 0 auto;
}

縦1列に並べたボックスメニュー

プー太郎
プー太郎

横長のボタンを作ってボックスメニューを縦1列に並べるのも面白いかもしれないね。

スポンサーリンク

サイドバーのボックスメニューに余白(隙間)を入れる

サイドバーのボックスメニューに余白(隙間)を入れるには、次のCSSを使います。

.nwa .box-menu {
	width: 47%;
	margin: 1.5%;
}

余白(隙間)を入れた2列のボックスメニュー

marginの値(1.5%の部分)を大きくすると余白も広がります。

余白を広げる場合は、そのぶん画像の大きさ(47%の部分)を小さくしてあげて下さい。

スポンサーリンク

ボックスメニューの画像をマウスオーバーで大きくする

次のCSSを使うとボックスメニューにマウスオーバー(カーソルをのせる)した際、

画像の大きさが1.1倍になります。

カーソルをのせると画像が0.8秒かけて大きくなり、メニューからカーソルを離すと0.3秒で元の大きさに戻ります。

(画像の色が薄くなる“opacity: 0.8;”は解除してあります。)

.nwa .box-menu-icon img{
	transition:0.3s all;
}

.nwa .box-menu-icon img:hover{
	transform: scale(1.1,1.1);
	transition: 0.8s all;
}

マウスオーバーでサイドバーに設置したボックスメニューの画像が大きくなるところ

画像がはみ出さずに大きくなるCSSはこちら(マウスオーバーで1.2倍になります)。

.nwa .box-menu-icon{
	overflow:hidden;	
}

.nwa .box-menu-icon img{
	transition:0.3s all;
}

.nwa .box-menu-icon img:hover{
	transform:scale(1.2,1.2);
	transition:0.8s all;
}

ボックスメニューの画像がはみ出さずに大きくなるところ

記事とはまったく関係ありませんが、上のようなGIFアニメを作る方法はこちらの記事をご覧下さいませ。

【3分で作るGIFアニメ】キャプチャから画像・文字入れの編集まで
こんにちは、ikuzo(いくぞう)です。今回はブログなどに使えるGIFアニメの作り方を紹介します。先日、当サイトの別記事で作ったGIFアニメがこちらです。作ったといってもデスクトップ上の動きをGIF形式でキャプチャ(取り込んで保存)しただけ...
スポンサーリンク

最後に

おつかれさまでした!

お気づきの方も多いと思いますが、ほぼ“.nwa”だけで1記事作ってしまいました。

今、非常に心が痛んでます。

プー太郎
プー太郎

うそつけ!

どなたかのお役に立っていれば幸いです笑

コメント