こんにちは。ブログ管理人のよしくまです。
WordPressのCocoonでは、PCのサイドバーに設置している項目がモバイル（スマホ）だと、投稿内容や一覧表示の関連記事の下に表示されます。
表示項目が多いとスクロールが長くなってどこまで続くの？って思いますよね。スマホで下に表示される項目を、
少し短くしたい
何かに絞って表示させたい
という人もいるのではないでしょうか。
この記事では、Cocoonのモバイル表示について、
- モバイル画面で下に続くサイドバーを非表示にする方法
- サイドバーに表示させる項目をPCとは別にして、一部だけ非表示にする方法
を解説します。
スマホでのサイドバーを非表示にする
PCの設定でウィジェットにサイドバーを設置しているとスマホ画面にも反映されます。
スマホ画面だけでサイドバーの項目をすべて非表示にしたい場合は、スタイルシートに以下のCSSを追加します。
@media screen and (max-width: 1023px){
#sidebar{
display: none;
}
}
まず、「外観」⇒「テーマエディター」でスタイルシートの画面を開きます。
画面右上の「編集するテーマを選択」が「Cocoon Child」であることを確認して、上のコードを画像の位置か、一番下の空きスペースに貼り付けて「ファイルを更新」します。
自分のサイトで非表示になっているかを確認してみましょう。
モバイルボタンを設置している場合はもっと簡単です。次の手順で設定してみてください。
「Cocoon設定」の「モバイル」で「モバイルボタン時コンテンツ下のサイドバーを表示」のチェックを外して、画面左下の「変更をまとめて保存」をクリックします。
自分のサイトで非表示になっているかを確認してみましょう。
ヘッダーモバイルボタンの設置については、以下の記事で詳しく解説しています。
スマホでのサイドバーの一部を非表示にする
モバイル（スマホ）画面でのサイドバーを非表示にすると、サイドバーに設置されているすべてのコンテンツは非表示になります。
そうじゃなくて、
プロフィールと新着記事だけを非表示にしたい
ここのタイトルだけを消したい
など、スマホ画面の表示・非表示をより細かく設定していきたい場合は、変更したい箇所のCSSをスタイルシートに追加します。
カテゴリーを非表示にする
たとえば、サイドバーのボックスメニューだけを非表示にしたい場合は、以下のコードをスタイルシートのレスポンシブデザイン用のメディアクエリの下（一番下の空きスペースでもOK）に貼り付けます。
@media screen and (max-width: 1023px){
.box-menus{
display:none;
}
}
新着記事を非表示にする場合は、以下のコードを貼り付ければOKです。
@media screen and (max-width: 1023px){
.new-entry-cards{
display:none;
}
}
ウィジェットタイトルを非表示にする
カテゴリーを非表示にしても、ウィジェットのタイトルが残ってしまいます。
タイトルも消したい場合は、デベロッパーツール（検証ツール）を利用して、タイトルのidとclassから変更したい箇所を指定します。
下図でサイドバーの「新着記事」というタイトルを非表示にしたい場合を見てみましょう。
検証ツールを開いて矢印のところをクリックし、左側のブログページから「新着記事」（非表示を指定したい箇所）にマウスカーソルを合わせます。
文字列の背景に色がついたところが該当の箇所です。
そこからすぐ上にある「aside id=”」のあとに続く文字列（new_entries-2）と、吹き出しの上部に表示されている文字列（h3.widget-sidebar-title.widget-title）を使って、スマホ非表示用のコードを作ります。
こんな感じで↓
idの前には「#」、classの前には「.」をつけます。
デベロッパーツールでCSSを確認するのはちょっとややこしいので、間違えて必要な表示が消えてしまわないように注意しましょう。
私はCSSを間違えて、表示がおかしなことになって焦ることが多々あります。
最後に
WordPressのテーマCocoonは、スタイルシートをいじらなくてもいろんなカスタマイズができるので使いやすいです。
PC画面とスマホ画面を確認して、それぞれで見やすい表示にカスタマイズしていけるといいですね。
細かく設定を変えていきたい場合は、CSSのカスタマイズにも手をつけてみましょう。
コメント