【Cocoon】ヘッダーモバイルボタン（スマホメニュー）をカスタマイズ

Cocoonのいいところ。それは「とても便利」なところ。

他のテーマは使ったことがないので分かりませんが、Cocoonは今まで「やりたいけどできない」ことは殆どありませんでした。

たとえば、これです。スマホのメニューが出てきたり、隠れたりするやつ。

ブログを始めたころは「いいなぁー、でもCocoonは無料だから、きっとないんだろうなー」と勝手に思ってたら、ある日いきなり発見。

…あるんだ。でも、自分としてはカスタマイズしたくなるレベル。

そして最終的にこうやって記事にできたり自分自身の勉強になるのだから、それが「とても便利」な理由です（笑）

今回はスマホのメニュー（ヘッダーモバイルボタン）をカスタマイズしてみました。

デフォルトのヘッダーモバイルボタン

Cocoonの出たり隠れたりするメニューは「ヘッダーモバイルボタン」といいます。

ヘッダーモバイルボタンを使う、使わないかは「Cocoon 設定」の「モバイル」で決めます。

 

そのヘッダーモバイルボタンを表示させてみると、

 

Σ(ﾟДﾟ)色がない!!

そうなんです。ヘッダー色が反映されるのかと思ったら、別物のようですね。

「検索」と「メニュー」の間には「ロゴ」を入れてありますが、当ブログのロゴは白なので、背景に埋もれて見えない状態です。

※メニュー項目の入れ方は、のちほど説明します。

今回のカスタマイズ内容

今回のカスタマイズ内容ですが、

 

主な変更点としては、

あとはメニューボタンを押すと左から出てくるメニューを、右から出るようにしました。

なぜなら、右にメニューボタンがあるのに、左からメニューが出てくるのは変だから。

左にメニューボタンを配置してもいいのですが、メニューボタンは右側にしたかったので…。

そしてこれらをカスタマイズする前に、まずは下準備（メニューの作成など）が必要です。

ヘッダーモバイルボタンのメニュー作成

まずはヘッダーモバイルボタンに表示するメニューを作成しましょう。

メニューは左から「検索」「ロゴ」「メニュー（グローバルナビメニュー）」の順番にしました。

メニューの表示オプション

WordPressの「外観」→「メニュー」へ進みます。

 

「表示オプション▼」を押して

 

今回は「カスタムリンク」に  チェックが入っていればOK。

 

「検索」や「メニュー」のアイコンを変えたければ下の「CSSクラス」にも  チェックを入れておきましょう。

アイコンの変え方は公式サイトにのってますので、ここでは省略します。

メニューの作成

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

②任意のメニュー名を入力（ここでは「スマホヘッダーメニュー」にしました）。

③「メニューを作成」をクリック。

（初めてメニューを作る方に①はありません。②→③と進んで下さい。）

 

続いてカスタムリンクのURLに「#search」、リンク文字列に「検索」と入れて「メニューに追加」を押します。

同じようにURL「#logo」、文字列「ロゴ」※で「メニューに追加」をクリック。

 ヘッダーロゴの作成方法

ブログのロゴを作ってみよう！作成からCocoonの設定方法までを解説

ikuzoblog.com

 

この記事を書いた後で、ヘッダーモバイルボタンのロゴはイラストのないものに変更しました。

PCとスマホでロゴを使い分けるやり方は、こちらをご覧下さい。

 

さらにURL「#menu」、文字列「メニュー」で「メニューに追加」をクリック。

 

デフォルトで「#menu」は「グローバルナビメニュー」の内容が表示されます。

 

 グローバルナビメニューの作り方

【Cocoon】グローバルナビメニューの設定方法とカスタマイズ

ikuzoblog.com

 

グローバルナビメニューを設定されていない方や、他のメニューを表示させたい方は「モバイルスライドインメニュー」という専用メニューを作成することもできます。

 

「ホーム」など、メニュー項目のURLコマンドは他にもあります。公式サイトのこちらの記事にコマンド一覧が掲載されています。

 

リンク文字列は「メニュー」→「MENU」など、お好みのものに変えて下さい。

メニュー項目はドラッグで順番の変更も可能です。

 

最後に「ヘッダーモバイルボタン」に  チェックを入れて「メニューを保存」を押せばメニューの完成です。

 

Cocoonの設定

メニューが完成したので、あとはCocoonの設定を済ませれば、ヘッダーモバイルボタンが表示されます。

「Cocoon 設定」の「モバイル」タブをクリック。

 

モバイルメニューの「ヘッダーモバイルボタン」を選択します。

フッターモバイルボタンも表示する場合は「ヘッダー・フッターモバイルボタン」を選択して下さい。

フッターモバイルボタンとは、これですね。

 

モバイルボタンの固定表示：画面上にヘッダーモバイルボタンが固定表示されます（スクロールしても画面から消えません）。固定したままがよければ  チェックを入れて下さい。

サイトヘッダーでロゴを表示する：ヘッダーモバイルボタンと併用するとヘッダーロゴが2重になるので、このチェックは外しておきましょう。

