WordPressのCocoonにてスマホ表示のブログのメニュー配置を変更する方法

セミリタイアを目指して娘と奮闘中のまやえです。

ブログは奥が深いですね。執筆の数が増えるとコツを掴めてきますが、書くことはまだまだ尽きません。なかなか満足いく記事を書くことも簡単ではありません。

いつも記事を書き終わった後、PCで確認しています。たまにスマホ表示での確認もしていますが、スマホでの確認は記事の内容を見返すよりももっぱら「スマホ表示をしたときのカスタマイズのずれ」を徹底しています。

そしてこの前、スマホ表示で確認したらちょっとメニューの位置が気になってしまいました。

そんなことを考えたので、今回はWordPressのCocoonにてスマホ表示のブログのメニュー配置を変更する方法を紹介します。

スマホ表示のブログのメニュー配置を変更する方法

まずは自分のブログをスマホで確認してみましょう。

デフォルトでは、モバイル表示のメニューの配置は下に設定されてあると思います。

WordPressのダッシュボードを開き、「Cocoon設定」→「モバイル」をクリックします。

「モバイルメニュー」では、モバイル表示のブログのメニュー配置を変更できます。

「ボタンを表示しない」を選択すると、メニューボタンが非表示になります。

「トップメニュー」は、ブログの一番右上にメニューボタンが配置されます。クリックすると二枚目のようになります。

「ヘッダーモバイルボタン」は、ブログの一番上に表示されます。しかし、メニュー配置を一番上にしたい場合、ヘッダーモバイルボタンにするよりはトップメニューを選択したほうがわかりやすくて良いです。

「フッターモバイルボタン」は、先ほど紹介したデフォルト設定の配置です。なんやかんやこの配置が人気です。

「ヘッダー・フッターモバイルボタン」は、上で紹介した「ヘッダーモバイルボタン」と「フッターモバイルボタン」が両方設置されます。

「モバイルボタン」では、配置以外の設定ができます。

「モバイルボタンの固定表示」は、スクロールするときにメニューを隠すか固定で表示させるか選べます。

「サイトヘッダーロゴを表示する」は、モバイル表示のときにブログタイトル部分を表示させるか否かを選べます。

「モバイルボタン時コンテンツ下のサイドバーを表示」は、PC表示のサイドバーをモバイル表示で一番下に配置するかしないかを選べます。

まとめ

いかがでしたでしょうか。

ブログの作成は主にPCでやっているので、けっこうスマホの存在を忘れてしまいます。

自分で操作するときはPCなのでPC表示でのカスタマイズを気にしてしまいますが、ユーザーの多くはスマホから記事を読んでいるんですよね。そこを忘れてしまう人が、自分も含め少なくないです。

PC表示で違和感がなければよほどモバイル表示が変になることはないですが、いかんせんモバイル表示のほうが画面が小さいので、設置した画像が思いのほか小さく表示されることがあることもあり、そういった場合に備えて確認は必要です。

wordpressではPCでモバイル表示を確認できますが、なるべく自分のスマホで確認することをおススメします。

ブロトピ：こんな記事書きました！ブロトピ：ブログを更新しました！ブロトピ：ブログ更新通知をどうぞ！ブロトピ：ブログ更新しましたブロトピ：今日のブログ更新