SWELLのPC表示時のサイドバーのデザイン設定とカスタマイズ方法

こんにちは、おゆ会です。

今回は、SWELL環境下でPCの画面幅で見た時のサイドバーの設定をしていこうと思います。

ご紹介する作業手順は以下の通りです。

STEP
サイドバー自体を表示させるかどうか

サイドバーがないサイト設計の場合もありますから、まずはじめにサイドバー自体を利用するかどうかを決めて、その上で左右どちらに設置するのかを決めます。

STEP
何をサイドバーに表示させるか

サイドバーに表示させたい項目(WordPressではウィジェット)を決めて設定していきます。

STEP
デザインを決める

最後に、細かい見た目の調整を行います。

もちろん、一度設定した後にそれぞれ調整することもできますし、どの順番で手を付けても問題ないので気になった手順で自由に設定できますからご安心ください。

それではどうぞ。

目次

サイドバー自体を表示させるかどうか

これは、カスタマイザーのサイドバーから設定できます。

カスタマイザーのサイドバーの項目を選ぶと、「サイドバーを表示するかどうか」という欄があるので必要に応じて変更しましょう。

トップページ、投稿ページ、固定ページ、アーカイブページでそれぞれ表示するかしないかを選べます。

記事自体がメインコンテンツとなるブログやオウンドメディアなどでは、サイドバーありの設定が多いですが、企業のホームページや、クリエイターの自己紹介用のポートフォリオサイトなどでは画面いっぱいに表示させるサイドバーなしの設定もよく使われます。

トップページだけはサイドバーなしで、その他のページはありにするという設定もよくありますね。

サイドバー設定はPCでの表示に関する設定なので、そのあたりも意識しておくといいかもしれません。

サイドバーの位置を右にするか左にするか

サイドバーを表示させる場合、画面の右側か左側かを選ぶことができます。

この設定は、カスタマイザーのサイドバーから設定できます。

カスタマイザーのサイドバーの項目を選ぶと、「サイドバーの位置」という欄があってそこに、「左」「右」を選択する箇所があります。

初期設定だと右になっていると思います。

ちなみに、左と右のどちらがいいのかという問題がありますね。

個人的な本音としてはどっちでもいいかなと思っていますが、一応知っておいて損がない情報として、視点移動の経験則として左から右に文字を読み進めていく横書きの場合、左上、左側が起点になるということは覚えておくといいかもしれません。

それを踏まえると、なるべくページ遷移をさせずにそのページ内でユーザーの行動を完結させる設計の場合は、コンテンツの重要度が高くなる右サイドバー。

サイト内のコンテンツをユーザーが巡っていくように設計する場合は、サイト全体の構成とその中で今どの場所にいるのかという情報が視覚的に把握しやすい左サイドバーが安定です。

サイト内の回遊率を高めるという基準でサイドバーについて解説している記事を見かけますが、プロの視点として補足しておくと、他のページに行くというのは広告収益型モデルであるまとめサイトなどのページビュー数と収益の相関関係が強い場合という条件の話です。

まず最初に、自分がどういう目的でWEBサイトやブログを運用しようとしているのかを再確認して、その目的を達成するためにより効率のよい手立てとしてデザインを考えるという順序を大切にしましょう。

ちなみに単純な流行という面では、コンテンツが左側になる右サイドバーなのかなと思います。

動画サイトなどが分かりやすいですが、メインコンテンツとなる動画は左上側に配置されますよね。

生活上よく触れる形式に合わせるというのは、読み手のストレスが少なくなるという意味で有力な選び方の一つです。

サイドバーに表示させる項目を決めるウィジェットの設定

サイドバーに表示させる項目は、WordPressのサイドバーにある「外観 > ウィジェット」から設定します。

※カスタマイザーのウィジェットからも設定できますが今回は省略します。

外観 > ウィジェットとメニューを辿っていくと、ウィジェットの設定画面が開きます。

画面左側に設定可能なウィジェットの一覧が、画面右側にウィジェットを設定する場所がそれぞれ表示されています。

左側にあるウィジェットを置きたい場所にドラッグアンドドロップで入れていくのがお手軽な設定方法です。

ウィジェットは、サイドバーに限らずフッターや記事の上や下に表示させることもできます。

SWELLを採用している環境でサイドバーに関係があるのは、

  • 共通サイドバー
  • トップページ専用サイドバー
  • 追尾サイドバー

の3つですから、この3点を解説していきます。

共通サイドバー

共通サイドバーでは、表示設定をした全てのページで表示させるサイドバーの項目を決めることができます。

WordPressをインストールした直後であれば、

  • 検索
  • 最近の投稿
  • 最近のコメント
  • アーカイブ
  • カテゴリー
  • メタ情報

の6つのウィジェットが設定されていると思います。

ある程度コンテンツが揃うまでは、特に変更せずそのままでもいいと思いますが、アーカイブとメタ情報はほとんどの場合で削除しておいた方がいいでしょう。

特に、メタ情報に関してはセキュリティの視点でないほうが無難ですし、記事を読む人とっては不要な項目だからという点からも削除したほうがよいです。

