こんにちは、ikuzo(いくぞう)です。
別記事で、画像を使ったCocoonのボックスメニューを作る方法を紹介しました。
今回はCocoonの公式サイトで紹介されているアイコンを使ったボックスメニューと
当ブログで紹介した画像を使ったボックスメニュー、
どちらでも使えるボックスメニューのカスタマイズのやり方を説明します。
ぜひ、これを読んでオリジナルのボックスメニューを作ってみてください。
アイコンを使ったボックスメニューの作り方（Cocoon公式サイト）↓
カスタマイズのやり方
まずはいつも通り、カスタマイズのやり方を軽く説明しておきます。
WordPressメニューの「外観」→「テーマファイルエディター」をクリックします。
するとスタイルシートというものが出てきます。ここへこれから出てくるCSSを貼り付けます。
右上の「編集するテーマ」は“ Cocoon Child ”を選択します。
ここが“ Cocoon Child: Stylesheet ”になっていればOKです。
CSSを貼り付けたら下の方にある「ファイルを更新」を押します。
以上がカスタマイズのやり方です。
スタイルシートは編集する前にバックアップをとっておくとエラーが起きてもすぐに元に戻せます。
CSSに慣れるまでは念のため、バックアップをとっておいてください。
バックアップはスタイルシートの中身すべてコピーして、メモ帳などに貼り付けておくだけで大丈夫です。
【Cocoon】ボックスメニューのカスタマイズ
それではCocoonのボックスメニューを変えるカスタマイズのやり方を説明します。
はじめはボックスメニューのアイコンの色を変えるカスタマイズです。
ボックスメニューのアイコンの色を変える
ボックスメニューのアイコンの色は初期状態で「サイトキーカラー」が反映されています。
※サイトキーカラーは、Cocoon設定の「全体」タブの中で設定します。
ボックスメニューのアイコンの色を変えるには、スタイルシートにこちらのCSSを貼り付けます。
.box-menu-icon{
color: #ffff00;
}
“#ffff00”は「黄色」のカラーコードです。
色は「#6桁」のカラーコードで設定します
「#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;
}
ボックスメニューの背景色を変える
ボックスメニューの背景色を変えるCSSです。
.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列で表示されるのでは？』と思われるかもしれませんが、
メニュー項目が少ない場合は下の画像のようにボックスメニューが左側に寄ってしまいます。
これは1つのボックスの幅が“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)、4列の場合は(100%/4)と書きます。
『いやいや、これじゃボックスの幅が広がりすぎ』という方はこちら。
16.66%を維持したままボックスメニューをセンターに配置できます。
.box-menu:first-child{
margin-left: auto;
}
.box-menu:last-child{
margin-right: auto;
}
任意の幅を指定してセンタリングもできます（ここでは1つのボックスを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%;
}
}
ボックスを小さくしすぎると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%を超えないようにしてください。
当然ながら、ボックス間の余白の数は「ボックスの数マイナス1」になります。
仮に合計が100%超える（もしくは限度を超える）とレイアウトが崩れてこんなふうになります。
このようにボックスメニューのレイアウトが崩れたら、ボックスや余白の幅を減らしてください。
幅599px以下のデバイスでも余白を作るには、こちらのCSSを使います。
@media screen and (max-width: 599px){
.wwa .box-menu {
width: 47%!important;
margin: 1.5%;
}
}
マウスオーバー時に画像を大きくする方法
最後に画像を使ったボックスメニューに使えるカスタマイズを紹介します。
画像を使ったボックスメニューの作り方はこちらの記事で紹介しています。
次の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;
}
もうひとつは、画像がはみ出さずに大きくなる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のボックスメニューのカスタマイズのやり方を説明しました。
紹介したカスタマイズを組み合わせて、ぜひオリジナルのボックスメニューを作成してみて下さい。
本日は最後まで読んでいただき、ありがとうございました。
コメント