クエスト4：パーマリンクとサイト名を設定しよう！
jinlab
JIN:Rクエスト
クエスト13：ウィジェットを設定しよう！ブログを見やすく整える
jinlab
記事内に商品プロモーションを含む場合があります
ブログの第一印象を決めるのは、記事の中身だけではありません。
読者が「このブログ、読みやすい！」「他にも記事を見てみたい！」と感じる裏には、“サイドバーの仕掛け”が隠れているんです。
今回のクエスト13では、JIN:Rテーマの「ウィジェット機能」を使って、サイドバーに検索・プロフィール・新着記事・カテゴリーを設置していきます。
さらに、読者の目線を逃さない「スクロール追従エリア」や「記事下ウィジェット」も活用して、回遊率・滞在時間アップを狙える導線設計に挑戦！
初心者でも迷わずできるように、手順とポイントをわかりやすくまとめました。
あなたのブログが、もっと読まれるサイトに変わる第一歩。さあ、一緒に整えていきましょう！
目次
今日のゴール
今回のクエストで目指すのは、この3つです。
今日のクエストの目的は？
- サイドバーに必要なパーツ（プロフィール・検索・人気記事・カテゴリー）を設置する
- スクロールしても常に表示される「追従ウィジェット」を活用する
- 投稿記事の下にもプロフィールとSNSシェアを設定して、信頼性や回遊性を高める
今日のゴールは、「読者の目線が止まる場所」を意識して、迷わず行動できるブログ導線をデザインすることです！
1. ウィジェットの基本を知ろう
ウィジェットとは？
ウィジェットとは、ブログのサイドバーやフッターなどに設置できる“情報ブロック”のこと。
例えば、次のようなものがウィジェットです：
- 記事を検索できる「検索ボックス」
- 自己紹介を表示する「プロフィール」
- 人気記事や新着記事のリスト
- カテゴリー一覧やタグ一覧
- SNSリンクやLINEへの誘導ボタン
ブログの見た目を整え、読者にとって「使いやすい導線」や「知りたい情報への近道」をつくるための重要なツールです。
ウィジェットの設置場所
JIN:Rテーマでは、以下のような場所にウィジェットを配置できます：
| ウィジェットエリア | 主な表示場所 |
|---|---|
| サイドバー | 記事の右側（PC）や記事下（スマホ） |
| スクロール追従 | 常に画面に表示され続ける追従エリア |
| 投稿記事下 | 各記事の下に表示されるエリア |
2. サイドバーを整えよう
サイドバーは、訪問者が「今どこにいるか」「このブログは何を発信しているのか」を把握するための“ナビゲーションの拠点”です。
JIN:Rでは、ブロックエディターで自由にウィジェットをカスタマイズできるので、配置にもこだわると効果的です。
ここでは、以下の順番でサイドバーを整えていきます。
管理画面から「ウィジェット」へ移動
ダッシュボード左メニューから「外観」＞「ウィジェット」をクリックする。
「サイドバー」エリアを確認
右側に「サイドバー」エリアをクリックする。
不要なウィジェットを削除
各ウィジェットをクリックするとブロックの詳細が表示されます。
以下のようにして削除できます：
- ブロック上部の「︙（縦3点）」をクリック
- 「削除」をクリック
これをすべての不要ウィジェットに対して繰り返し、サイドバーを空にします。
プロフィールを設置しよう
①ウィジェット画面で「＋」ボタンをクリック
→ ブロック追加のパネルが開きます。
②検索バーに「プロフィール」と入力
→ 「プロフィール」というブロックが表示されます。
③「プロフィール」ブロックをクリックして追加
検索バーを設置しよう
①ウィジェット画面で「＋」ボタンをクリック
→ ブロック追加のパネルが開きます。
②検索バーに「プロフィール」と入力して、
「プロフィール」ブロックをクリックする。
人気記事を設置しよう
見出しの設置
①ウィジェット画面で「＋」ボタンをクリック
→ ブロック追加のパネルが開きます。
②検索バーに「見出し」と入力して、
「見出し」ブロックをクリックする。
③「よく読まれている記事」と入力する。
人気記事の設置
①ウィジェット画面で「＋」ボタンをクリック
→ ブロック追加のパネルが開きます。
②検索バーに「記事リスト」と入力して、
「記事リスト」ブロックをクリックする。
③右上の「設定」をクリックする。
④「記事リスト」を設定をする。
- 「ブロック」をクリックする。
- 記事タイプを「PV順」にする。
- 表示する記事数を「5」にする。
- デザイン設定を「テキスト」にする。
⑤「記事リスト」の下部の「表示設定」を設定をする。
記事のView数を表示を「OFF」にする。
記事のView数とは、その記事が読まれた回数のことです。
カテゴリーを設置しよう
見出しの設置
①ウィジェット画面で「＋」ボタンをクリック
→ ブロック追加のパネルが開きます。
②検索バーに「見出し」と入力して、
「見出し」ブロックをクリックする。
③「カテゴリー」と入力する。
カテゴリー一覧の設置
①ウィジェット画面で「＋」ボタンをクリック
→ ブロック追加のパネルが開きます。
②検索バーに「記事リスト」と入力して、
「記事リスト」ブロックをクリックする。
完了したら「更新」を忘れずに！
右上の「更新」ボタンをクリックして、設定を保存しましょう。
ブログ画面を開いて、表示を確認してみてください！
これで、あなたのブログのサイドバーに必要なウィジェットの設置が完了しました！
読者にとって「見やすく」「使いやすい」導線が整った今、ブログの魅力はさらに伝わりやすくなっています。
3. 追尾サイドバーを整えよう
読者がページをスクロールしても、常に目につく場所にウィジェットを表示しておくことで、重要な情報への誘導がしやすくなります。
スクロール追従ってなに？
たとえば、読者が記事を読んでいても「目次」「LINE案内」「バナー」などが、サイドバーにくっついてスクロールしてくる仕組みです。
読者の動きを邪魔せず、自然にアクションを促せます。
管理画面から「ウィジェット」へ移動
ダッシュボード左メニューから「外観」＞「ウィジェット」をクリックする。
「サイドバー追尾【PC】」エリアを確認
右側に「サイドバー追尾【PC】」エリアをクリックする。
不要なウィジェットを削除
各ウィジェットをクリックするとブロックの詳細が表示されます。
以下のようにして削除できます：
- ブロック上部の「︙（縦3点）」をクリック
- 「削除」をクリック
これをすべての不要ウィジェットに対して繰り返し、サイドバー追尾を空にします。
RTOC設定でショートコードをコピー
①WordPress管理画面 → 「設定」＞「RTOC」をクリックする。
②「ショートコード」タブを開く
③「目次のショートコード」をコピーする。
ショートコード
[rtoc_mokuji]ショートコードを設置する
①「外観」＞「ウィジェット」を開く
②「サイドバー追尾【PC】」ウィジェットエリアを選択
③「＋」ボタンを押す。
④「ショートコード」ブロックを追加する。
④ショートコードrtoc_mokujiを貼り付ける
ショートコード
[rtoc_mokuji]⑤「ショートコード」を編集する。
RTOCをショートコードで表示したときに、「目次」というタイトル（見出し）を表示させて、より見やすく、読者が気づきやすいデザインにします。
タイトル付きで表示させるショートコード「title=”目次”」を追加編集する。
ショートコード
[rtoc_mokuji title="目次"]完了したら「更新」を忘れずに！
右上の「更新」ボタンをクリックして、設定を保存しましょう。
ブログ画面を開いて、表示を確認してみてください！
これで、ショートコードを使った目次ウィジェットの設置が完了しました！
小さな工夫の積み重ねが、読みやすく信頼されるブログへとつながっていきます。
4. プロフィール＆SNSシェアボタンの表示設定をしよう
ブログに訪れた読者に「このブログ、誰が書いているの？」と疑問を持たせないためには、プロフィールの表示がとても大切です。
また、記事を読んだ人が「これ、いいな」と思ったときに、すぐにSNSでシェアできるようにしておくことも、ブログの認知拡大には欠かせません。
プロフィール登録の表示エリアをONにする
管理画面からカスタマイズを開く
WordPress管理画面から「外観」＞「カスタマイズ」をクリックする。
「プロフィール登録」の選択
「プロフィール登録」をクリックする。
表示エリアの設定を確認・ONにする
ONにすると、プロフィールブロックに設定した内容が各エリアに自動表示されます。
SNS登録／シェア設定を行う
管理画面からカスタマイズを開く
WordPress管理画面から「外観」＞「カスタマイズ」をクリックする。
「SNS登録 / シェア設定」の選択
「SNS登録 / シェア設定」をクリックする。
シェアボタンのデザインを設定
デザイン選択
- アドバンス
- ベタ塗り
公開して設定を保存しよう
カスタマイズがすべて完了したら、「公開」ボタンをクリックして保存！
よくあるミスと対処法
- スクロール追従ウィジェットが表示されません！
-
JIN:Rでは、スクロール追従エリア専用のウィジェット枠があります。
「外観 ＞ カスタマイズ ＞ ウィジェット」内で、正しいエリア（サイドバー追尾）にブロックを入れているか確認しましょう。
Q
まとめ｜成果を振り返ろう
これで今日のクエストもクリア！
成果を振り返ろう！
- サイドバーに必要なパーツ（プロフィール・検索・人気記事・カテゴリー）を設置し、読者が迷わず回遊できる導線を整えた
- スクロールしても常に表示される「追従ウィジェット」を活用し、目次や重要な案内を読者の視界にキープできた
- 投稿記事の下にもプロフィールとSNSシェアボタンを設定し、信頼性の向上と、拡散・回遊を促す仕掛けを加えた
このクエストをクリアしたあなたのサイトは、導線設計も信頼感もワンランクアップ！
読者にとって「見やすく」「回遊しやすい」ブログに進化し、
安心して読まれ、広めてもらえる体制が整いました。
ABOUT ME
デザイン初心者でも、おしゃれなブログやホームページは作れます！
JIN:Rを使ったWeb制作の手順や、見た目を整えるコツを発信中。
難しい操作や専門用語はできるだけかみくだいて解説。
「自分でサイトを作りたい」と思ったあなたの最初の一歩を応援します。