情報を体系的にまとめてユーザーにサイト内を回遊してもらうことを前提にしたサイトであれば、それをサポートする形で独自に表示させる項目を設定するといいですね。

人気記事のウィジェットを追加するなども有力です。

実際にサイト上で表示されるウィジェットの名前ですが、そのままだと検索や、最近の投稿といったデフォルトの名前になっていますが、▼ボタンを押してメニューを開いて「タイトル」を設定するとその名前が表示されるようになります。

不要な項目の削除方法については、右側のエリアからドラッグして左のエリアにドラッグすると削除できます。

右側のエリアにあるウィジェットのメニューを開いたときに、左下に表示される削除からも削除できます。

左下には、完全に削除するのではなく利用を停止状態にして保留しておくためのエリアもあります。

名前が似ている共通サイドバー【スマホ版】について

余談ですが、共通サイドバー【スマホ版】では、ここに何かを入れるとスマホ専用のサイドバーを設定できるようになります。

スマホのサイドバーはコンテンツの下に表示されるようになるので、独自に設定をする場合はそれを意識しておくといいですね。

何も設定しないと、共通サイドバーの内容がそのままスマホでも表示されます。

トップページ専用サイドバー

こちらにウィジェットを追加すると、トップページ限定で共通サイドバーの上にウィジェットを追加できます。

トップページから専用のページに飛ばしたいときや、情報の告知をしたいときに使います。

追尾サイドバー

こちらにウィジェットを追加すると、記事を読みながら画面をスクロールしても追加した内容が表示されるようにできます。

よく使われる方法としては、記事の目次や人気記事を表示させる方法ですが、申し込みや会員登録に関する項目を設置するのも強い使い方ですね。

気になったときにすぐに申し込みができるというのは、サイトを作っている側からするとしつこくないかな?と気になるものですが、利用者側からすると便利な機能なのでおすすめですよ。

公式サイトにも使い方の解説があるのでさらに詳しく知りたい方はどうぞ。

SWELL
画面に固定表示される「追尾サイドバー」の使い方 | WordPressテーマ SWELL
画面に固定表示される「追尾サイドバー」の使い方 | WordPressテーマ SWELLSWELL ver 1.2.2にて、「追尾サイドバー」機能が実装されました。このページでは、その「追尾サイドバー」機能の使い方について解説していきます。追尾サイドバーとはちな...

サイドバーのデザインを決める

最後にサイドバーの見た目についての変更方法をご紹介します。

主にウィジェットのタイトル部分に関する設定を中心に、カスタマイザーから設定を行います。

サイドバーのタイトル「サイト全体設定 > タイトルデザイン」

カスタマイザーで、サイト全体設定、タイトルデザインとメニューを辿ったときに表示される「ウィジェットタイトル」から変更します。

サイドバーのタイトルデザイン(PC)

PCで表示されるサイドバーについては、ここで設定します。

  • 下線
  • 左に縦線
  • 左右に横線
  • 塗り

の4パターンが設定可能です。

WordPressのカスタマイザーはリアルタイムで結果が確認できるので、サイト全体の雰囲気を見ながら決められますよ。

サイドバーのタイトルデザイン(SP)とスマホメニュー内のタイトルデザイン

余談ですが、こちらの二つはスマホ表示のときのコンテンツの下に表示されるメニューとしてのサイドバーと、ハンバーガーメニューを開いたときに表示されるメニュー部分の表示を設定します。

今回のテーマはPCのサイドバーなので詳細は省きます。

サイドバーのタイトルの色「サイト全体設定 > 基本カラー」

サイドバーで使用されているアクセントの色や塗りつぶしの色は、カスタマイザーで、サイト全体設定、基本カラーとメニューを辿ったときに表示される「メインカラー」から変更します。

ここで設定した色は、サイドバーに限らずコンテンツ内の見出しの色などサイト全体で使用されますので、その点はおさえておいてくださいね。

まとめ

今回は、SWELLの場合の解説でしたが、カスタマイザーとウィジェットの設定で調整していくのは基本的に他のテーマでも同じです。

サイドバーの設定は、サイトの印象に大きく関わるので見やすいように、必要な情報が伝わるようにカスタマイズしていきましょう。

それでは、最後までご覧頂きありがとうございました。

この記事を書いた人

おゆ会 おゆ会 ウェブ制作コンサル

やればできるという気持ちを支える土台作りで、「"難しいこと"を"新しいチャレンジ"に変える」ということを、仕事・プライベート共通のテーマにしています。

このサイトでは、自分でホームページを用意したいと思っている人、予算が取れないけど新しいことをはじめたい人のために、無料で情報公開を行っています。

ホームページ制作の仕事は今年で14年目。
最近は運用コストの低いオンラインサロンの構築や運営やサポートもしています。

仕事では、あなたに最適化した情報発信に関するご相談に対して、あなたの視点でお答えしています。ご相談・ご依頼お待ちしています。

ご相談・お問い合わせはこちら

目次
閉じる