Cocoonスライドイン（モバイル下固定メニューボタン）をCSSだけでカスタマイズ！

Cocoonのスライドイン（footer下にあるモバイル専用固定メニューボタン）はスマホ・タブレットでは画面下にずっと固定された部分です。

自分のサイトカラーやイメージに合わせてスライドインをカスタマイズすると、訪問者さんの印象に残る可能性が高まります。

CSSが苦手な人が自分色にカスタマイズできるようページを作ったので、説明書きなどチェックして独自サイトカラー仕様にカスタマイズしてください＾＾

※Simplicity2のスライドインとは指定方法など仕様が変わってるので、再度カスタマイズが必要です。

スライドインボタンはCocoon設定でデフォルト表示されている

もし変更していた場合、管理画面Cocoon設定よりモバイルタブを選択、『モバイルボタンレイアウト』のチェックを『スライドインボタン』に入れて変更を保存！

スライドインを表示したくないときの設定

• スライドインは非表示にしたい
• 下に固定表示させたくない場合

上記画像のとおりCocoon設定『モバイル』タブ『モバイルボタンレイアウト』より、『ボタンを表示しない（ミドルメニューのみ）』にチェックを入れて保存すればモバイルなどでは表示されません。

トップボタンを選択すれば、上部にナビが表示されるようになります。

背景色を変えたい

スライドインの指定は.mobile-menu-buttonsで背景色を変更できるので、お好みの色を指定し変更してくださいね。

/* --------------------------- *
 *  スライドインのカスタマイズ *
 * --------------------------- */

/* 背景色を変更：背景画像にするなら不要 */
.mobile-menu-buttons {
	background: #ffb9b9;
}

ヘッダー画像などの色に合わせたい場合は、カラーピッカーを使うと便利ですよ。

オススメ拡張機能ColorZilla！web上で見つけた色をカラーコードにする

ブログのカスタマイズでカラーを変たい時、「この色が良いなぁ」って思っても『カラーコードが、わかんない時』があります。head画像に使ってるピンクっぽい紫のコードを探すのは効率が悪すぎます。同じ...

bibabosi-rizumu.com

2016.11.10

背景に（パターン）画像を使いたい

スライドインの背景をパターン画像に（の言い方が正しいのか。）小さな画像を連続して表示し背景にする場合。

/* 背景を画像に */
.mobile-menu-buttons {
	background-color: #fff0;
	background: url(★画像のパス★) repeat;
	border-top: 1px solid #ddd; /* 上にボーダーを入れたい場合：太さ スタイル 色 */
}

TinyPngなどでキレイに圧縮してアップロードした画像のパス：URLを指定してください。例えば管理画面メディアにアップロードした場合は以下の感じ。

