皆さんこんにちは、はつまいです。
ブログを書き始めて2週間。
ブログを書くのもだいぶ慣れてきたし、そろそろブログのデザインをいじってみたいなぁ、と思い色々と見ていると…

あれ??そういえばパソコンで見るとサイドバーが表示されているけど、スマホから見るとサイドバーがないじゃん!
ということに気づきました。(←遅い。笑)
パソコンで見るとしっかりサイドバーが表示されているのに…。
そこで!今回はモバイル(スマホ)で閲覧する際にサイドバーを表示する方法をお伝えしていきます。
注) この記事では、ConoHa WING・WordPress・Cocoonを使っていることを前提で解説しています。
サイドバーとは?
そもそもサイドバーとは?
パソコン上で見ると画面右側にあるプロフィールや最新の記事、お問い合わせフォームなどが載っている箇所です。

サイドバーの設定
サイドバーの設定は WordPress > 外観 > ウィジェット から設定することができます。

サイドバーに載せたい項目を、左側の「利用できるウィジェット」から選択し、サイドバーのウィジェットエリアに移します。
並べている順番通りに項目が表示されますので、必要であればドラックして並べかえを行いましょう。
モバイル画面でサイドバーを表示させる方法
サイドバーの設定が出来たら、今回の本題「モバイル画面でサイドバーを表示させる方法」について解説します。
WordPress > Cocoon設定 > モバイル を選択。

「モバイルボタン時コンテンツ下のサイドバーを表示」にチェックを入れましょう。

シンプルな手順ですが、これで設定はOKです。
実際の画面
モバイルのサイドバー設定、before&afterはこちら!
実際の画面↓↓


まとめ
モバイル画面でサイドバーを表示させたい場合の手順です。
- WordPress > 外観 > ウィジェット からサイドバーの設定
- WordPress > Cocoon設定 > モバイル を選択し、「モバイルボタン時コンテンツ下のサイドバーを表示」にチェックを入れる
Cocoonを使用していると様々な設定が「Cocoon設定」からできてしまうので便利ですね。
ブログの執筆をPCからしている方も多いと思いますが、読者はモバイルから閲覧することが非常に多いです。
モバイル視点だとどのように見えるか?を考えながらブログのデザインを勉強していきましょう♪
コメント
分かりやすいコンテンツに感謝です。
しっかり解決できました。
安藤様、嬉しいコメント誠にありがとうございます。お役に立てて光栄です。また是非遊びにいらしてください。