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

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

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

別記事で、画像を使ったCocoonのボックスメニューを作る方法を紹介しました。

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

 

今回は公式サイトで紹介されているアイコンを使ったボックスメニュー

当ブログで紹介した画像を使ったボックスメニュー

両方で使えるカスタマイズのやり方を説明します。

ぜひ、これを読んでオリジナルのボックスメニューを作ってみて下さい。

 

アイコンを使ったボックスメニューの作り方(Cocoon公式サイト)↓

スポンサーリンク

【Cocoon】ボックスメニューのカスタマイズ

「Cocoonのカスタマイズは初めてやる」という方もいらっしゃると思うので、

まずはカスタマイズのやり方を軽く説明しておきます。

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

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

するとスタイルシートというものが出てくるので、そこへこれから出てくる CSS を貼り付けます。

CSSを貼り付ける場所(スタイルシート)

Cocoonの場合、右上の「編集するテーマ」は“ Cocoon Child ”を選択します。

ここが“ Cocoon Child: Stylesheet ”になっていればOKです。

“ Cocoon Child: Stylesheet ”になっていればOK

CSSを貼り付けたら下にある「ファイルを更新」を押します。

CSSを編集したら最後に「ファイルを更新」を押す

以上がカスタマイズのやり方です。

スタイルシートは編集する前にバックアップをとっておくとエラーが起きてもすぐに元に戻せます。

CSSに慣れるまでは念のためにバックアップをとるようにして下さい。

プー太郎
プー太郎

バックアップはスタイルシートの中身すべてコピーして、メモ帳などに貼り付けておくだけで大丈夫です。

CSSは英数字、記号、スペースのいずれも半角文字を使って下さい。
全角文字がひとつでも入るとCSSは効かなくなります。

アイコンの色を変える

それでは始めましょう。最初はボックスメニューのアイコンの色を変えるカスタマイズです。

アイコンの色はデフォルトで、Cocoon設定→「全体」タブの「サイトキーカラー」が反映されています。

ボックスメニューのアイコンの色は「サイトキーカラー」が反映されている

アイコンの色を変えるには、スタイルシートにこちらのCSSを貼り付けます。

.box-menu-icon{
	color: #ffff00;
}

アイコンの色を黄色に変えたボックスメニュー

色は「#6桁」のカラーコードで設定します(“#ffff00”は「黄色」のカラーコードです)。

「#6桁」はカラーコード表などで探して下さい。

プー太郎
プー太郎

カラーコードは必ず半角文字を使用して下さい。全角文字を使用するとCSSが効かなくなります。

メニュータイトルの色と大きさを変える

ボックスメニューの「メニュータイトル」と「サブキャプション」

アイコンの下にある「メニュータイトル」はデフォルトの色が“#777777”、大きさは14pxです。

変更するCSSがこちらです。

.box-menu-label{
	color: #ff0000;
	font-size: 18px;
}

メニュータイトルの色と大きさを変更

プー太郎
プー太郎

“#ff0000”は赤のカラーコードです。文字の大きさは“18”の部分を変えて下さい。数字を大きくすると文字が大きくなるよ。

サブキャプションの色と大きさを変える

メニュータイトルの下にある「サブキャプション」のCSSがこちら。

デフォルトの色はタイトルと同じ“#777777”で、大きさが10pxです。

.box-menu-description{
	color: #ff0000;
	font-size: 20px;
}

サブキャプションの色と大きさを変更

ボックスメニューの背景色を変える

ボックスメニューの背景色を変えることもできます。

.box-menu{
	background: #ff0000;
}

背景色を変えたボックスメニュー

タイトルとサブキャプションの表示をやめる

タイトルとサブキャプションの表示をやめて、アイコンだけ残すCSSです。

『CSSを使わなくても、メニュー項目の「ナビゲーションラベル」と「説明」の欄を空白にすればいいのでは?』と思われかもしれませんが、

「ナビゲーションラベル」を空白にするとメニュー自体が消えてしまいます。

タイトルを空白にするとメニューが消える

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

タイトルとサブキャプションを消したボックスメニュー

アイコンだけ残してタイトルを消す人はあまりいないと思いますが、

ボックスメニューに画像だけを表示させる場合は、このCSSが必要です。

マウスオーバー時の枠の色を変える

ボックスメニューにカーソルを重ねるとボタンの周りには線が現れますが、線の色を変えるCSSがこちらです。

この線もデフォルトはキーカラーが採用されています。

.box-menu:hover{
	box-shadow: inset 2px 2px 0 0 #ff0000,
	2px 2px 0 0 #ff0000,
	2px 0 0 0 #ff0000,
	0 2px 0 0 #ff0000;
}