background: url(https://domain.com/wp-content/uploads/2018/05/hoge.jpg) repeat;

背景画像のパス：CSSコードを短くしたい

CSSを沢山（親子テーマ合わせて5万バイト以上）書くとAMP対応しているときAMPエラーが出るので、コードを短くしたい人もいると思います。

やり方は以下の通り。

1. PC上でimagesフォルダ作成
2. imagesフォルダ内に背景画像ファイルを入れる
3. ファイル名は『slidein.png』など分かりやすい名前を指定
   • 画像は上述通り圧縮
4. FTPソフトで画像ファイルが入ったimagesフォルダを以下パスにアップロード

/WPフォルダdomain.com（/public_html）/wp-content/themes/cocoon-child-masterフォルダ内

1. 画像ファイル名が同じになるよう指定。コードが短くなった！

background: url("images/slidein.png") repeat;

文字色を変更：メニュー・ホーム・検索・トップ・サイドバー

• メニューのみ色を変更したい
• サイドバーのみ色を目立たせたい

などもあるかと思うので、必要な項目のみコピペしてカラーを変更してください。

/* メニューのみ */
.navi-menu-button {
	color: #f00;
}
/* ホームのみ */
.mobile-menu-buttons .home-menu-button > a {
	color: #ff8500;
}
/* 検索のみ */
.search-menu-button {
	color: #0056ff;
}
/* トップのみ：トップに画像を入れる歳は不要 */
.mobile-menu-buttons .top-menu-button > a {
	color: #c400ff;
}
/* サイドバーのみ */
.sidebar-menu-button {
	color: #ff00c4;
}

share・follow・prev・nextボタンの文字色を変更

左から、赤『share』・オレンジ『follow』・青『prev』・紫『next』ボタンとスライドインの項目が追加されました。

それぞれの文字色を変更するCSSの書きかたをチェックしてくださいね。

/* shareのみ */
.share-menu-button {
	color: #f00;
}
/* followのみ */
.follow-menu-button {
	color: #ff8500;
}
/* prevのみ */
.mobile-menu-buttons .prev-menu-button > a {
	color: #0056ff;
}
/* nextのみ */
.mobile-menu-buttons .next-menu-button > a {
	color: #c400ff;
}

2か所だけ同じ色指定をしたい時：CSS書きかた

たとえば、メニューとサイドバーのみ同じ色に変更したい時は以下の通りです。

/* メニュー・サイドバーのみ赤 */
.navi-menu-button,
.sidebar-menu-button {
	color: #f00;
}

文字色を一括で変更するCSS

一括で色をモバイル用フッターボタンの色を一括で変更したいときは、以下のような指定方法になります。※表示例としてブルー#5369ffを指定したよ❦

.menu-button,
.mobile-menu-buttons .menu-button > a {
	color: #5369ff;
}

 

ボタンにマウスを置いたとき、背景・文字色を変更

スライドインのボタンに『hover：マウスが乗った時』背景色と文字の色を変えたい場合のCSS。

/* ボタンhover時の文字・背景変更 */
.mobile-menu-buttons .menu-button:hover {
	background-color: #000; /* 背景色 */
	color: #fff; /* 文字の色 */
}
/* トップ・ホームの『文字』は構造上別途必要 */
.top-menu-button a:hover, /*トップに戻る画像を入れる場合はこの1行削除*/
.home-menu-button a:hover {
	color: #fff; /* ここは同じ文字色を */
}

スライドインの『トップ』へ戻るボタンを画像に変更

トップに戻るボタンを画像にしている場合、スライドインも独自の画像を使用すればより自分らしさが出ますよね。

/* トップの文字・アイコンを透明に */
/*.mobile-menu-buttons .top-menu-button > a,*/
.top-menu-icon,
.top-menu-caption {
	color: #fff0;
}
/* トップに戻るボタンを画像に */
.top-menu-button {
	background: url(★画像のパス★) no-repeat;
	background-size: contain;
	background-position: 50%;
	margin: 1px 0;
}

スライドイン用トップボタン画像：作成サイズの表示例

上の100×141px画像を表示したら以下の感じに

サイズ的には問題ないけど、何のボタンか分かりにくいです。

PCビューhoverの時ボタン画像▲だと上に行くのが分かりますが、スライドインに画像を入れると▼以下。

トップボタン画像を、横長サイズ&文字を入れた様子

私が入れているトップに戻るボタンは横133×縦58のサイズです。スマホビューで見るイメージは以下の通り。

幅の広い方▲は余裕があるけど、幅の狭いモバイル▼は以下の感じ。

見やすくなったのが分かります。画像を入れる際の参考まで❦

アイコンフォントを変更

スライドインのアイコンフォントを変更したいとき。

Cocoon新機能を設定して使いたい場合

2019年05月21日。Cocoon親テーマ1.7.8で機能が追加、有効化されました。現在：1.7.8.2の状態

モバイルのスライドインを自由にカスタムしたい場合は、以下リンク先をご確認ください。

LINKモバイルフッターメニューの設定方法 | Cocoon

• CSS class設定で設定した文字列を指定し色を変更してください。

Cocoon新機能を使わず、デフォルト機能で対応したい場合のCSS

例えば以下リンク先のものにするには、以下の通りに書けばOK！（CocoonはFont Awesomeを導入済みなので）

/* アイコンの変更 */
/* メニューのアイコン */
.navi-menu-icon::before {
	content: '\f03a';
}
/* ホームのアイコン */
.home-menu-icon::before {
	content: '\f1ad';
}
/* 検索のアイコン */
.search-menu-icon::before {
	content: '\f14b';
}
/* トップのアイコン：トップに画像を入れる歳は不要  */
.top-menu-icon::before {
	content: '\f0aa';
}
/* サイドバーのアイコン */
.sidebar-menu-icon::before {
	content: '\f005';
}

LINKフリーアイコン｜Font Awesome

アイコンフォントの色を一括で変更したい場合

モバイル用フッターボタンの文字はそのままで、アイコンフォントだけを一括変更したい場合のCSS。

以下CSSは赤を指定しているので、スキンを使ってなければ一括で赤になります。

/* アイコン一括色変更したい時 */
.menu-icon::before {
	color: #f00;
}

アイコンフォントの色を、それぞれ変更したい場合

スライドインのボタンに使っている『メニュー・ホーム・シェア・フォロー・検索・トップ・サイド』のアイコンフォントの色のみ変更したい場合のCSSと表示例です。

画像はカラフルですが任意のスタイルのみ、コピペして色の変更をして使ってください。

/* メニュー */
.navi-menu-icon::before {
	color: #f00;
}
/* ホーム */
.home-menu-icon::before {
	color: #ffb300;
}
/* シェア */
.share-menu-icon::before {
	color: #3cff00;
}
/* フォロー */
.follow-menu-icon {
	color: #007bff;
}
/* 検索 */
.search-menu-icon::before {
	color: #b700ff;
}
/* トップ */
.top-menu-icon::before {
	color: #fe60e2;
}
/* サイド */
.sidebar-menu-icon::before {
	color: #53c6ff;
}

ボタンの文字列を変更するCSS

スライドインのボタンの文字列を、例えば以下のように変更したい場合。

/* 一括でスライドイン文字列変更 */
.navi-menu-button,
.home-menu-button,
.search-menu-button,
.top-menu-button, /* トップに画像を入れる場合この1行は削除 */
.sidebar-menu-button {
	position: relative;
}
.navi-menu-button .navi-menu-caption,
.home-menu-button .home-menu-caption,
.search-menu-button .search-menu-caption,
.top-menu-button .top-menu-caption, /* トップに画像を入れる場合この1行は削除 */
.mobile-menu-buttons .sidebar-menu-caption {
	display: none;
}
.navi-menu-icon::after,
.home-menu-icon::after,
.search-menu-icon::after,
.top-menu-icon::after, /* トップに画像を入れる場合この1行は削除 */
.sidebar-menu-icon::after {
	font-size: 12px;
	position: absolute;
	top: 2.3em; /* 高さの微調整 */
	left: 0;
	right: 0;
	color: #f00; /* 一括でフォント色を変えたい場合：不要ならこの1行削除 */
	font-weight: bold; /* 一括で文字の太さを太く：不要ならこの1行削除 */
}
/* メニューの文字列を変更 */
.navi-menu-icon::after {
	content: 'MENU';
}
/* ホームの文字列を変更 */
.home-menu-icon::after {
	content: 'HOME';
}
/* 検索の文字列を変更 */
.search-menu-icon::after {
	content: 'SEARCH';
}
/* トップ文字列を変更：トップに画像を入れる歳は不要  */
.top-menu-icon::after {
	content: 'TOP';
}
/* サイドバー文字列を変更 */
.sidebar-menu-icon::after {
	content: 'NEWS';
}

上記▲一気に画像のように表示にしたい場合。

『メニュー』の文字だけ変更

/* メニューの文字列を変更 */
.navi-menu-button {
	position: relative;
}
.navi-menu-button .navi-menu-caption {
	display: none;
}
.navi-menu-icon::after {
	content: 'MENU';
	font-size: 12px;
	position: absolute;
	top: 2.3em; /* 高さの微調整 */
	left: 0;
	right: 0;
}

『ホーム』の文字だけ変更

/* ホームの文字列を変更 */
.home-menu-button {
	position: relative;
}
.home-menu-button .home-menu-caption {
	display: none;
}
.home-menu-icon::after {
	content: 'HOME';
	font-size: 12px;
	position: absolute;
	top: 2.3em; /* 高さの微調整 */
	left: 0;
	right: 0;
}

『検索』の文字だけ変更

/* 検索の文字列を変更 */
.search-menu-button {
	position: relative;
}
.search-menu-button .search-menu-caption {
	display: none;
}
.search-menu-icon::after {
	content: 'SEARCH';
	font-size: 12px;
	position: absolute;
	top: 2.3em; /* 高さの微調整 */
	left: 0;
	right: 0;
}

『トップ』の文字だけ変更

/* トップ文字列を変更：トップに画像を入れる歳は不要  */
.top-menu-button {
	position: relative;
}
.top-menu-button .top-menu-caption {
	display: none;
}
.top-menu-icon::after {
	content: 'TOP';
	font-size: 12px;
	position: absolute;
	top: 2.3em; /* 高さの微調整 */
	left: 0;
	right: 0;
}

『サイドバー』の文字だけ変更

/* サイドバー文字列を変更 */
.sidebar-menu-button {
	position: relative;
}
.mobile-menu-buttons .sidebar-menu-caption {
	display: none;
}
.sidebar-menu-icon::after {
	content: 'NEWS';
	font-size: 12px;
	position: absolute;
	top: 2.2em; /* 高さの微調整 */
	left: 0;
	right: 0;
}

Cocoon新機能、モバイルフッターメニューに変更後、スタイルがくずれた

2019年05月21日。Cocoon親テーマ1.7.8で機能が追加、有効化されました。現在：1.7.8.2の状態

モバイルのスライドインを自由にカスタムしたい場合は、以下リンク先をご確認ください。

LINKモバイルフッターメニューの設定方法 | Cocoon

 

コピペしてたスタイル（CSS）どれを消せば良い！？

上記のCSSを追加した。付いてたコメント（説明）も消して、どれを消せば分からない。という人に。

• 以下が1セット

/* これはコメント */
.hoge {
	style: value;
}

このセットを消してください。

上記を消し忘れた場合、例えば

/*

}

LINKCSSが効かない原因！反映させるため、ブログ初心者さんが確認する7つのこと

ビバ★りずむで紹介したCSSをチェックし、styleを消す

Cocoon新機能、モバイルフッターメニューに変更したい場合、CSSがあればキレイに反映されないので、該当CSSを削除してくださいね。

このページ専用なので、他のページを参考にした場合は、そのサイトさんのCSSをチェックしてみるのも良いかも❦

• どれを消せば良いか分からない。という人へ
• このページのCSS、全部一気に貼り付けました

手順は以下の通り

1. ※はじめに簡易的にでも、style.cssのバックアップをとってください
2. 以下CSSと同じ指定を見つけたら消して、変更をチェック。

※2019年5月中旬までに、このページを参考にカスタマイズした人用のCSSです。

/* --------------------------- *
 *  スライドインのカスタマイズ *
 * --------------------------- */

/* 背景色を変更：背景画像にするなら不要 */
.mobile-menu-buttons {
	background: #ffb9b9;
}
/* 背景を画像に */
.mobile-menu-buttons {
	background-color: #fff0;
	background: url(★画像のパス★) repeat;
	border-top: 1px solid #ddd; /* 上にボーダーを入れたい場合：太さ スタイル 色 */
}
/* メニューのみ */
.navi-menu-button {
	color: #f00;
}
/* ホームのみ */
.mobile-menu-buttons .home-menu-button > a {
	color: #ff8500;
}
/* 検索のみ */
.search-menu-button {
	color: #0056ff;
}
/* トップのみ：トップに画像を入れる歳は不要 */
.mobile-menu-buttons .top-menu-button > a {
	color: #c400ff;
}
/* サイドバーのみ */
.sidebar-menu-button {
	color: #ff00c4;
}
/* メニュー・サイドバーのみ赤 */
.navi-menu-button,
.sidebar-menu-button {
	color: #f00;
}
/* ボタンhover時の文字・背景変更 */
.mobile-menu-buttons .menu-button:hover {
	background-color: #000; /* 背景色 */
	color: #fff; /* 文字の色 */
}
/* トップ・ホームの『文字』は構造上別途必要 */
.top-menu-button a:hover, /*トップに戻る画像を入れる場合はこの1行削除*/
.home-menu-button a:hover {
	color: #fff; /* ここは同じ文字色を */
}
/* トップの文字・アイコンを透明に */
/*.mobile-menu-buttons .top-menu-button > a,*/
.top-menu-icon,
.top-menu-caption {
	color: #fff0;
}
/* トップに戻るボタンを画像に */
.top-menu-button {
	background: url(★画像のパス★) no-repeat;
	background-size: contain;
	background-position: 50%;
	margin: 1px 0;
}
/* アイコンの変更 */
/* メニューのアイコン */
.navi-menu-icon::before {
	content: '\f03a';
}
/* ホームのアイコン */
.home-menu-icon::before {
	content: '\f1ad';
}
/* 検索のアイコン */
.search-menu-icon::before {
	content: '\f14b';
}
/* トップのアイコン：トップに画像を入れる歳は不要  */
.top-menu-icon::before {
	content: '\f0aa';
}
/* サイドバーのアイコン */
.sidebar-menu-icon::before {
	content: '\f005';
}
/* アイコン一括色変更したい時 */
.navi-menu-icon::before,
.home-menu-icon::before,
.search-menu-icon::before,
.top-menu-icon::before, /* トップに画像を入れる場合この1行は削除 */
.sidebar-menu-icon::before {
	color: #f00;
}

/* 一括でスライドイン文字列変更 */
.navi-menu-button,
.home-menu-button,
.search-menu-button,
.top-menu-button, /* トップに画像を入れる場合この1行は削除 */
.sidebar-menu-button {
	position: relative;
}
.navi-menu-button .navi-menu-caption,
.home-menu-button .home-menu-caption,
.search-menu-button .search-menu-caption,
.top-menu-button .top-menu-caption, /* トップに画像を入れる場合この1行は削除 */
.mobile-menu-buttons .sidebar-menu-caption {
	display: none;
}
.navi-menu-icon::after,
.home-menu-icon::after,
.search-menu-icon::after,
.top-menu-icon::after, /* トップに画像を入れる場合この1行は削除 */
.sidebar-menu-icon::after {
	font-size: 12px;
	position: absolute;
	top: 2.3em; /* 高さの微調整 */
	left: 0;
	right: 0;
	color: #f00; /* 一括でフォント色を変えたい場合：不要ならこの1行削除 */
	font-weight: bold; /* 一括で文字の太さを太く：不要ならこの1行削除 */
}
/* メニューの文字列を変更 */
.navi-menu-icon::after {
	content: 'MENU';
}
/* ホームの文字列を変更 */
.home-menu-icon::after {
	content: 'HOME';
}
/* 検索の文字列を変更 */
.search-menu-icon::after {
	content: 'SEARCH';
}
/* トップ文字列を変更：トップに画像を入れる歳は不要  */
.top-menu-icon::after {
	content: 'TOP';
}
/* サイドバー文字列を変更 */
.sidebar-menu-icon::after {
	content: 'NEWS';
}
/* メニューの文字列を変更 */
.navi-menu-button {
	position: relative;
}
.navi-menu-button .navi-menu-caption {
	display: none;
}
.navi-menu-icon::after {
	content: 'MENU';
	font-size: 12px;
	position: absolute;
	top: 2.3em; /* 高さの微調整 */
	left: 0;
	right: 0;
}
/* ホームの文字列を変更 */
.home-menu-button {
	position: relative;
}
.home-menu-button .home-menu-caption {
	display: none;
}
.home-menu-icon::after {
	content: 'HOME';
	font-size: 12px;
	position: absolute;
	top: 2.3em; /* 高さの微調整 */
	left: 0;
	right: 0;
}
/* 検索の文字列を変更 */
.search-menu-button {
	position: relative;
}
.search-menu-button .search-menu-caption {
	display: none;
}
.search-menu-icon::after {
	content: 'SEARCH';
	font-size: 12px;
	position: absolute;
	top: 2.3em; /* 高さの微調整 */
	left: 0;
	right: 0;
}
/* トップ文字列を変更：トップに画像を入れる歳は不要  */
.top-menu-button {
	position: relative;
}
.top-menu-button .top-menu-caption {
	display: none;
}
.top-menu-icon::after {
	content: 'TOP';
	font-size: 12px;
	position: absolute;
	top: 2.3em; /* 高さの微調整 */
	left: 0;
	right: 0;
}
/* サイドバー文字列を変更 */
.sidebar-menu-button {
	position: relative;
}
.mobile-menu-buttons .sidebar-menu-caption {
	display: none;
}
.sidebar-menu-icon::after {
	content: 'NEWS';
	font-size: 12px;
	position: absolute;
	top: 2.2em; /* 高さの微調整 */
	left: 0;
	right: 0;
}

CSSをコピペしても反映しない場合

Cocoonデフォルトテーマをつかっていれば反映するけど、スキンを使ってると反映しない事が良くあります。

スキン作成者さんのCSSの指定方法によっては、デフォルトテーマよりも優先順位が強い指定をしてるからです。

• そんなとき、優先順位を強くしてあげればOK！

具体的にどうするの？

• #main このように#main 半角スペースをセレクタの前につければOK！

.navi-menu-button,
.home-menu-button,
.search-menu-button,
.top-menu-button,
.sidebar-menu-button {
	position: relative;
}

この場合は以下のように

#main .navi-menu-button,
#main .home-menu-button,
#main .search-menu-button,
#main .top-menu-button,
#main .sidebar-menu-button {
	position: relative;
}