モバイルボタン時コンテンツ下の～：スマホで見た際に、記事の下にサイドバーを表示させるか、しないかです。サイドバーを表示させてヘッダーモバイルボタンにも「#sidebar」（サイドバー）を入れるとサイドバーが重複するので、設定できるようになっているのだと思います。

 

設定が完了したら「変更をまとめて保存」を押して下さい。

これでスマホにヘッダーモバイルボタンが表示されているはずです。

ヘッダーモバイルボタンをカスタマイズ

ここから、ヘッダーモバイルボタンのカスタマイズについて説明していきます。

（以下、2020年7月18日追記）

実はこのヘッダーモバイルボタン、使用しているスキンによって色が変化します。

私はスキンを「なし」に設定していたため、ヘッダーモバイルボタンの背景色はずっと「白」だと思っていました。

しかし、この記事を書いた後に「COLORS」というスキンを使用されている方から、

「私のヘッダーには色がついてます！」というありがたいコメントをいただき、そこでようやく気がつきました。

 

コメントをいただいたのをきっかけに、「73」あるCocoonのスキン（2020年7月現在）すべてを検証してみたところ、

色のついた一部のスキンで追加のCSSが必要ということが判明したので、スキン別の対応策を追記しました。

文字色と背景色を変更

まずは文字色と背景色を変更しましょう。

「スタイルシートは編集したことがない」という方のために、もちろん今回もやり方を最初から説明させていただきます。

「外観」→「テーマエディター」をクリック。

 

このスタイルシートにCSSを書き込んでカスタマイズしていきます。

編集するテーマは「Cocoon Child」を選択して下さい。

下の画像のように「Cocoon Child: スタイルシート」になっていればOKです。

文字色と背景色を変えるCSSはこちら。

/*ヘッダーの文字と背景の色を変える*/
.search-menu-button.menu-button,
.navi-menu-button.menu-button{
	background-color: #1e7cd1;
	color: #FFFFFF;
}

.logo-menu-button.menu-button{
	background-color: #1e7cd1;
}

 

上のCSSをコピーしてスタイルシートに貼り付けます。

/*ヘッダーの文字と背景の色を変える*/の部分は、あとで何のCSSか一目でわかるので一緒に貼り付けておくと便利です。その部分は省略しても問題ないです。

CSSを貼る場所は上の画像のように「子テーマ用のスタイルを書く」の直後か、もしくは一番下が無難かと思います。

文字色と背景色は、この部分を変えて下さい。

 

ヘッダー色をこれから探す方は、こちらのサイトが役に立つと思います。

HTMLカラーコード

HTMLカラーコードでは、ウェブサイトで使用するHTML のカラーを探すためのツールを無料で提供しています。HTMLカラーチャートとHTMLカラーピッカーは、色探しの作業を手軽にしてくれる素晴らしいツールです。

html-color-codes.info

 

カラーコードのローマ字は大文字と小文字のどちらでも大丈夫です。

英数字・記号・スペースは、すべて半角文字にして下さい。

全角文字を使うと、CSSが効かなくなります。

スキン別の対応策

「カラフルライン」（hiroakiさん作）というスキンを使用している方は、さきほどのCSSを使っても背景色が変わらないと思います。

その場合、背景色のコード（#1e7cd1の部分）と「;」（セミコロン）の間に「!important」を入れて下さい。

 

「COLORS」（わいひらさん作）を使っている方は、こんなふうにロゴの部分だけ色が変わりません。

 

以下のCSSを追加して、対応して下さい。（ヘッダーロゴを設定されてない方も、これを使って下さい。）

/*ヘッダーの文字と背景の色を変える追加CSS*/
.menu-button-in{
	color: #FFFFFF!important;
	background-color: #1e7cd1!important;
}

こちらも文字色と背景色は、ご自身の色に変更して下さい。

 

「Season」（ぽんひろさん作）は、ロゴの左右に破線が入ります。

 

「破線はいらない」という方は、次のCSSで消去できます。

/*ヘッダーの破線を消す*/
.menu-button{
	border: none!important;
}

 

「Bizarre-food」（takasakiさん作）は、リンク文字列が「#AAAAAA」（グレー）になってしまいます。

 

こちらのCSSで変更できます。

/*リンク文字列色の変更*/
.menu-caption{
	color: #FFFFFF!important;
}

 

以上で、文字色と背景色が変化したヘッダーが表示されていると思います。

ヘッダーモバイルボタンの高さを変更

ヘッダーモバイルボタンの高さはデフォルトで「50px」です。

さきほどのCSSにヘッダーの高さを変えるCSSを追加しました。

/*ヘッダーの色と高さを変える*/
.search-menu-button.menu-button,
.navi-menu-button.menu-button{
	background-color: #1e7cd1;
	color: #FFFFFF;
	height: 55px;
}

.logo-menu-button.menu-button{
	background-color: #1e7cd1;
	height: 55px;
}

 

ほんの僅かですが「50px」を「55px」に変更してます。

