【Cocoon】フッターモバイルボタンをカスタマイズ＆スマホ表示が崩れる問題

Cocoonで実装されているフッターモバイルボタン（スマホ画面下部に表示されるボタン）を弄ってみた。

＼フッターモバイルボタンってコレだね／

その時に起きた謎の現象と、この部分をカスタマイズをまとめてみました。

参考になればいいですね。

追記（20.01.09）
スキンを変えたら使っていたカスタマイズが反映されなくなったので、別バージョンを更新しました！

ボタンの表示が崩れる問題
- Twitter埋め込みが原因？
フッターモバイルボタンのカスタマイズ
反映しない場合は…
CSSまとめ

ボタンの表示が崩れる問題

まずは謎の現象について。

ある記事を作成していると、突然

スマホで見るとパソコン向けサイトを表示っぽくなってしまう…。

画面をダブルタップするとボタンが拡大・縮小したり、ボタンがスマホ画面に収まってない…

みたいな現象。

内容に支障はないんだけど、読み手がタップで調整しないといけなくて、ストレスだと思うの。

原因は何だ？調べてみました。

結論から書くとTwitterの埋め込みによる現象でした。

Twitter埋め込みが原因？

Twitterなどの投稿は、こういう手順で自サイトに埋め込むじゃないですか。

埋め込みたい投稿を開く
投稿右上「ポチっとした矢印（その他）」を押す
「ツイートへのリンクをコピー」
「ツイートをサイトに埋め込む」
どちらか選択
表示されたコードをコピぺー

どうやら、この埋め込みによって表示が崩れるようです。

コードを見てみるとこんな感じ。

<blockquote class="twitter-tweet" data-cards="hidden" data-lang="ja"><p lang="ja" dir="ltr">～～省略～～～

blockquoteタグを弄ればいいのかな？と調べてみましたが私には無理な内容なので、

Twitter→Instagram投稿に変更。

根本的解決になってないよ～って話ですが、特定の記事でだけ起きる現象だったので代用で済ませました。

他記事はTwitterを埋め込んでも崩れないんで、記事内の何かが反発しているとしか予想できませんでした。

何かわかったら追記します。

というわけで、

ひよさん

スマホ表示がおかしかったら
外部ツールの埋め込みやリンクを確認するといいかも？

という話でした。

さあ、本番のカスタマイズに移ります！

フッターモバイルボタンを設置していない方はまず公式を確認してくださいね。

フッターモバイルボタンの設定方法

スマホ画面のフッターに表示されるスライドインメニューボタンのカスタマイズ方法の解説です。

フッターモバイルボタンのカスタマイズ

テーマ環境：
Cocoon
（Season／Bizarre-Foods・変な食べ物）

えっと、テーマのアップデートやスキン変更でカスタマイズが反映されないことがあるので、反映確認できたものを何パターンかまとめております。

状況に合わせて参考にしてください＊

今回は女性向けのパステルカラフル～なフッターモバイルボタンにしようと思います。

かうたっくさんが紹介している虹色ボタンが素敵でしたので、参考にさせてもらいました。

ボタンを沢山置きたくないため、７色→５色にしています。

参考　CocoonスライドインをCSSだけでカスタマイズ！ – ビバ★りずむ

アイコンの色を変更する

↓　↓

フッターモバイルボタンは自分で表示する数やリンクの内容を選べます。

私は「カスタムリンク」で５つ並べます。

目次｜検索｜トップ｜シェア｜サイドバー

この５つで問題ない方は以下をコピペでオッケー。

他のリンクと入れ替えたい方は削ったり足したりしてみてね。

/* 目次 */
.toc-menu-icon::before {
	color: #ac8ace;
}
/* 検索 */
.search-menu-icon::before {
	color: #86b5c9;
}
/* トップ */
.top-menu-icon::before {
	color: #368251;
}
/* シェア */
.share-menu-icon::before {
	color: #d8b156;
}
/* サイドバー */
.sidebar-menu-icon::before {
	color: #ba7c7c;
}

反映されない時はコチラ↓でイケるかもしれません。

/* 目次 */
.toc-menu-icon {
	color: #ac8ace;
}
/* 検索 */
.search-menu-icon {
	color: #86b5c9;
}
/* トップ */
.top-menu-icon {
	color: #368251;
}
/* シェア */
.share-menu-icon {
	color: #d8b156;
}
/* サイドバー */
.sidebar-menu-icon {
	color: #ba7c7c;
}

カスタマイズがうまくいくポイントは、

ボタンのメニュー構造に【CSS class】を使っているかどうか。

CSS classとは？
管理画面「外観」から「メニュー」を開き、作成したボタンメニューから確認できます。
カスタムリンクで作る時にある項目「CSS class」欄に入力すると好きなアイコンへ変更可能。
空欄だとデフォルトのアイコンになります。

CSS classが空欄のまま
＝デフォルトアイコンになるので、上記のカスタマイズで○
CSS classを入力している
＝自分で選択したアイコンになるので、入力アイコンのクラス名を使ってカスタマイズする

つまり、

アイコンを自分で選択したら、カスタマイズもその選択に合わせる必要があります。

