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

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

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

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

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

 

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

当ブログで紹介した画像を使ったボックスメニュー両方で使えるカスタマイズのやり方を説明します。

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

 

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

スポンサーリンク

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

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

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

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

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

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

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

右の方にある「編集するテーマを選択」はリストの中から“Cocoon Child”を選択しておいて下さい。

ここが“Cocoon Child:スタイルシート”になっていればOKです。

Cocoon Child:スタイルシート

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

「ファイルを更新」を押す

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

スタイルシートをいじる前に、既存のCSSをバックアップしておくとエラーが起きてもすぐに元に戻せます。

CSSに慣れるまでは必ずバックアップをとるようにして下さい。

プー太郎
プー太郎

CSSをすべてコピーして、メモ帳などに貼り付けておくだけで大丈夫です。

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

アイコンの色を変える

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

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

Cocoon設定→「全体」タブの「サイトキーカラー」

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

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

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

“#ffff00”は「黄色」のカラーコードです。

この「#6桁」のコードを変更すると色が変わります。

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

プー太郎
プー太郎

カラーコードは大文字、小文字のどちらを使っても大丈夫です(全角文字はダメ)。

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

ボックスメニューのメニュータイトル

メニュータイトルのデフォルト色は“#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がこちらです。

.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つを変更してあげて下さい。

カラーコードを4ヶ所変更する

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

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

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

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

プー太郎
プー太郎

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

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

ボックスメニューの上下余白も変更可能です。

メニューの上下はもともと1文字分の余白がありますが、

メニューの上を2文字分、メニューの下を2.5文字分の余白へ変更しました。

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

メニューの上を2文字分、メニューの下を2.5文字分の余白へ変更

スポンサーリンク

ボックスメニューの列数を変えるカスタマイズ

ボックスメニューを記事の上で使用すると(記事の下も)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;
}

ボックスの大きさはそのままでセンタリングしたボックスメニュー

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

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

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

幅を指定しつつセンタリングしたボックスメニュー

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

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

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

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

プー太郎
プー太郎

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

スポンサーリンク

ボックスの間に余白を作るカスタマイズ

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

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

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

@media screen and (min-width: 600px){
.box-menu:last-child{
	margin-right: 0px;
}
}

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

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

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

プー太郎
プー太郎

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

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

レイアウトが崩れたボックスメニュー

もしこうなったら幅や余白のサイズを減らして下さい。

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

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

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

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

スポンサーリンク

マウスオーバー時に画像が大きくなるカスタマイズ

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

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

【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;
}

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

最後に

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

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

いいのができたら、下のゴメント欄よりご連絡下さい。

喜んで拝見しに行きます(^_^)

コメント