この記事では無料で簡単なサイドバーの作り方を【画像ベース】で説明していきます。
この記事の内容をまねしたら プロが仕上げたようなおしゃれなサイドバー を作れるので、ぜひ最後まで読んでみてください。
※サイドバーは ブログ本文の横に表示される縦長の部分（=ウィジェット）で、
WordPress のデフォルト機能で簡単にカスタマイズできるので、自分好みの構成にしていきましょう。
では、さっそく詳しいやり方について解説していきます。
目次
サイドバーとは？
サイドバーとは、Webサイトの横に表示される縦長のスペースのことを指します。
サイト全体のデザインにアクセントを加えるだけでなく、読者にとって役立つ補足情報を表示できるのが大きな特徴です。
たとえば、次のようなコンテンツを自由に配置できます。
- 検索ボックス
- プロフィール
- カテゴリ一覧
- 人気記事や新着記事
サイドバーを上手に活用することで、ブログの見た目が整うだけでなく、ユーザーの使いやすさも向上させられる『とっても便利な要素』なんです。
サイドバーの表示・非表示を切りかえる方法
サイドバーは必ずしも必要なものではありません。
ブログの目的や、デザインの好みによって「サイドバーを表示する・表示しない」を決めてください。
なお、サイドバーの表示・非表示の切りかえ方法は、使用している WordPressのテーマによって異なります。
設定方法については、以下の記事でくわしく解説しているので、気になる方はあわせてチェックしてみてください。
⇒ サイドバーの表示・非表示のやり方はこちら
サイドバーをカスタマイズしよう
WordPressでは、サイドバーに表示する内容を自由に編集・カスタマイズできます。
以下で実際の設定手順をわかりやすく解説していきます。
WordPress 管理画面の左メニューから「外観」＞「ウィジェット」を選択します。
ウィジェット設定画面が表示されたら、ここからサイドバーをカスタマイズしていきます。
ウィジット画面には以下の2種類があり、ご利用の環境によって「いずれかのフォーマット」で表示されます。
「ブロックウィジェット」は比較的新しい仕様で、この形式に対応していないプラグインが多いのが実態です。
そのため、現在でも多くの最新テーマで、従来の「クラシックウィジェット」形式が採用されています。
もしブロックウィジェット形式が表示されていて使いづらい場合は、無料の「Classic Widgets」プラグインをインストールすることで、簡単にクラシック形式へ切り替えられますよ。
- WordPress 管理画面にログインする
- メニューから「プラグイン ＞ 新規プラグインを追加」をクリック
- プラグイン追加画面で「Classic Widgets」を検索
- 「Classic Widgets」をインストール＆有効化
ウィジェット設定画面が表示されたら、追加したいウィジェットをクリックしてください。
今回は例として「検索ボックス」を追加していきます。
ウィジェットの配置エリアを選んで「ウィジェットを追加」をクリックします。
※ WordPress テーマによってエリアの名称が異なります。サイドバーっぽいエリアを探してみてください。
以下のように、コンテンツを追加できたら完了です。
サイトを表示して、コンテンツが表示されているか確認してください。
次の章では、サイドバーに設置できるコンテンツや、それぞれの設定方法について解説していきます。
サイドバーに表示したいおすすめコンテンツ
ここからは、サイドバーにどんなコンテンツを設置できるのか、またそれぞれの基本的な設定方法についてご紹介していきます。
サイドバーに設置できる要素はつぎの10個です。
それでは、ひとつずつを見ていきましょう。
「検索ボックス」を表示する
検索ボックスは、読者がサイト内の情報を素早く探すのに効果的。
WordPressの標準機能で簡単に追加できるので、以下の手順を見ながら設定してみましょう。
タップして設定手順を見る
WordPress 管理画面の左メニューから「外観」＞「ウィジェット」を選択します。
ウィジェット設定画面が表示されたら、追加したいウィジェットをクリックしてください。
今回は例として「検索ボックス」を追加していきます。
ウィジェットの配置エリアを選んで「ウィジェットを追加」をクリックします。
※ WordPress テーマによってエリアの名称が異なります。サイドバーっぽいエリアを探してみてください。
以下のように、コンテンツを追加できたらＯＫ！
設定したらサイドバーに「検索ボックス」が表示されるので、確認してみてください。
以上でサイドバーへの「検索ボックス」の配置は完了です！
「プロフィール」を表示する
サイドバーにプロフィールを設置すると、運営者の「人柄」や「権威性」を伝えられます。
「どんな人が記事を書いているのか」が分かると記事への信頼アップにもつながりますよ。
おしゃれなプロフィール欄をかんたんに設置できるので、手順を見ながら一緒に設定してみてください。
タップして設定手順を見る
WordPress 管理画面の左メニューから「外観」＞「ウィジェット」を選択します。
ウィジェット設定画面が表示されたら「カスタムTHML」をクリックします。
ウィジェットの配置エリアを選んで「ウィジェットを追加」をクリックしましょう。
※ WordPress テーマによってエリアの名称が異なります。サイドバーっぽいエリアを探してみてください。
サイドバーエリアに「カスタムHTML」が追加されたら、クリックして展開します。
「内容」の入力欄に以下コードをコピー ＆ 貼り付けてください。
<div style="border-bottom: solid; font-weight: bold;">プロフィール</div>
<div style="backgound-color: white; border: solid 0.5px #938e8e59;">
<div style="width: 20em; text-align: center; height: 12em; margin-bottom: 13px; overflow: hidden; display: table-cell;">
<img src="アイコン画像のURLを貼り付け（例：https://exam.com/admin/uploads/2023/08/27171980_s.jpg）">
</div>
<div style="padding: 0px 20px 5px; text-align: center;">
<div style="font-size: 130%; font-weight: bold; margin-bottom: 0.5em; margin-top: 0.5em;">ニックネーム</div>
<div style="font-size: 90%; margin-bottom: 20px;text-align: left;">ここにプロフィール紹介文を書いてください。</div>
</div>
</div>
※ 赤字の部分は、みなさんのブログに合わせて記載を修正してください。
- ニックネーム：ニックネームを記載
- 紹介文：あなたのブログの紹介文を記載
- プロフィール画像：URLは「メディアライブラリ」から確認できます
入力できたら
ボタンを押して、変更を確定してください。
ここまで完了すると、サイドバーにプロフィールが表示されるので確認してみましょう。
これで設定完了です。
「カテゴリタグ」を表示する
「カテゴリー」「タグ」にはナビゲーションの役割があります。
サイドバーに設置すれば読者が必要な情報を探しやすくなるので、サイト内の回遊率アップにもつながりますよ。
それでは、実際の設定手順を見ていきましょう。
タップして設定手順を見る
WordPress管理画面にアクセスして「 プラグイン ＞ 新規追加 」を選択します。
「Cool Tag Cloud」を検索してインストールしてください。
インストールが終わると
ボタンが出てくるので、クリックして有効化しましょう。
WordPress 管理画面の左メニューから「外観」＞「ウィジェット」を選択します。
ウィジェット設定画面が表示されたら「Cool Tag Cloud」をクリックします。
ウィジェットの配置エリアを選んで「ウィジェットを追加」をクリックしましょう。
※ WordPress テーマによってエリアの名称が異なります。サイドバーっぽいエリアを探してみてください。
「Cool Tag Cloud」を追加すると、いくつかの設定欄が出てきます。
基本的にはデフォルトのままででOK。
設定値：Taxonomy（分類）だけお好みで変更してください。
※ カテゴリーやタグの設定は「投稿」→「カテゴリー」または「タグ」メニューから行います。
詳しい設定方法については別の記事でまとめているので、併せてご確認ください。
⇒ カテゴリーの設定方法についてはこちら
最後にボタンを押して、変更を確定してください。
設定したらサイドバーに「カテゴリタグ」が表示されます。
これで完了です。
「広告バナー」を表示する
ブログのサイドバーは、記事を読んでいるあいだも常に読者の視界に入る場所なので、そこに「広告バナー」を設置すればクリック率の向上も期待できます。
しかも記事本文の流れを邪魔せずに表示できるので、読者にストレスを与えにくいのも大きなメリット。
「収益性」と「ユーザーの利便性」を両立できる非常に効果的なコンテンツだと言えるでしょう。
それでは、手順を見ながらコンテンツを追加してみましょう。
タップして設定手順を見る
まずは ASPから広告コード を取得しましょう。
ASPとの提携がない方は、次の記事を参考にASPに登録して、広告の提携申請を実施してみてください。
⇒ おすすめASPの記事
すでにASPに登録済みの方は、提携ページにアクセスして広告コード（HTML）を取得してください。
今回はアクセストレードから広告コードを取得します。
WordPress 管理画面の左メニューから「外観」＞「ウィジェット」を選択します。
ウィジェット設定画面が表示されたら「カスタムTHML」をクリックします。
ウィジェットの配置エリアを選んで「ウィジェットを追加」をクリックしましょう。
※ WordPress テーマによってエリアの名称が異なります。サイドバーっぽいエリアを探してみてください。
サイドバーエリアに「カスタムHTML」が追加されたら、クリックして展開します。
「内容」の入力欄に以下コードをコピー ＆ 貼り付けてください。
「カスタムHTML」の入力欄に STEP１でコピーした 広告コードを貼り付けてボタンをクリック。
サイドバーに広告バナーが表示されるので確認してみましょう。
以上で広告の設置は完了です！
「おすすめ記事」を表示する
サイドバーに「おすすめ記事」を表示することで、読者を特定の記事へスムーズに誘導できます。
読者の目に入りやすい届く場所なだけに、導線を設置するのに最適なエリアなんですよね (*'▽')
おすすめの方法は「Content Views」プラグインの活用です。
このプラグインを使えば、表示したい記事を自由に選んで、かんたんにサイドバーに表示できます。
以下に設定手順をまとめていますので、画面を見ながら一緒に設定していきましょう。
タップして設定手順を見る
WordPress管理画面にアクセスして「 プラグイン ＞ 新規追加 」を選択します。
「Content Views」を検索してインストールしてください。
インストールが終わるとボタンが出てきます。クリックして有効化しましょう。
つぎは、みなさんの環境に合わせて「Content Views」を設定していきます。
WordPress 左メニューの「Content Views 」＞「新規追加」をクリック。
そしたら「Content Views 」の設定画面が表示されます。
「おすすめ記事」として表示するコンテンツや、記事の表示件数など、ご自身のブログに合わせて自由に設定してみてください。
オススメの設定や、各項目の詳細情報については、以下の記事でわかりやすく解説しています。こちらも併せてご確認ください。
設定が完了したら、設定画面の上側に「適用コード」 が表示されます。こいつをコピーしてください。
WordPress 管理画面の左メニューから「外観」＞「ウィジェット」を選択します。
ウィジェット設定画面が表示されたら「カスタムTHML」をクリックします。
ウィジェットの配置エリアを選んで「ウィジェットを追加」をクリックしましょう。
※ WordPress テーマによってエリアの名称が異なります。サイドバーっぽいエリアを探してみてください。
サイドバーエリアに「カスタムHTML」が追加されたら、クリックして展開します。
「内容」の入力欄に、さきほど STEP３でコピーした IDを貼り付けてボタンを押します。
サイドバーに「おすすめ記事」が表示されていることを確認してください。
以上で「おすすめ記事」の設置は完了です！
「人気記事」を表示する
あなたのサイトの中でも特によく読まれる記事は、内容がわかりやすく、読者からの評価も高い傾向にあります。
そのため、サイドバーに「人気記事」を表示することで、評価の高い記事へのアクセスを促し、読者の満足度やサイト全体の評価アップを狙えます。
特におすすめなのが「WordPress Popular Posts」プラグインの活用。
このツールを使えば、記事ごとのアクセス数を自動で集計して、人気記事をリスト化して表示してくれます。
手動で管理する必要がないので、初心者の方でも簡単に運用できますよ。それでは、設定手順を見ていきましょう！
タップして設定手順を見る
WordPress管理画面にアクセスして「 プラグイン ＞ 新規追加 」を選択します。
「WordPress Popular Posts」を検索してインストールしてください。
インストールが終わるとボタンが出てきます。クリックして有効化しましょう。
次にあなたのブログに合わせて、プラグインを設定していきましょう。
WordPress 左メニューの「設定 」＞「WordPress Popular Posts」をクリックしてください。
すると「WordPress Popular Posts」設定画面が表示されます。
「WordPress Popular Posts」の設定については、別の記事にまとめています。
オススメの設定や、各項目の詳細についてわかりやすく解説しているので、あわせてご確認ください。
プラグインの設定が完了したら、WordPress 管理画面の左メニューから「外観」＞「ウィジェット」を選択してください。
ウィジェット設定画面が表示されたら「カスタムTHML」をクリックします。
ウィジェットの配置エリアを選んで「ウィジェットを追加」をクリックしましょう。
※ WordPress テーマによってエリアの名称が異なります。サイドバーっぽいエリアを探してみてください。
サイドバーエリアに「カスタムHTML」が追加されたら、クリックして展開します。
「ブロックHTML」の入力欄に、以下コードをコピー ＆ 貼り付けてください。
<!-- wp:wordpress-popular-posts/widget {"title":"","limit":5,"range":"all","title_length":25,"excerpt_length":75,"display_post_thumbnail":true,"thumbnail_width":75,"thumbnail_height":75,"stats_views":false,"taxonomy":"category","custom_html":true,"wpp_start":"\u003cul class=\u0022wpp-list wpp-cards-compact\u0022\u003e","post_html":"\u003cli class=\u0022{current_class}\u0022\u003e{thumb_img}\u003cdiv class=\u0022wpp-item-data\u0022\u003e\u003cdiv class=\u0022taxonomies\u0022\u003e{taxonomy}\u003c/div\u003e{title}\u003c/div\u003e\u003c/li\u003e","theme":"cards-compact"} /-->
上記コードは、過去のアクセス数をもとに人気記事 TOP5 を表示するものです。もちろん、設定値を変えれば「表示記事数」や「集計期間」など自由にカスタマイズできますよ。
GitHub上でパラメータ情報が公開されているので、詳しく知りたい人はこちらもご確認ください。
入力したらボタンを押して、変更を確定しましょう。
設定したらサイドバーに「人気記事のリスト一覧」が表示されるので、確認してみてください。
「人気記事」の設定方法は以上で完了です！
「新着記事」を表示する
ブログのサイドバーに「新着記事」の一覧をリスト表示することで、読者に最新情報をタイムリーに届けられます。
常に新しい記事で更新されるので、リピーターに「新しい記事が更新されている」と伝わりやすく、再訪問時の回遊率のアップにもつながりますよ。
以下に設定手順をまとめているので、一緒に設定していきましょう！
タップして設定手順を見る
WordPress 管理画面の左メニューから「外観」＞「ウィジェット」を選択します。
ウィジェット設定画面が表示されたら「最近の投稿」を追加します。
ウィジェットの配置エリアを選んで「ウィジェットを追加」をクリックします。
※ WordPress テーマによってエリアの名称が異なります。サイドバーっぽいエリアを探してみてください。
以下のように、コンテンツを追加できたらＯＫ！
設定したらサイドバーに「最近の投稿」のリスト一覧が表示されます。確認してみてください。
以上で「新着記事」の設置は完了となります！
「目次（もくじ）」を表示する
サイドバーに「もくじ（目次）」を表示すると、記事の構成がぱっと見でわかり、読者が必要な情報にすぐアクセスできるようになります。
とくに長い記事では、「今どこを読んでいるのか」「次にどんな内容があるのか」が視覚的に伝わり、読者のストレスを大幅に軽減できるのが大きなメリット！
また、サイドバーに目次を固定表示すれば、スクロール中も目次が常に見える状態を保てるので、利便性や回遊率がぐっと高まりますよ。
「Table of Content Plus」プラグインを活用すれば、かんたんに取り入れられるので、以下の手順を見ながら設定してみてください。
タップして設定手順を見る
WordPress管理画面にアクセスして「 プラグイン ＞ 新規プラグインを追加 」を選択します。
「Table of Content Plus」を検索して、インストールしてください。
インストールが完了したらボタンが表示されるので、クリックして有効化しましょう。
つぎに「Table of Content Plus」の表示形式を設定していきます。
WordPress の左メニューから「設定」＞「TOC+」を選択してください。
「Table of Content Plus」の設定画面が表示されます。
※設定の詳細については、下記の解説記事で詳しくまとめています。あわせてご確認ください。
プラグインの設定が完了したら、サイドバーに目次を追加していきます。
WordPress 左メニューから「外観」＞「ウィジェット」を選択してください。
ウィジェット設定画面が表示されたら「TOC＋」を追加します。
ウィジェットの配置エリアを選んで「ウィジェットを追加」をクリックします。
※ WordPress テーマによってエリアの名称が異なります。サイドバーっぽいエリアを探してみてください。
以下のように、コンテンツを追加できたらＯＫ！
ブログを開いて、サイドバーに目次が表示されているか確認してみましょう。
以上で「目次」の追加は完了になります！
サイドバーコンテンツの位置を変える方法
ここからは、サイドバー上の「コンテンツ」の配置を入れ替える方法について解説していきます。
WordPress 左メニューから「外観」＞「ウィジェット」を選択します。
ウィジェットの編集画面が開くので、ここでサイドバーの配置を変更していきます。
移動したいブロックをドラッグ＆ドロップで任意の場所に移動してください。
これだけで完了です。
サイトを表示してコンテンツが入れ替わっていることを確認しましょう。
ページごとにサイドバーのコンテンツを切り替える方法
サイドバーには、検索ボックスやプロフィールなど便利な要素を配置できますが、
「固定ページだけに表示したい！」「特定の記事には表示させたくない…」
こんなふうに、ページごとに表示・非表示を切り替えたいシーンもありますよね。
そんなときに便利なのが「Widget Options」プラグインです。
このプラグインを使えば、ウィジェットごとにページ単位で表示の制御が可能に！
5分ほどで簡単に設定できまるので、以下の手順を見ながら一緒にやっていきましょう。
タップして設定手順を見る
WordPress管理画面にアクセスして「 プラグイン ＞ 新規追加 」を選択します。
「Widget Options」を検索してインストールしてください。
インストールが完了したらボタンが表示されるので、クリックして有効化しましょう。
つぎに「Widget Options」プラグインの設定を最適化していきます。
WordPress の左メニューから「設定」＞「Widget Options」を選択してください。
設定画面が表示されたら、各機能を以下の状態がなっているか確認しましょう。
・Classic Widgets Screen
・Gutenberg Page & Post Block Options
・Pages Visibility
・Devices Restriction
・Custom Alignment
・Hide Title
・Classes & ID
・User Login State
・Display Logic
「Disable(無効)」になっている項目があれば、クリックして「Enable(有効)」に切り替えてください。
WordPress 左メニューから「外観」＞「ウィジェット」を選択してください。
記事ごとに表示・非表示を切り替えたいウィジェットを展開したら、ページ表紙・非表示の設定ができます。
ここでは、「投稿ページ」のみで表示されるような設定にしました。
ページ単位での細かな設定もできるので、詳しく知りたい人は以下の記事もチェックしてみてください。
最後に
ボタンを押して変更を確定しましょう。
サイトを確認して、設定したとおりに表示が切り替わっていれば完了です！
おすすめプラグイン
「サイドバーをもっとおしゃれにしたい！」「もっと充実させたい」
そんな方には WordPress のテーマや、プラグインの活用がオススメ！
プラグインは基本的に無料で利用できるうえ、高クウォリティーのコンテンツを簡単に取り入れられるので、活用しない手はありありません。
ということで、サイドバーづくりに役立つプラグインを6つ厳選しました。
- Cool Tag Cloud：タグを表示できる
- WordPress Popular Posts： 人気記事のランキングを表示できる
- Content Views：特定の記事をリストで表示できる
- Table of Content Plus：目次を自動生成できる
- Content Aware Sidebars：ウィジットを記事ごとに表示・非表示できる
- Fixed Widget and Sticky Elements： サイドバーをスクロール固定できる
どれも簡単に設定できるのでぜひ取り入れてみてください！
QA
サイドバー に関する よくある質問 をまとめました。
すべて初心者の方が悩みやすいところなので、ぜひ参考にしてください。
サイドバーが表示されない原因はなに？
サイドバーが表示されない主な原因は WordPress テーマの設定を「サイドバー非表示（１カラム表示）」にしていること がほとんど。
サイドバーを表示（２カラム表示）するよう、設定を変更する必要があります。
まずは テーマの設定 を確認してください。
※テーマごとに設定の確認方法が異なります。ご利用のテーマのやり方をご参照ください。
Affinger で設定する場合
⇒ 参考：https://seashell-spa.com/affinger6-wordpress-scroll/
Cocoon で設定する場合
⇒ 参考：https://kenjineer0224.com/cocoon-sidebar-contents-follow/
SWELL で設定する場合
⇒ 参考：https://swell-theme.com/function/3373/
上記を実施しても問題ない場合は、つぎの原因が考えられます。
１．変更が保存できてない。
⇒ 対処法：「外観 ＞ ウィジット」でウィジット編集画面を開き、カスタマイズが反映されているかを確認してください。ウィジット変更後はかならず「更新」ボタンを押しましょう。
２．HTMLコードが間違っている
⇒ 対処法：カスタマイズに HTMLコードを用いた場合、そのコードが間違っていたら当然 コンテンツは表示されません。正しい HTMLコードに修正してください。
３．プラグインが干渉してる
⇒ 対処法：干渉しているプラグインを無効化してください。
サイドバーって必要なの？
結論：サイドバーは あった方が良い
サイドバーの有無がSEO評価に直接的な影響を与えることはありません。
ただ、サイトの「デザイン性」や「回遊率」に対する影響力は大きいので、サイドバーは入れておいた方が無難でしょう。
以下のメリットやデメリットを見てみて、サイドバーを設置するかどうかを判断してください。
- 広告 や おすすめ記事 を掲載すると、PV向上・成果発生につなることがある
- サイトを回遊してもらうための導線になる
- PCで表示した際の見栄え・使い勝手が良くなる
- 設置に手間がかかるが、手間のわりに効果が薄い
- スマホで表示した場合は、サイドバーが本文の下に回り込むため利用されにくい
- サイドバーのデザインが悪いとサイト全体が低品質に映る
サイドバーはどんな構成が良いの？
コンテンツごとに 役割があるので、あなたが「なにを重視したいか」によって最適な構成が決まります。
- サイトや記事に 権威性や信頼性 を持たせたい場合
⇒プロフィール - マネタイズを最大化させたい
⇒ 広告 - サイト全体の回遊率を高めたい
⇒ 関連記事、最近の投稿 - ユーザを特定の記事に流したい
⇒ おすすめ記事
こんな感じです。
QAは以上になります。
ここまで サイドバーのカスタマイズ方法について解説してきましたが、納得のいくサイドバーは作れそうでしょうか？(≧▽≦)
ここまで読んでいただきありがとうございました！
＼この記事を読んだ人に人気／
-
おしゃれで参考になるブログのデザイン42選【ブログ初心者入門】