【WordPress/Cocoon】モバイル（スマートフォン）表示にするとサイドバーが表示されない

皆さんこんにちは、はつまいです。

ブログを書き始めて2週間。

ブログを書くのもだいぶ慣れてきたし、そろそろブログのデザインをいじってみたいなぁ、と思い色々と見ていると…

ということに気づきました。（←遅い。笑）

パソコンで見るとしっかりサイドバーが表示されているのに…。

そこで！今回はモバイル（スマホ）で閲覧する際にサイドバーを表示する方法をお伝えしていきます。

注) この記事では、ConoHa WING・WordPress・Cocoonを使っていることを前提で解説しています。　

サイドバーとは？

そもそもサイドバーとは？

パソコン上で見ると画面右側にあるプロフィールや最新の記事、お問い合わせフォームなどが載っている箇所です。

サイドバーの設定

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

サイドバーに載せたい項目を、左側の「利用できるウィジェット」から選択し、サイドバーのウィジェットエリアに移します。

並べている順番通りに項目が表示されますので、必要であればドラックして並べかえを行いましょう。

モバイル画面でサイドバーを表示させる方法

サイドバーの設定が出来たら、今回の本題「モバイル画面でサイドバーを表示させる方法」について解説します。

WordPress > Cocoon設定 > モバイル　を選択。

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

シンプルな手順ですが、これで設定はOKです。

実際の画面

モバイルのサイドバー設定、before&afterはこちら！

実際の画面↓↓

まとめ

モバイル画面でサイドバーを表示させたい場合の手順です。

1. WordPress > 外観 > ウィジェット　からサイドバーの設定
2. WordPress > Cocoon設定 > モバイル　を選択し、「モバイルボタン時コンテンツ下のサイドバーを表示」にチェックを入れる

Cocoonを使用していると様々な設定が「Cocoon設定」からできてしまうので便利ですね。

ブログの執筆をPCからしている方も多いと思いますが、読者はモバイルから閲覧することが非常に多いです。

モバイル視点だとどのように見えるか？を考えながらブログのデザインを勉強していきましょう♪

にほんブログ村

人気ブログランキング