#main #main + 半角スペースを前に付ければ、優先順位が強くなるのでお試しください。

キャッシュ系プラグインを使ってる場合、サーバーのキャッシュ機能の影響がある場合は、それぞれのキャッシュを削除すればOK！

『メニュー』を開いたナビ。背景・文字デザインを装飾

スライドインの『メニュー』をタップしたとき、左側から出てくる『メニュー』画面のを可愛くカスタマイズする方法について。

こんな感じでカスタマイズしたい人は以下リンク先をチェックしてくださいね❦

LINKCocoonスライドインのNaviメニュー！背景など可愛くカスタマイズするCSS

スライドイン左側『メニュー』の項目が見当たらないとき

スライドインにメニューが見当たらないのは、ヘッダーナビを入れてないからです。PC用の『グローバルナビの設定』を行うと表示される仕様になってます。

グローバルメニューの設定を『外観』－『メニュー』より『位置の管理』から『ヘッダーナビ』の設定すれば『メニュー』は表示されます。

スライドイン『メニュー』ボタンをタップで、ページ移動するリンクを付けたい

2019年05月21日。Cocoon親テーマ1.7.8で機能が追加、有効化されました。現在：1.7.8.2の状態

モバイルのスライドインを自由にカスタムしたい場合は、以下リンク先の設定を行う事で自由にリンク先など変更が行えるようになりました。

 

 

 

 