例えば、fa-hand-o-upというアイコンを使う場合は

.fa-hand-o-up.menu-iconに書き換えてカスタマイズ。って感じです。

Cocoon 2.0.0 ではこのカスタマイズを確認していません。
バージョン2.0.0以降では保証できません。ご了承ください。

/* トップ */
.fa-hand-o-up.menu-icon::before {
	color: #368251;
}

ボタンの文字色＋サイズを変更

続いてはボタンの文字色をカスタマイズ。

そしてデフォルトだと文字（キャプション）が若干はみ出るので、少し小さくしています。

/* 文字色一括変更 */
.menu-button,.cop-menu-caption,.top-menu-caption {
	color: #777777;
	font-size: 0.88em;
}

ボタンの背景色を変更

/* 背景色を変更 */
.mobile-menu-buttons {
	background: #f7f7f7;
}

できたカスタマイズがコチラ。

アイコン色と文字色を一緒にしてもよさそうですね！

反映しない場合は…

Font Awesome 4.7での方法です。
それ以外のバージョンは保証できません。

これまで紹介したようなカスタマイズが使えない方への参考情報です。

私の場合、スキンを変更したらアイコンカスタマイズがまるで反映しなかったんですね。

そんな時は「アイコンのクラス名をそのまま使う」と上手くいくかもしれません。

その手順を紹介します。

ひよさん

デフォルトアイコンでも、自分で選択したアイコンでもＯＫ

アイコンの公式ページから、同じアイコンを探して個別ページを開きます。

fa-list-alt: Font Awesome Icons

Font Awesome, the iconic font and CSS framework

管理人

私はまだ4.7ですが、フォントのバージョンは環境・設定に合わせてくださいね

例えば「サイドバー」アイコンの個別ページはココ。

fa-list-alt: Font Awesome Icons

Font Awesome, the iconic font and CSS framework

そしたらページ内にある
「i class="fa fa-list-alt"」という部分をコピーします。

コイツでカスタマイズしてやればいいワケです。

そんで反映できたのがコチラ↓です。

わかりやすく「背景色：黒／文字色：白」にしました。

/* モバイルフッターメニュー（スライドイン） */
/* 背景色 */
.mobile-menu-buttons {
	background: #000000;
}
/* 文字色一括変更 */
.cop-menu-caption,.search-menu-caption,.top-menu-caption,.share-menu-caption,.sidebar-menu-caption {
	color: #fff;
	font-size: 10px;
}
/* アイコン */
.fa-list-ul:before {/* 目次 */
	color: #fff;
}
.fa-arrow-up:before {/* 検索 */
	color: #fff;
}
.fa-search:before {/* トップ */
	color: #fff ;
}
.fa-share-alt:before {/* シェア */
	color: #fff;
}
.fa-list-alt:before {/* サイドバー */
	color: #fff;
}

これでも反映されない場合「!important」を追記すると結構反映できました。

カラーコードの隣に入力します。

例）color: #fff !important;

こんな感じで完成！

CSSまとめ

ver.2.0.0

/* フッターモバイルボタン */
.toc-menu-icon {/* 目次 */
	color: #ac8ace;
}
.search-menu-icon {/* 検索 */
	color: #86b5c9;
}
.top-menu-icon {/* トップ */
	color: #368251;
}
.share-menu-icon {/* シェア */
	color: #d8b156;
}
.sidebar-menu-icon {/* サイドバー */
	color: #ba7c7c;
}
.mobile-menu-buttons {/* 背景色 */
	background: #f7f7f7;
}
.menu-button,.cop-menu-caption,.top-menu-caption {/* 文字色一括変更 */
	color: #777777;
	font-size: 0.88em;
}

ver.1.9.*

/* フッターモバイルボタン */
/* 目次 */
.toc-menu-icon::before {
	color: #ac8ace;
}
/* 検索 */
.search-menu-icon::before {
	color: #86b5c9;
}
/* トップ */
.fa-hand-o-up.menu-icon::before {
	color: #368251;
}
/* シェア */
.share-menu-icon::before {
	color: #d8b156;
}
/* サイドバー */
.sidebar-menu-icon::before {
	color: #ba7c7c;
}
/* 背景色一括変更 */
.mobile-menu-buttons {
	background: #f7f7f7;
}
/* 文字色一括変更 */
.menu-button,.cop-menu-caption,.top-menu-caption {
	color: #777777;
	font-size: 0.88em;
}

上記で反映しない場合

/* モバイルフッターメニュー（スライドイン） */
/* 背景色 */
.mobile-menu-buttons {
	background: #000000;
}
/* 文字色一括変更 */
.cop-menu-caption,.search-menu-caption,.top-menu-caption,.share-menu-caption,.sidebar-menu-caption {
	color: #fff;
	font-size: 10px;
}
/* アイコン */
.fa-list-ul:before {/* 目次 */
	color: #fff;
}
.fa-arrow-up:before {/* 検索 */
	color: #fff;
}
.fa-search:before {/* トップ */
	color: #fff ;
}
.fa-share-alt:before {/* シェア */
	color: #fff;
}
.fa-list-alt:before {/* サイドバー */
	color: #fff;
}