Cocoon「トップへ戻るボタン」がスマホで表示されない問題チェックポイント

Cocoonページの上部へ矢印 Cocoon
スポンサーリンク

スマホで自分のこのサイトを見ていたら

「あれ。ページの上の方に戻る矢印が出てこない」

こんにちは、Cocoonカスタマイズ大好き、おだぎぃ(@odagie)です。

このブログはWordPressと無料テーマCocoonを利用して運営しています。

スポンサーリンク

トップへ戻るボタンが表示されない問題

Cocoonトップページへ戻るボタンが表示されない

今日突然気づきました。
Cocoonを使って作っているこのブログ、スマホ画面にスクロールの矢印 ▲ がいつの間にか表示されなくなっている。

記事が長い時に、サクッとページの上に戻れるボタンです。

PCでは表示されています。どーして。

トップへ戻る矢印
PC表示画面

CSSを自分で激しくいじっているので、いつの間にか機能を壊してしまったかと思いました。

モバイルのCocoon設定状況

Cocoonモバイル設定

ネットで[Cocoon トップへ戻る スマホ 表示されない]て検索すると、

記事に十分な長さが無い場合は表示されません。

んなこと知ってるわ!

検索迷子は、それは知ってて困っているから検索しているのです。

このブログサイトは、プラグインは極力使わないようにしているので、
プラグインによる影響で矢印▲が表示されないわけではなさそうです。

と、なるとCocoon本体の設定。

Cocoon設定に行って
Cocoonの設定画面へ進む
「ボタン」▼
Cocoon設定ボタンタブ

ここがまさに「トップへ戻る」設定画面ですが、ちゃんと設定はされてます。

PCは表示されてますから、設定は効いてるんですよ。

つぎ。

解決した方法

「モバイル」▼
Cocoonモバイルの設定

「TOPへ戻る矢印を表示する」

いまの設定はコレ▼
Cocoonモバイル設定

フッターモバイルボタン。つまりこれです↓

Cocoonフッターモバイルボタン

ん?

そうですか。

設定をこちらにポチ▼
「ボタンを表示しない」

出ました!

Cocoonトップへ戻るが表示された
トップへ戻るボタン

これだけでした (-.-)

トップへ戻るボタンが表示される・されない設定

トップへ戻るボタン

モバイルメニューの設定で、ページの上へ戻るボタンが表示されるかは以下のとおりでした。

モバイルメニュー矢印の表示
ボタンを表示しない
トップメニュー
ヘッダーモバイルボタン
フッターモバイルボタン
ヘッダー・フッターモバイルボタン

つまり、フッターモバイルボタンに「トップへ」があるので、フッター表示の時は、矢印表示なし。というシンプルなルールでした。

また一つ、Cocoonの知らなかった側面を知りました。

モバイルメニューの設定によって、矢印が表示されない(メニューに含まれる形式になる)ので、自分のサイトのユーザビリティに合わせてぜひ選択してみてください。

本日は以上です。

ご清聴ありがとうございました!

\Twitter@odagie)ではブログの更新情報や日常を発信中/
ブログの感想や、いいねを頂けると泣いて喜びます。お気軽に交流ください。

フォローよろしくお願いします。

タイトルとURLをコピーしました