Cocoonユーザーさんに
カスタマイズお疲れ様です^^
何か御用があれば、記事下にあるコメント欄よりどうぞ❦
スポンサーリンク

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

お知らせ

Cocoon1.7.8でモバイルメニュー機能が追加有効化されました。目次7章の1

外観メニューよりスライドインの内容を変更できる機能です。

デフォルトのスライドインをご利用の場合、style.cssでも対応できそう。新規メニューを作る場合、目次7章の1へ

お知らせ:ここまで

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

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

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

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

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

スポンサーリンク
  1. スライドインボタンはCocoon設定でデフォルト表示されている
    1. スライドインを表示したくないときの設定
  2. 背景色を変えたい
  3. 背景に(パターン)画像を使いたい
    1. 背景画像のパス:CSSコードを短くしたい
  4. 文字色を変更:メニュー・ホーム・検索・トップ・サイドバー
    1. share・follow・prev・nextボタンの文字色を変更
    2. 2か所だけ同じ色指定をしたい時:CSS書きかた
    3. 文字色を一括で変更するCSS
  5. ボタンにマウスを置いたとき、背景・文字色を変更
  6. スライドインの『トップ』へ戻るボタンを画像に変更
    1. スライドイン用トップボタン画像:作成サイズの表示例
    2. トップボタン画像を、横長サイズ&文字を入れた様子
  7. アイコンフォントを変更
    1. Cocoon新機能を設定して使いたい場合
    2. Cocoon新機能を使わず、デフォルト機能で対応したい場合のCSS
    3. アイコンフォントの色を一括で変更したい場合
    4. アイコンフォントの色を、それぞれ変更したい場合
  8. ボタンの文字列を変更するCSS
    1. 『メニュー』の文字だけ変更
    2. 『ホーム』の文字だけ変更
    3. 『検索』の文字だけ変更
    4. 『トップ』の文字だけ変更
    5. 『サイドバー』の文字だけ変更
  9. Cocoon新機能、モバイルフッターメニューに変更後、スタイルがくずれた
    1. コピペしてたスタイル(CSS)どれを消せば良い!?
      1. ビバ★りずむで紹介したCSSをチェックし、styleを消す
  10. CSSをコピペしても反映しない場合
  11. 『メニュー』を開いたナビ。背景・文字デザインを装飾
    1. スライドイン左側『メニュー』の項目が見当たらないとき
    2. スライドイン『メニュー』ボタンをタップで、ページ移動するリンクを付けたい
      1. メニュー・ホーム・検索をリンクに変更
  12. さいごに

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

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;
}

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

Cocoonスライドイン新機能、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

Cocoonモバイルフッター用メニューボタンの文字色を一括変更させるCSS指定方法の表示例

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

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

 

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

スライドインボタンにマウスを置いたとき背景・文字色を変更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ビューの横幅を移動させると簡単!

アイコンフォントを変更

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

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

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

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

Cocoonモバイル用フッターボタンのアイコンフォントのみ一括色変更したスタイル

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

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

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

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

Cocoonモバイルフッター用ボタンの、メニュー・ホーム・シェア・フォロー・検索・トップ・サイド、それぞれのアイコンフォントのみ変更したスタイル例

スライドインのボタンに使っている『メニュー・ホーム・シェア・フォロー・検索・トップ・サイド』のアイコンフォントの色のみ変更したい場合の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

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

スライドインの文字列変更イメージ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';
}

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

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

/* メニューの文字列を変更 */
.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新機能、モバイルフッターメニューに変更後、スタイルがくずれた

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

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

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

 

コピペしてたスタイル(CSS)どれを消せば良い!?

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

CSSの指定{らへんから}までを文字を残さずに消してください。
  • 以下が1セット
/* これはコメント */
.hoge {
	style: value;
}

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

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

/*
上↑や、下↓のように、消し忘れるとstyleが反映しない…。と困る事になるので、気を付けてくださいね。
}

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をコピペしてたstyle。どれを消せば良いに書いた、styleの消し忘れには注意してくださいね❦

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!

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

Cocoonスライドイン『メニュー』をタップしたとき出てくるナビメニュー領域のカスタマイズ

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

完成イメージhover時の見た目

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

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

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

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

Cocoonスライドインにメニュー項目がないとき、グローバルメニューの設定する。その説明画像

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

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

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

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

 

チェック!

公式ページをチェックし、設定を行ってくださいね。

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

 

 

 

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

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

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

スライドイン、メニューボタンのカスタマイズ:tmp/mobile-menu-buttons.phpファイルの編集方法、触る場所の説明

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

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

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

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

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

上記フォーラム記事の見出し

tmp/mobile-menu-buttons.phpファイルの編集方法を書いてるので、簡単な見出しとして。

  1. 親テーマフォルダから子テーマに導入する方法|#15698
    万が一エラーが出たときの対処付き
  2. 『メニュー』項目をHTMLごと表示を消す:削除する方法、メニュー項目欄に任意のリンクを入れるHTMLの書きかた|#post-15699
  3. 『ホーム』項目を削除する、ホームに任意のリンクを入れる方法|#post-15700
  4. 『検索』項目を削除する方法、検索欄にリンクを入れたいときのHTML|#post-15701
  5. このカスタマイズでスライドインのアイコンレイアウトがくずれた原因・対処#post-15702

書いてある通り、HTMLをキチンと書き換えたのに、アイコンフォントのレイアウトがくずれ、下にある文字列がみえなくなった原因は

  • 不要な余白やスペースができてしまったから

HTMLタグにスペースをいれなければOK!

さいごに

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

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

Cocoonスライドインのナビメニュー領域のカスタマイズ

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

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

この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
Cocoonカスタマイズ
フォローする
スポンサーリンク
スポンサーリンク
ビバ★りずむ

Comments

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

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

トップへ戻る
タイトルとURLをコピーしました