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

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

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

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

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

スマホを上にスコロールするとメニューが隠れる

スマホを下にスクロールするとメニューが出てくる

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

Cocoonの出たり隠れたりするスマホメニューはありました

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

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

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

スポンサーリンク

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

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

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

モバイルメニュー(ヘッダーモバイルボタン)の設定

 

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

 

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

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

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

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

今回のカスタマイズ内容

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

メニューの色を変えてアイコンの位置などを調整

 

主な変更点としては、

文字色と背景色

メニュー全体の高さ

ロゴと項目の位置を調整

ロゴの大きさを若干変更

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

左から出てくるメニューを右から出るように変更した

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

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

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

スポンサーリンク

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

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

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

メニューの順番(左から検索、ロゴ、メニュー)

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

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

「外観」→「メニュー」を選択

 

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

「表示オプション」を押す

 

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

表示オプションの「カスタムリンク」にチェックを入れた

 

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

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

ヘッダーモバイルボタンの設定方法
スマホ画面でヘッダーに操作ボタンを表示させる設定方法です。

メニューの作成

新しいメニューを作成する画面

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

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

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

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

 

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

ヘッダーモバイルボタン「検索」部分の設定

「検索」のメニュー項目を追加

“#”は半角になっていることを確認して下さい。

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

ヘッダーモバイルボタン「ロゴ」部分の設定

「ロゴ」のメニュー項目を追加

※ヘッダーロゴを設定されていない方は、リンク文字列にブログ名を入れて下さい。

 ヘッダーロゴの作成方法はこちら

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

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

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

 

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

ヘッダーモバイルボタン「メニュー」部分の設定

「メニュー」のメニュー項目を追加

 

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

グローバルナビメニュー

 

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

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

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

モバイルスライドインメニューを独自メニューに変更する方法
デフォルトだとスマホのスライドインメニューは「PC用のグローバルメニュー」になりますが、独自のメニューを設定する方法です。

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

ヘッダーモバイルボタンの設定方法
スマホ画面でヘッダーに操作ボタンを表示させる設定方法です。

 

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

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

ドラッグしてメニュー項目の順番を変更

 

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

ヘッダーモバイルボタンのメニューが完成した

スポンサーリンク

Cocoonの設定

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

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

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

 

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

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

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

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

Cocoonのフッターモバイルメニュー

 

モバイルボタンの設定

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

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

ヘッダーモバイルボタンと併用するとヘッダーロゴが2重になる

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

 

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

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

白色のヘッダーモバイルボタン

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

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

(以下、2020年7月18日追記)

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

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

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

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

 

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

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

文字色と背景色を変更

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

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

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

Cocooc テーマエディター

 

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

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

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

Cocoon Childのスタイルシート

CSSを変更する際は、念のためバックアップをとっておいて下さい。

文字色と背景色を変える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を貼り付けた

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

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

文字色と背景色を変更するCSS

 

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

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

 

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

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

全角文字を使うと、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

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

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

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

ヘッダーを太くしすぎてアドセンス広告が隠れるとポリシー違反になります。ヘッダー付近に広告を配置されている方は注意して下さい。

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

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

「検索」と「メニュー」ボタンを下げる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

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

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

「検索」と「メニュー」ボタンの位置 変更前と変更後

ロゴの大きさを変更

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

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

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

 

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

ロゴの大きさと高さを変更するCSS

スポンサーリンク

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

ヘッダーモバイルボタンにカスタムリンクで「#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を変換する計算式の解説も。

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

カラーコードをRGBへ変換

 

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

/*ヘッダーの色と高さ、アイコンの位置を調整*/
.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とモバイルで使いわける方法

コメント