ホバー時の枠の色を変更

プー太郎
プー太郎

カスタマイズする際はカラーコードを4つとも変更して下さい。

マウスオーバー時の枠をやめる

マウスオーバー時の線を消して、代わりにボックスの色を薄くするCSSです。

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

マウスオーバーでボックスメニューの色が薄くなった

プー太郎
プー太郎

“0.8”の部分を“0.7”や“0.6”にするとさらに薄くなるよ。

ボックスメニューの上下の余白を調整

ボックスメニューの上下にある余白部分も調整可能です。

たとえばメニューの上に2文字分、メニューの下に2.5文字分の余白を作るCSSがこちら。

.content-top{
	margin-top: 2em;
	margin-bottom: 2.5em;
}

ボックスメニューの上下の余白を変更

スポンサーリンク

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

ボックスメニューを記事の上や下で使用すると6列で表示されますが、

これを3列や4列など、任意の列数に変えることも可能です。

単純に『メニュー項目の数を4つにすれば4列で表示されるのでは?』と思われるかもしれませんが、

それだとボックスメニューが左側に寄ってしまいます。

左側に寄ったボックスメニュー

これはボックスの幅が“16.66%”とあらかじめ指定されているからです。

これを解消するには、ボックスメニューを3列にしたい場合は100%を3で割った33.33%を、

4列の場合は4で割った25%をCSSに追記します。

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

中央に均等に表示されたボックスメニュー

ちなみに下の書き方でもOKです。この書き方ならいちいち計算しなくてもいいですね。

@media screen and (min-width: 600px){
.wwa .box-menu{
	width: calc(100%/4);
}
}
プー太郎
プー太郎

3列の場合は(100%/3)にしてね。

『いやいや、これじゃボックスの幅が広がりすぎ』という方はこちら。

16.66%を維持したままボックスメニューをセンターに配置できます。

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

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

大きさを維持したまま中央に寄せたボックスメニュー

任意の幅を指定してセンタリングもできます(ここでは22.5%に指定)。

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

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

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

幅を指定しつつ中央に寄せたボックスメニュー

スマホのような幅599px以下のデバイスでは、ボックスメニューは2列表示に変わります。

これを3列にするには次のCSSを使って下さい。

@media screen and (max-width: 599px){
.wwa .box-menu {
	width: 33.33%;
}
}

スマホでのボックスメニューの表示を2列から3列に変更

プー太郎
プー太郎

ボックスを小さくしすぎるとGoogleから「モバイルフレンドリーではありません!」って言われるから注意してね(笑)

スポンサーリンク

ボックスの間に余白を作る方法

次はボックスの間に余白を入れてみましょう。

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

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

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

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

ボタンの間に余白を設けたボックスメニュー

このCSSを使う際は「ボックスの幅(%)×ボックスの数」と「余白の幅(%)×余白の数」の合計が100%を超えないようにして下さい。

ボックスメニューの幅と余白を調整するCSS

プー太郎
プー太郎

余白の数は「ボックスの数マイナス1」で考えてね。

100%超える(もしくは限度を超える)とレイアウトが崩れてこんなふうになります。

幅が100%を超えてレイアウトが崩れたボックスメニュー

もしこうなったらボックスや余白の幅を減らして下さい。

幅599px以下のデバイスでも余白を作るには、こちらのCSSを使います。

@media screen and (max-width: 599px){
.wwa .box-menu {
	width: 47%!important;
	margin: 1.5%;
}
}

間に余白を入れたボックスメニュー(スマホ表示)

スポンサーリンク

マウスオーバー時に画像を大きくする方法

最後に画像を使ったボックスメニューに使えるカスタマイズを紹介します。

画像を使ったボックスメニューの作り方はこちらの記事で紹介しています。

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

 

次のCSSを使うとマウスオーバー時(カーソルをのせた時)に画像の大きさが1.1倍になります。

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

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

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

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

マウスオーバーで1.1倍の大きさになるボックスメニュー

もうひとつは、画像がはみ出さずに大きくなるCSSです(1.2倍)。

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

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

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

マウスオーバーではみ出さずに大きくなるボックスメニュー

スポンサーリンク

最後に

いかがだったでしょうか。

今回紹介したカスタマイズを組み合わせて、ぜひオリジナルのボックスメニューを作成してみて下さい。

当サイトでは、他にもCocoonのカスタマイズのやり方を紹介しています。

そちらの記事も必要があれば読んでみて下さい。

本日は最後までお付き合いいただき、ありがとうございました。

コメント