• スライドインのメニューは、モバイルのトップに設定してるから不要
• 『メニュー』ボタンのタップ・クリックで、別ページへ移動させたい
  任意のリンクを入れたい！

この場合はCSSだけでは無理なので、tmp/mobile-menu-buttons.phpファイルを触ります。

メニュー・ホーム・検索をリンクに変更

スライドインの項目であれる『メニューボタン』の編集は、12行目<div class="mobile-menu-buttons">の下から、<!-- ホームボタン -->の上の行を書き換えます。

<div class="navi-menu-button menu-button">はそのまま、input・labelタグなど消し、<span class="navi-menu-icon menu-icon">のspanをaタグに変更してちょうど画像のような感じに。

そうすれば、CSSでの調整が少ないから便利かも。

• 詳細はCocoon公式フォーラムを参考にどうぞ。

Cocoonスライドイン、ボタンの項目に任意のリンクを追加したい、レイアウトがくずれないHTMLの書きかた | カスタマイズ相談 | Cocoon フォーラム

さいごに

Cocoonサイトはこれからも増えそうなので、スライドインを自分のサイト仕様に変更して、プチ差別化するのも良いですね。

• スライドインの≡メニューを開いた場所のカスタマイズは以下をどうぞ。

LINKCocoonスライドインのNaviメニュー！背景など可愛くカスタマイズするCSS

それでは、かうたっくでした❦