数字を大きくすると、ヘッダーが太くなります。好みで数字を変えてみて下さい。

さっきより、ほんの少し太くなっているのがお分かりいただけるでしょうか。

「検索」「メニュー」ボタンの位置を調整

ヘッダーの高さを増やしたら「検索」と「メニュー」ボタンの位置が上気味になったので、若干下げたいと思います。

「検索」と「メニュー」ボタンを下げるCSSを追加しました。

/*ヘッダーの色と高さ、アイコンの位置を調整*/
.search-menu-button.menu-button,
.navi-menu-button.menu-button{
	background-color: #1e7cd1;
	color: #FFFFFF;
	height: 55px;
	padding-top: 8px;
}

.logo-menu-button.menu-button{
	background-color: #1e7cd1;
	height: 55px;
}

 

数字を大きくすると「検索」と「メニュー」の位置が下がります。

これも僅かな違いですが、見比べてみて下さい。

ロゴの大きさを変更

ロゴの大きさを調整するCSSも書いておきますので、必要でしたらお使い下さい。

（幅が768px以下のデバイスで変更になります。）

/*768px以下でロゴの大きさ変更*/
@media screen and (max-width: 768px){
img.site-logo-image{
	width: 140px;
	margin: 2px auto 0;
}
}

 

「140px」の部分でロゴの大きさを調整（数字が大きいほどロゴが大きく）して、「2px」の部分でロゴの高さ（数字が大きいほどロゴが下へ）を調整します。

 

スライドインメニューをカスタマイズ

ヘッダーモバイルボタンにカスタムリンクで「#menu」を設定するとスライドインメニューは左から出てきますが、これを「右から」に変更します。

スライドインメニューもデフォルトは「白」なので、背景色も変更しました。

/*スライドインメニューを右から*/
.navi-menu-content{
	left: auto;
	right: 0;
	background-color: #1e7cd1;
	transform: translateX(101%);
}

さらにスライドインメニューが出現してもコンテンツが透けて見えるように「半透明」にして、文字の色や大きさ、行の間隔も変更してみました。

/*スライドインメニューをカスタマイズ*/
.navi-menu-content{
	left: auto;
	right: 0;
	background-color: rgba(30,124,209,0.5);
	transform: translateX(101%);
}

.menu-drawer a{
	font-size: 1.1em;/*文字の大きさ*/
	color: #fff;/*文字の色*/
	height: 3em;/*行の高さ*/
}

.menu-drawer a:hover{
	color: rgba(255,255,255,0.7);
	background-color: rgba(30,124,209,0);
}

 

ひとつ注意していただきたいのは、さきほどまでは「#6桁」のカラーコードを使用していましたが、半透明色は「RGB」を使います。こちらのサイトでカラーコードを「RGB」へ変換できます。

RGBと16進数カラーコードの相互変換ツール

WEBブラウザ上で動作する、RGB値とHTML・CSSなどの色指定で使用するカラーコードを相互変換するシンプルなツール。16進数カラーコードとRGBを変換する計算式の解説も。

www.peko-step.com

「#1e7cd1」を変換したものが「rgba(30,124,209,0.5)」で最後の「0.5」は透明度（0～1.0）を表します。

 

今回のカスタマイズ、すべてまとめたものがコチラです。

/*ヘッダーの色と高さ、アイコンの位置を調整*/
.search-menu-button.menu-button,
.navi-menu-button.menu-button{
	background-color: #1e7cd1;
	color: #FFFFFF;
	height: 55px;
	padding-top: 8px;
}

.logo-menu-button.menu-button{
	background-color: #1e7cd1;
	height: 55px;
}

/*768px以下でロゴの大きさ変更*/
@media screen and (max-width: 768px){
img.site-logo-image{
	width: 140px;
	margin: 2px auto 0;
}
}

/*スライドインメニューをカスタマイズ*/
.navi-menu-content{
	left: auto;
	right: 0;
	background-color: rgba(30,124,209,0.5);
	transform: translateX(101%);
}

.menu-drawer a{
	font-size: 1.1em;/*文字の大きさ*/
	color: #fff;/*文字の色*/
	height: 3em;/*行の高さ*/
}

.menu-drawer a:hover{
	color: rgba(255,255,255,0.7);
	background-color: rgba(30,124,209,0);
}

最後に

おつかれさまでした！

私もヘッダーモバイルボタンを設定してから「やらなきゃ、やらなきゃ」と思いながらも、しばらくスライドインメニューに手をつけておらず、この記事を書くために重い腰を上げてようやくサッパリできました！（笑）

それにしても私がCocoonを使い始めた2019年の春頃には、Cocoonのスキンはたしか「20」くらいしかなかったのに、今回久々に見たら「70」以上もあったのでビックリしました。

Cocoonは、無料テーマとは思えない充実ぶりですよね。

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

 ヘッダーモバイルボタンに専用のロゴを設置する方法

【Cocoon】ヘッダーロゴをPCとモバイルで使いわける方法

ikuzoblog.com