当ブログは広告が含まれています

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

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

Cocoonのいいところ。それは無料テーマなのに有料テーマに負けないくらい機能があるところ。

Cocoonは今まで「やりたいけどできない」ことは殆どありませんでした。

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

上へスクロールするとヘッダーモバイルボタンが隠れる

下へスクロールするとヘッダーモバイルボタンが出てくる

ブログを始めたころ、

「へー、有料テーマはこんなのもあるんだ、でもCocoonは無料だから、きっとないんだろうなー」

などと勝手に思っていたら、ある日いきなり発見。

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

あるんだ！やっぱりCocoonって凄い！って思いましたね（笑）

今回はこの、Cocoonのヘッダーモバイルボタン（スマホメニュー）の設定とカスタマイズする方法を紹介します。

スポンサーリンク

Cocoonのヘッダーモバイルボタンには色がない

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

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

ヘッダーモバイルボタンはCocoon設定の「モバイル」タブで設定する

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

ヘッダーモバイルボタンはデフォルトで色がありません

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

そうなんです。Cocoonのキーカラーかヘッダー色が反映されるのかと思ったら、ヘッダーモバイルは別物のようですね。

スポンサーリンク

今回のヘッダーモバイルのカスタマイズの内容

そこで今回のヘッダーモバイルのカスタマイズの内容ですが、

今回はヘッダーモバイルボタンの色や位置などを変更します

主な変更点としては、

ヘッダーモバイルボタンのアイコンと文字の色を変更

ヘッダーモバイルボタンの背景色を変更

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

ロゴとアイコンの位置を調整

ロゴの大きさを変更

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

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

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

左にメニューボタンを配置してもいいのですが、メニューボタンは右側にしたかったので（小さな拘り）。

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

スポンサーリンク

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

ヘッダーモバイルボタンを表示させるには、

最初にヘッダーモバイルボタン用のメニューを作成する必要があります。

メニューは左から「検索」「ロゴ」「メニュー（グローバルメニュー）」の順番になるように作りました。

ヘッダーモバイルのメニューの順番（左から検索、ロゴ、メニュー）

表示オプションの「カスタムリンク」を選択

ヘッダーモバイルボタン用のメニューを作るには、WordPressの「外観」→「メニュー」へ進みます。

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

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

メニューの「表示オプション」を押す

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

表示オプションの「カスタムリンク」にチェックがあるか確認する

「検索」や「メニュー」のアイコンを変える場合は、「CSSクラス」にも チェックを入れておきます。

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

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

メニューの作成

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

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

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

③  ヘッダーモバイルボタンに チェックを入れます。

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

（初めてメニューを作る場合、①はありません。②→③→④と進みます。）

メニュー項目の作成

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

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

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

URLに入力する文字は「#」をを含めてすべて半角文字を使います。

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

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

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

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

 

この記事を書いた後で、ロゴはスマホ専用のものに変更しました。

PCとスマホでロゴを使い分ける方法は、こちらの記事をご覧ください。

【Cocoon】ヘッダーロゴをパソコンとモバイルで変える方法
こんにちは、ikuzo(いくぞう)です。前回はCocoonのヘッダーモバイルボタンの設定、およびカスタマイズについて書きました。ヘッダーモバイルボタンのロゴは、PCと同じロゴが表示されますが、今回はパソコンとモバイル（スマホ）で別々のロゴを
ikuzoblog.com

 

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

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

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

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

ヘッダーモバイルのメニューを押すと、グローバルメニューの項目が表示される

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

【Cocoon】グローバルナビメニューの設定方法とカスタマイズ
Cocoonを使い始めたばかりの方は、「ヘッダー部分にメニューが表示されないのはなぜ？」なんて困ったりしていませんか？Cocoonのデフォルト（初期状態）では、グローバルメニュー（ヘッダーメニュー）はありません。グローバルメニューは自分で作
ikuzoblog.com

 

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

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

 

「検索」や「メニュー」以外にも、メニュー項目のURLコマンドは他にもあります。

公式サイトのこちらの記事にコマンド一覧が掲載されています。

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

 

項目の順番はドラッグによって変更可能です。

ヘッダーモバイルの項目はドラッグで順番の変更が可能

最後に「メニューを保存」を押せばヘッダーモバイルのメニューは作成終了です。

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

スポンサーリンク

ヘッダーモバイルボタンの設定

あとはCocoonの設定だけで、ヘッダーモバイルボタンが表示されます。

