【Cocoon】フッターモバイルボタン（モバイルスライドイン）を適用するとスマホ表示が崩れる？【謎】

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

その時に起きた謎の現象…だけでは内容が薄いので、ボタンのカスタマイズもちょっとだけまとめてみました。

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

しばし放置していた、フッターモバイルボタン。これ自体は不具合はでていないけど問題がひとつ。

スマホで見るとパソコン向けサイトを表示している感じになってしまう。

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

読み手がタップで調整しないとならない…。このままでもダメじゃないけど、見る側はストレス。できれば解消したい。

原因は何なのか、調べてみました。結論から書くとTwitterの埋め込みでした。

Twitter埋め込みが原因？
フッターモバイルボタンのカスタマイズ

Twitter埋め込みが原因？

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

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

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

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

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

blockquoteタグを弄ればいいのかな？と調べてみましたが時間かかるので、Twitter→Instagram投稿に変更。

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

現状、他記事ではＳＮＳを埋め込んでも崩れないんで、記事内の何かが邪魔してるとしか予想できず…。何かわかったら追記します。

というわけで、

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

の話でした。

管理人

ちなみにプラグインは確認済みです。影響なし

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

フッターモバイルボタンが実装されたことにより、既存のカスタマイズでは適用されない部分があったので、カスタマイズできたＣＳＳを置いておきます。

フッターモバイルボタンの設置方法はコチラをご確認ください。

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

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

アイコンの色を変更

かうたっくさんの虹色ボタンが素敵でしたのでリスペクトっす。７色→５色にしています。

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

フッターモバイルボタンは自分で表示数やリンク内容を選べます。私は「カスタムリンク」で５つ並べています。

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

この５つで問題ない方は以下をコピペでオッケー。入れ替えたい方は参考にどうぞ。

/* 目次 */
.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;
}

このカスタマイズのポイントは、

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

CSS classとは？
フッターモバイルボタン（モバイルスライドインメニュー）をカスタムリンクで作る時にある項目欄です。入力すると好きなアイコンに変更できます。

CSS classが空欄ならデフォルトアイコンとなり、上記のカスタマイズでオッケー。

CSS classを入力していれば入力したアイコンがボタンに表示されるので、カスタマイズも入力アイコンのクラス名を使う必要があります。

例えば、fa-hand-o-upというアイコンを使う場合のクラス名は .fa-hand-o-up.menu-iconです。

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

ちょっとわかりにくいですが、

アイコンを自分で選択した場合、カスタマイズもその選択に合わせる…というカタチです。

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

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

.menu-buttonでは一括変更できなかったので、以下を追加。

.cop-menu-caption（目次）
.top-menu-caption（トップ）

また、文字の大きさはデフォルトだと文字下が若干はみ出るので、微妙に小さくしています。

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

ボタンの背景色を変更

アイコン色をカラフルにする＆ボタンの圧を軽減するために、背景色は淡くした。

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

完成

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

シャレオツになったよー。アイコン色と文字色を一緒にしてもよさそうですね！

CSSまとめ

/* フッターモバイルボタン */
/* 目次 */
.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;
}
/* 文字色を一括変更 */
.menu-button,.cop-menu-caption,.top-menu-caption {
	color: #777777;
	font-size: 0.88em;
}
/* 背景色一括変更 */
.mobile-menu-buttons {
	background: #f7f7f7;
}