【WordPress】Cocoonで上に戻るボタンがモバイルで表示されない時

Wの文字を持った手 ブログ

WordPressでブログを作り、記事を投稿していく中で、記事を読んでると途中に出てくる「上に戻るボタン」を付けたい!と思い、Cocoonのボタンで設定。

すると、パソコンの画面ではちゃんと表示されるのに、スマホから見ると表示されてない!!

なんで??

いろいろ調べてみるも原因も解決策も分からず…。いろいろと設定をいじっている内に原因が判明!

同じように悩んでいる人がいたら、少しでも情報があれば助かると思ったので、原因と解決策を解説します!

Cocoonで上に戻るボタンを設定する

赤い人と矢印型に並んだ白い人

Cocoonとは、わいひらさんが作られた高機能のWordPress無料テーマです。わいひらさんの運営している「寝ログ」はこちら↓

寝ログ
寝ながら出来るコトや使えるモノを紹介

まず、WordPressのダッシュボード画面からCocoon設定を押します。

パソコンの設定画面

すると、たくさんのカテゴリが出てくるのでその中からその中で、「ボタン」を選びます。

パソコンの設定画面

次に、トップへ戻るボタン設定から、「トップへ戻るボタンを表示する」にチェックを入れます。

あとは、ボタンのアイコンや色を選べば完了です。簡単ですね♪

ただ、最後に画面左下にある「変更をまとめて保存」を必ず押してください。これを押さないと変更が適応されません。

パソコンの設定画面

これで、上に戻るボタンが表示されるようになります。

上に戻るボタンをモバイルでも表示する

スマートフォンを持つ手

次に、上に戻るボタンをスマホでも表示出来るようにします。

まず、Cocoon設定の「モバイル」を選びます。

パソコンの設定画面

モバイルメニューの「トップメニュー」を選びます。

わたしはここを「フッターモバイルボタン」にしていたので、上に戻るボタンが表示されませんでした。

トップメニューを選ぶと、サイドバーは表示されなくなりますが、サイドバーに表示されているプロフィールや最近の投稿、アーカイブ、カテゴリ-などは、記事の一番下に表示されます。

最後に忘れずに「変更をまとめて保存」ボタンを押して下さいね。

できたー!!

たったこれだけのことでしたが、ここにたどり着くまでにめちゃくちゃ時間がかかりました…。何はともあれ、解決して良かった!

この情報が同じような問題に直面している人のお役に立てれば幸いです^^

おまけ

パソコンの画面を見て喜ぶ子どもたち

この記事を書いて初めて、吹き出しやパソコン画面のスクリーンショットのやり方を知りました!

吹き出しは、Cocoon設定の「吹き出し」から自分の好きな画像でアイコンを設定できます。

また、投稿画面の「+」ボタンを押して下の方までスクロールするとCocoon Blocksが出てきます。その中に吹き出しボタンがあるのでそこから挿入することができます。

スクリーンショットは、保存したい画面でパソコンのキーボードのWindowsのボタンとPrintScreenキーを同時に押すとできます。

これは、一番簡単な方法で他にもスクリーンショットして加工、保存できる方法はいくつかあるようです。

わたしのパソコンのキーボードでは、PrintScreenキーは「PRTSC/SYSRQ」というキーになっていました。

ちなみに、PRTSCというのはPrintScreenの略、SYSRQはSystem Requestの略です。

ただ、スクリーンショットしたものを画面右上の「編集と作成」から、「描画」を選んで赤い丸を書いて保存すると丸の書き始めから書き終わるまでが動画のように動く、ライブフォトになっていました。

それを赤い丸が入った状態の静止画にするのにやや苦戦しました。

これは、描画ではなく、タスクバーからペイントと検索し、ペイントを使えば図形なども使えて簡単に、綺麗に出来ました^^;

何事もやってみないと分からないですね。いい勉強になりました!

ここ最近、目次をつけたり、上に戻るボタンを表示させたり、吹き出しやスクリーンショットなど、新しいスキルを身に付けるのをがんばっています。

ちょっとしたことでも、機能を増やすだけで読みやすくなったり見栄えがするようになるので、「ブログを始めたよ!」という人はちょっと手間でもやっておくと良いかもしれませんね。

これからも、ちょっとずつスキルアップして読んでくれる人にとって読みやすく、興味が持てるような記事を書けるようにがんばります!

コメント

このサイトはreCAPTCHAによって保護されており、Googleのプライバシーポリシー利用規約が適用されます。

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