クエスト13：ウィジェットを設定しよう！ブログを見やすく整える
jinlab
JIN:Rクエスト
クエスト1：ブロックエディタの使い方と記事作成の基本をマスターしよう！
jinlab
記事内に商品プロモーションを含む場合があります
「ブログを始めたばかりで、どこを触ればいいのか分からない…」
そんなあなたのための、ブログ投稿デビューの第一歩となるクエストです。
この記事では、WordPress初心者でも迷わず進められるように、
JIN:Rテーマでの記事作成に必要な「ブロックエディタ」の使い方を丁寧に解説します。
投稿画面の開き方から、段落・見出し・画像などの基本ブロックの操作、
さらにはカテゴリー・タグ・アイキャッチ画像・スラッグの設定まで、
ブログを書くために必要な「最低限の知識と操作」をこの1記事で身につけられます。
ブログの土台をしっかり整えて、あなたらしい記事作成の第一歩を踏み出しましょう！
目次
今日のゴール
今回のクエストで目指すのは、この3つです。
今日のクエストの目的は？
- 投稿画面（ブロックエディタ）を開いてみること
WordPressの管理画面から「新規投稿」を選び、実際に記事を書く画面を開きます。 - ブロックエディタの基本操作を知ること
段落・見出し・画像など、よく使う基本ブロックの使い方を覚えて、記事の構成をイメージできるようにします。 - 記事の基本設定（カテゴリー・スラッグ・タグ・アイキャッチ画像）を整えること
記事を整理し、読みやすく届けるための初期設定を確認しておきましょう。
これができれば、JIN:Rの装飾機能を試すための「練習台」が完成します。
いきなり完璧な記事を目指さなくて大丈夫。
まずは、“記事を書くってこういうことなんだ”と実感できる1歩を踏み出してみましょう。
1. 投稿画面を開いてみよう
ブログを書くには、まず「どこで書くのか」を知ることが第一歩です。
ここでは、WordPressの管理画面から「記事投稿画面（ブロックエディタ）」を開く方法を、初心者にもわかりやすくステップ形式で解説します。
ブロックエディタとは？
WordPressの最新記事編集機能で、テキストや画像などを「ブロック」として追加・編集できる仕組みです。
例えば、見出しブロック、画像ブロック、リストブロックなどがあります。
「投稿を追加」をクリック
左メニューから「投稿」＞「新規追加」をクリックする。
ここがポイント！
「固定ページ」ではなく、「投稿」を使うのがブログ記事の基本です。
新しい投稿画面が開く＝ブロックエディタが起動！
「新規追加」をクリックすると、記事を書くための投稿画面（ブロックエディタ）が自動で開きます。
この画面が、あなたの「記事作成のキャンバス」です！
表示されるもの
- 上部に「タイトルを追加」と書かれた入力欄
- その下に「文章を入力、または / でブロックを選択」という入力エリア
- 左上には「＋（ブロック追加）」ボタン
- 右上に「公開」「下書き保存」などの設定エリア（サイドバー）
以上で、記事を書くための「投稿画面を開く」操作は完了です。
次は、実際にどんなブロックが使えるのかを学んでいきましょう！
2. ブロックエディタの基本操作を知ろう
〜よく使う「段落・見出し・画像」ブロックをマスターしよう〜
ブロックエディタ（Gutenberg）では、文章・画像・見出しなどを「ブロック」ごとに追加していくスタイルで記事を作成します。
ここでは、よく使う3つの基本ブロックを、初心者にもわかりやすくステップで紹介します。
段落ブロックを使って文字を書こう
まずは、普通の文章（本文）を書いてみましょう。
「タイトルを追加」に記事のタイトルを入力
「タイトル追加」の入力欄に、記事のタイトルを入れましょう。
その下の白いスペースをクリック
タイトルの下にある「ブロックを選択するには「/」を入力」と表示されたエリアをクリック。
そのまま文章を入力してみましょう。
自動的に「段落ブロック」になる
入力した文章は、自動で「段落ブロック」として認識されます。
特別な設定は不要です。
Enterキーで改行すれば、次の段落へ
キーボードのEnterキーを押すと、新しい段落ブロックが自動で追加され、どんどん文章を続けられます。
ポイント
文字を打つだけで、自動的に段落として扱われるのでとても簡単！
難しい操作を覚える必要はありません。
見出しブロックを使って記事の構成を作ろう
見出しは、記事の内容を整理して読みやすくするために使います。
見出しを入れたい場所にカーソルを置く
文章（段落）の下にマウスを置くと、「＋」ボタンが表示されます。
※まだ文章がない場合は、「空白のエリア」をクリックする。
「＋」ボタンをクリック
ブロックの一覧が出てきます。
「見出し」ブロックを選ぶ
表示された一覧の中から「見出し」という名前のブロックを選択します。
（よく使う項目の上の方に出てきます）
見出しの文章を入力する
「見出しを追加」と表示されている部分に、見出しとして使いたい言葉を入力しましょう。
例：「この記事のポイント」「ステップの流れ」「まとめ」など。
見出しのレベル（H2・H3・H4）を確認する
見出しブロックを選ぶと、上にツールバー（黒い小さなバー）が表示されます。
そこに「H2」「H3」などのボタンがあります。
- 最初は H2 でOK！
- 必要に応じてH3（H2の中の小見出し）を使います。
H2 → H3 → H4の順番で使うと、読みやすくてSEOにも強い記事構成になります。
ポイント
- 見出しは「目次」となる要素です。
- 見出しがあると、読者が内容をざっくり把握しやすくなります。
- 書く前に「この見出しに何を書くか？」をイメージすると、記事全体がブレずに済みます。
画像ブロックで写真やイラストを入れよう
〜画像を入れると、記事がグッと見やすくなります〜
言葉だけの記事より、1枚の画像があるだけで読者の目を引きやすくなります。
ちなみにぼくは、画像を探すとき「O-DAN（オーダン）」っていうフリー画像サイトを使ってるよ。
日本語で検索できるし、商用利用OKの写真が多くてめっちゃ便利！
画像を入れたい場所にマウスを置こう
文章や見出しの下など、「ここに画像を入れたいな」と思う位置にカーソルを合わせます。
「＋」ボタンをクリック
カーソルを合わせた位置に「＋」ボタンが表示されるので、クリックします。
「画像」ブロックを選ぶ
ブロック一覧が表示されるので、その中から「画像」を選びましょう。
（よく使うブロックには上の方に出てきます）
画像の追加方法を選ぼう
3つの選択肢が出てきます。
- アップロード：パソコンから新しく画像を選んでアップする
- メディアライブラリ：すでにアップロード済みの画像を選ぶ
- URLから挿入：外部の画像URLを貼って表示させる
初心者さんには「アップロード」がおすすめです。
パソコン内の画像を選ぶ
パソコンのフォルダが開くので、使いたい画像を選びます。
（JPEG・PNG・WEBPなどの画像形式が使用できます）
画像が記事に表示される
選んだ画像が、記事内にそのまま表示されます。
大きさや配置も、あとから簡単に変更できます。
キャプション（説明文）を入れる（※必要な場合のみ）
画像の下にある「キャプションを追加」の部分に、説明文やコメントを入力できます。
（例：「○○のイメージ写真です」「使用例はこちら」など）
入れなくても問題ありませんが、説明をつけることで読者に伝わりやすくなります。
ポイント
すでにアップロードした画像を使いたいときは「メディアライブラリ」から選べます。
まとめ｜これだけ覚えればOK！
| ブロック名 | 使い方 | よく使う場面 |
|---|---|---|
| 段落 | 文字を打つだけで自動作成 | 普通の文章を書くとき |
| 見出し | ＋→見出し→レベルを選ぶ | 内容を整理したいとき |
| 画像 | ＋→画像→アップロード | 写真や図を入れたいとき |
まずはこの3つを覚えて、記事の土台を作ってみましょう。
3. サイドバーの基本設定を整えよう
記事を読者に届けやすくするための「仕上げ」の作業です。
この設定をしておくと、ブログ全体の整理がしやすくなり、検索結果での見え方もよくなります。
まずはサイドバーを表示しよう
サイドバーとは、カテゴリー・タグ・アイキャッチ画像などを設定する場所です。
投稿画面を開いた直後は、非表示になっていることもあるので、まずは表示させるところから始めましょう。
サイドバーを表示する
画面右上、プレビューや公開ボタンの近くに、
「サイドバー」アイコンがあります。
アイコンクリックすると、画面右側に「設定パネル（サイドバー）」が表示されます。
「投稿」タブを選んで設定を開始する
表示されたサイドバーの上部に「投稿」「ブロック」という2つのタブがあります。
「投稿」タブをクリックすると、以下のような設定項目が表示されます。
設定項目
- カテゴリー
- タグ
- アイキャッチ画像
- パーマリンク など
これで、記事を整理するための設定エリアが表示できました。
アイキャッチ画像を設定する
アイキャッチ画像とは、記事の表紙のような役割を持つ画像です。
ブログ一覧やSNSシェア時に表示され、読者の興味を引く大切なパーツです。
ここでは、画像を設定する手順を1つずつ丁寧に解説します。
「アイキャッチ画像を設定」をクリックする
サイドバーの一番上に、「アイキャッチ画像を設定」という項目が見つかります。
そこをクリックすると、画像を選ぶための画面が開きます。
画像をアップロードする or メディアライブラリから選ぶ
画像の選び方は2つあります：
① パソコンから新しい画像を使いたいとき
- 「アップロード」タブをクリック
- 「ファイルを選択」ボタンをクリックし、使いたい画像をパソコンから選ぶ
- アイキャッチ画像を選択して、「開く」をクリックする。
② すでにアップした画像を使いたいとき
- 「メディアライブラリ」タブをクリック。
- 使いたい画像を一覧から選びます
- 「アイキャッチ画像を選択」をクリックする。
「アイキャッチ画像を設定」を確認する
記事のサイドバーに画像が表示されます。
これで設定完了です。
これで、アイキャッチ画像の設定完了です。
ポイント
- 記事の内容をイメージさせる画像を選びましょう
- テキストが入っている画像もOKですが、スマホ表示では見づらくなる場合もあるので注意
- Canvaなどの無料ツールでオリジナル画像を作るのもおすすめです
スラッグ名（URL）を変更する方法
スラッグ名とは、記事ごとのURLの末尾に表示される部分のことです。
（例：https://example.com/slug-name/）
初期状態では英語のタイトルを元に自動入力されますが、自分でわかりやすく設定し直すこともできます。
「スラッグ」をクリックする
サイドバーの「スラッグ」をクリックする。
スラッグ欄を編集する
自分で好きな半角英数字に変更する。
入力欄の文字をすべて削除して、自分で決めたスラッグに書き換えます。
（例：my-first-blog、start-blog など）
スラッグを付けるときのルール
- 半角英数字とハイフン（-） のみ使用できます
- スペースは使えません（使うと自動でハイフンに変換されます）
- 日本語や全角文字は使わないようにしましょう
→ URLが長くなったり、文字化けしたり、リンクエラーの原因になることがあります。
これで、スラッグの変更と保存は完了です。
なぜスラッグを変更するのか？
スラッグを自分で設定しておくと、SEO（検索エンジン対策）や記事の管理がしやすくなるというメリットがあります。
英語でシンプルに、記事の内容が伝わるような単語を使うことで、URL自体が読者にも検索エンジンにも親切な設計になります。
カテゴリーを設定しよう
カテゴリーは、記事のジャンルやテーマを分類するためのラベルです。
設定しておくことで、ブログ全体の構成が分かりやすくなり、読者にも検索エンジンにも優しいサイトになります。
「カテゴリー」という項目を見つける
サイドバーを少し下にスクロールすると、「カテゴリー」という見出しが出てきます。
その下に、現在登録されているカテゴリーの一覧が表示されます。
該当するカテゴリーにチェックを入れる
自分が書いている記事に合うカテゴリーを選び、チェックを入れます。
例：「暮らしの知恵」「節約・家計管理」「豊かな使い方」など。
複数のカテゴリーにチェックを入れることもできますが、基本は1つだけにしておくのがおすすめです（サイト構成がシンプルになります）。
新しいカテゴリーを追加したい場合
- カテゴリー一覧の一番下にある「カテゴリーを追加」をクリックします。
- 入力欄が表示されるので、新しいカテゴリー名を入力します。
（例：「ブログ運営」「レビュー」など）。 - 「カテゴリーの追加」をクリックすると、すぐに一覧に反映されます。
- 追加したカテゴリーにもチェックを入れるのを忘れずに。
これで、カテゴリーの設定完了です。
ポイント
- 1記事＝1カテゴリーが基本。読者にも検索エンジンにも親切です。
- ジャンルが増えてきたら、「親カテゴリー」と「子カテゴリー」を使って階層化するのもOKです。
- カテゴリー名はわかりやすく・短めにつけましょう
（例：×お金を節約する方法 → 〇節約）
タグを設定しよう
タグとは、記事の内容を表すキーワードのことです。
カテゴリーよりも細かい単位で記事を整理するのに役立ち、読者が関連する記事を見つけやすくなります。
「タグ」の入力欄を見つける
「カテゴリー」の少し下に「タグ」と書かれたセクションがあります。
その中に「新しいタグを追加」と書かれた入力欄が表示されています。
タグを入力する
入力欄に、記事に関連するキーワードを入力します。
例：自己紹介, ブログ始めました, はじめての記事
追加する
入力が終わったら、「Enter（↵）」を押します。
追加したタグがすぐ下に表示されれば、設定完了です。
複数のタグを追加する
さらに、入力欄に、記事に関連するキーワードを入力します。
これで、タグの設定完了です。
ポイント
タグは自由につけられますが、「あとから見て分かりやすいか？」「似た意味のタグを重複させていないか？」を意識すると、ブログ全体がスッキリします。
はじめはシンプルに2〜3個くらいが目安です。
よくあるミスと対処法
- スラッグを日本語のままにしてしまう
-
【対処法】
日本語のスラッグは文字化けしたり、長いURLになってしまうことがあります。
半角英数字＋ハイフン（-） で短くわかりやすく設定しましょう。
Q
- カテゴリーを複数選びすぎる
-
【対処法】
基本は1記事につき1カテゴリーがベスト。複数選びすぎるとブログ全体が整理しにくくなります。
どうしても分けたい場合は、「親カテゴリー＋子カテゴリー」で調整しましょう。
Q
まとめ｜成果を振り返ろう
これで今回のクエストもクリアです！
今日できるようになったことを振り返ってみましょう。
成果を振り返ろう！
- 投稿画面（ブロックエディタ）を開けるようになった
- 段落・見出し・画像などの基本ブロックを使えた
- サイドバーで「アイキャッチ画像」「スラッグ」「カテゴリー」「タグ」の設定ができた
あなたのブログが、少しずつ「あなたらしい空間」に近づいてきましたね。
今回のクエストで、ブログ記事を書くために必要な“最低限の知識”を身につけることができました。
これらの設定は、記事を公開するたびに使う基本操作です。
今のうちにしっかり慣れておけば、次の記事作成がグッとスムーズになりますよ。
ABOUT ME
デザイン初心者でも、おしゃれなブログやホームページは作れます！
JIN:Rを使ったWeb制作の手順や、見た目を整えるコツを発信中。
難しい操作や専門用語はできるだけかみくだいて解説。
「自分でサイトを作りたい」と思ったあなたの最初の一歩を応援します。