「Cocoon 設定」→「モバイル」タブの「ヘッダーモバイルボタン」を選択します。

Cocoon 設定の「モバイル」タブ→「ヘッダーモバイルボタン」を選択

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

フッターモバイルボタンとはこれですね。私は使っていませんが。

Cocoonのフッターモバイルボタン

その下にある「モバイルボタン」の設定は、

「モバイルボタン時コンテンツ下のサイドバーを表示」だけにチェックを入れている

常時、ヘッダーモバイルボタンを表示させたままにするには「モバイルボタンの固定表示」に チェックを入れます。

また、ヘッダーモバイルボタンを使用する場合、「常にサイトヘッダーロゴを表示する」にチェックを入れるとロゴが2重になるので、ここのチェックは外します。

「常にサイトヘッダーロゴを表示する」にチェックを入れるとロゴが2重になる

「モバイルボタン時コンテンツ下のサイドバーを表示」は記事の下にサイドバーを表示させるかどうかです。ここはお好みで。

 

以上の設定が完了したら「変更をまとめて保存」を押します。

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

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

スポンサーリンク

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

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

その前にひとつ、お断りがあります。

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

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

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

「私のヘッダーモバイルボタンは最初から色があります！」というありがたいコメントをいただき、そこでようやく気がつきました。

コメントをいただいたのをきっかけに、Cocoonのスキンをいくつか検証※したところ、

色のついた一部のスキンで追加のCSSが必要ということが判明したので、スキン別の対処法もわずかですが紹介します。

※70以上のスキンを検証しましたが、Cocoonのスキンは現在も増え続けているため、全てのスキンではありません。

ヘッダーモバイルボタンの文字色と背景色を変更

まずはヘッダーモバイルボタンの文字色と背景色の変更方法です。

「カスタマイズはやったことがない」という方のために、今回もやり方から説明します。

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

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

すると、下のような画面が出てきます。

これはスタイルシートといって、

これから出てくるCSSを矢印あたりに追記することによってサイトのカスタマイズが可能です。

編集するテーマは「Cocoon Child」を選択しておきます。

スタイルシートは「Cocoon Child」を選択

CSSを変更する際は、念のためバックアップをとっておいて下さい（スタイルシートの内容を全コピー→メモ帳などに貼り付けて保存すればOK）。

それでは早速ですが、ヘッダーモバイルボタンの文字色と背景色を変えるCSSがこちらです。

これをまるごとコピーしてスタイルシートへ貼り付けてみてください。

/*ヘッダーモバイルボタンの文字色と背景色を変更*/
.search-menu-button.menu-button,
.navi-menu-button.menu-button{
	background: #1e7cd1;
	color: #ffffff;
}

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

.mobile-menu-buttons{
	background: #1e7cd1;
}

ヘッダーロゴを設定していない方（リンク文字列にブログ名を入れた方）は、こちらのCSSを合わせて貼り付けます。

/*ヘッダーの文字色と背景色を変える追加CSS*/
.menu-button-in{
	color: #ffffff!important;
	background-color: #1e7cd1!important;
}
/*ほにゃらら*/の部分は、あとで何のCSSか一目でわかるので一緒に貼り付けておくと便利です（/*と*/で囲んだ部分は、何を書いてもサイトには影響しません）。

文字色と背景色は、赤枠部分のカラーコードを変えることによって好きな色に変更可能です。

文字色と背景色のカラーコードを変更

色の変更が終わったら「ファイルを更新」を押します。

スタイルシートにコードを貼り付けて「ファイルを更新」を押す

これで文字色と背景色が変わったヘッダーモバイルボタンが表示されていると思います。

コードは大文字と小文字、どちらのアルファベットを使っても大丈夫ですが、

記号やスペースを含めて文字は必ず半角文字を使用してください。

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

スキン別の対処法

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

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

 

「COLORS」（わいひらさん作）を使っている方は、ロゴの周囲だけ色が変わらないと思うので、

以下のCSSを追加して対応してください。（ヘッダーロゴを設定されていない方もこちらの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を追加したものがこちらです。

下のCSSでやや太めのヘッダーモバイルボタンになります（50px→60pxに変更しています）。

/*ヘッダーモバイルボタンの色と高さを変更*/
.search-menu-button.menu-button,
.navi-menu-button.menu-button{
	background-color: #1e7cd1;
	color: #ffffff;
	height: 60px;
}

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

