Cocoonユーザーさんに
やりたいカスタマイズがあれば、お問い合わせよりお待ちしてます。
または検索窓に『Cocoon ○○ カスタマイズ』など入力してください。

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

スポンサーリンク

Cocoonスライドインのカスタマイズ前後比較

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

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

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

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

スポンサーリンク
スポンサーリンク

Cocoon設定でスライドインボタンを有効化

Cocoon設定でモバイルメニューをスライドインに変更

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

スライドインの背景色を変えたい

Cocoonスライドインの背景色:BeforeAfter

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

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

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

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

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

または要素の検証画面のカラーピッカーも便利です。詳細は以下リンク目次5章7.1検証画面のカラーピッカーで画像の色を取得

LINK要素の検証(デベロッパーツール)の使い方!初心者向けカスタマイズ方法

スライドイン背景に(パターン)画像を使いたい

Cocoonスライドインの背景を画像に:BeforeAfter

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

/* 背景を画像に */
.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エラーが出るので、コードを短くしたい人もいると思います。

CSSを書きすぎてエラーが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;

スライドインボタン(メニュー・ホーム・検索・トップ・サイドバー)文字色を指定したい

background: url(★画像のパス★)

任意の場所だけ文字色指定も可能

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

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

/* メニューのみ */
.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;
}

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

例:メニューとサイドバーのみ指定

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

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

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

スライドインボタンにマウスを置いたとき背景・文字色を変更GIF画像

スライドインのボタンに『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; /* ここは同じ文字色を */
}

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

Cocoonスライドインのトップを画像に:BeforeAfter

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

/* トップの文字・アイコンを透明に */
/*.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;
}

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

PC戻るボタン100×141

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

縦長ボタンのスライドイントップボタン

縦長ボタン:320pxの場合

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

上行く?トップに戻るボタン

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

文字小さ!何の画像かまだ不明

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

スライドイン用133px 58px

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

768pxでの戻るボタン表示

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

320pxで戻るボタンの表示

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

表示確認
  • PCビューの横幅を移動させると簡単!

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

スライドインアイコン変更ビフォーアフター

アイコンフォントを変更したいとき。例えば以下リンク先のものにするには、以下の通りに書けば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

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

/* アイコン一括色変更したい時 */
.navi-menu-icon::before,
.home-menu-icon::before,
.search-menu-icon::before,
.top-menu-icon::before, /* トップに画像を入れる場合この1行は削除 */
.sidebar-menu-icon::before {
	color: #f00;
}

スライドインの文字列を変更するCSS

スライドインの文字列変更イメージBeforeAfter

/* 一括でスライドイン文字列変更 */
.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';
}

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

以下▼は1つだけなど個別に変更したい場合。

/* メニューの文字列を変更 */
.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;
}
ポイント

content: 'ココに文字列';ピンクの文字を任意の文字に変更

さいごに

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

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

コメント

個人情報の取り扱いについてはリンク先をご確認ください。

ご了承・ご理解いただいた上でコメントお待ちしております❦

トップへ戻る