ブログ初心者必読!初心者でも必ず解決!【WordPress/Cocoon:デザイン編】モバイル(スマートフォン)表示にするとサイドバーが表示されない

ブログ

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

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

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

はつまい
はつまい

あれ??そういえばパソコンで見るとサイドバーが表示されているけど、スマホから見るとサイドバーがないじゃん!

ということに気づきました。(←遅い。笑)

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

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

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

スポンサーリンク

サイドバーとは?

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

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

サイドバーの設定

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

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

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

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

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

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

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

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

実際の画面

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

実際の画面↓↓

まとめ

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

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

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

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

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

ブログランキング・にほんブログ村へにほんブログ村


人気ブログランキング

コメント

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