.mobile-menu-buttons{
	background: #1e7cd1;
}
ヘッダーモバイルボタンを太くしすぎてアドセンス広告が隠れるとポリシー違反になります。ヘッダー付近に広告を配置されている方は十分注意してください。

またブログにキャッチフレーズを設定されている方は、ヘッダーの高さを変えるとヘッダーの影にキャッチフレーズが隠れてしまう場合があります。

その場合は、下のCSSを一緒に使います。

「20px」の部分は、キャッチフレーズが良い位置に来るように数字を変更してください。

/*1023px以下でキャッチフレーズの位置を変更*/
@media screen and (max-width: 1023px){
.tagline{
	margin-top: 20px ;
}
}

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

ヘッダーの高さを増やすと「検索」と「メニュー」ボタンの位置がやや上気味になります。

「検索」と「メニュー」ボタンの位置を調整するには下のCSSを使います。

/*ヘッダーモバイルボタンの色と高さ、アイコンの位置を変更*/
.search-menu-button.menu-button,
.navi-menu-button.menu-button{
	background-color: #1e7cd1;
	color: #ffffff;
	height: 60px;
	padding-top: 10px;
}

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

.mobile-menu-buttons{
	background: #1e7cd1;
}

「検索」と「メニュー」ボタンを下げるCSS

赤枠で囲った部分の数字を大きくするほど「検索」と「メニュー」ボタンの位置が下がります。

下の画像はボタンの位置を下げる前と、10px分下げた後です。

「検索」と「メニュー」ボタンの位置を変える前と後のヘッダーモバイルボタン

ロゴの大きさと位置を変更

ヘッダーモバイルボタンのロゴの大きさを調整するCSSも書いておきます。

幅が768px以下のデバイスでロゴの大きさが変わるCSSと、

ヘッダーモバイルボタンが表示される幅1023px以下では、ロゴが「7px」分ほど下がるCSSです。

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

/*1023px以下でロゴの位置を変更*/
@media screen and (max-width: 1023px){
img.site-logo-image{
	margin-top: 7px;
}
}

ヘッダーモバイルボタンのロゴの大きさと位置を変えるCSS

「200px」の部分でロゴの大きさを調整、「7px」の数字を大きくするほどロゴが下へ移動します。

スポンサーリンク

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

ヘッダーモバイルボタンの「メニュー」を押すと左からスライドインメニューが出てきますが、

これを右から出てくるように変更しました。

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

/*スライドインメニューを右から出す*/
.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: #ffffff;/*文字の色*/
	height: 3em;/*行の高さ*/
}

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

スケルトン化したスライドインメニュー

半透明色は、「#6桁」のカラーコードではなく「RGB」を使います。

こちらのサイトでカラーコードを「RGB」へ変換できます。

RGBとカラーコードの変換ツール : 数値が何色か調べることもできます
WEBブラウザ上で動作する、RGB値とHTML・CSSなどの色指定で使用するカラーコードを相互変換するシンプルなツール。数値から何色になるか調べることもできます。16進数カラーコードとRGBを変換する計算式の解説も。
www.peko-step.com

 

「#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: 60px;
	padding-top: 10px;
}

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

.mobile-menu-buttons{
	background: #1e7cd1;
}

/*1023px以下でキャッチフレーズの位置を変更*/
@media screen and (max-width: 1023px){
.tagline{
	margin-top: 20px ;
}
}

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

/*1023px以下でロゴの位置を変更*/
@media screen and (max-width: 1023px){
img.site-logo-image{
	margin-top: 7px;
}
}

/*スライドインメニューをカスタマイズ*/
.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: #ffffff;/*文字の色*/
	height: 3em;/*行の高さ*/
}

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

最後に

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

ヘッダーモバイルボタン、ならびにスライドインメニューは難しそうで意外に簡単にできるカスタマイマズです。

ぜひ、ご自身で納得できるCocoonのヘッダーモバイルボタンを作ってみてください。

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

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

【Cocoon】ヘッダーロゴをパソコンとモバイルで変える方法
こんにちは、ikuzo(いくぞう)です。前回はCocoonのヘッダーモバイルボタンの設定、およびカスタマイズについて書きました。ヘッダーモバイルボタンのロゴは、PCと同じロゴが表示されますが、今回はパソコンとモバイル（スマホ）で別々のロゴを
ikuzoblog.com

 

Cocoon
スポンサーリンク
ikuzoblog

コメント