クエスト2：WordPressを作成しよう＆SSLを有効化しよう
jinlab
JIN:Rクエスト
クエスト4：ボックスで要点を一目で伝えよう
jinlab
記事内に商品プロモーションを含む場合があります
記事の中で「ここだけは絶対に伝えたい！」という部分、読み手は意外と流し読みして見落としてしまいます。
そんなときに効果を発揮するのが 「ボックス」。
ボックスを使えば、重要なポイント・注意点・結論をパッと見で区切り、読者の視線を自然に誘導できます。
この記事では、JIN:Rの初心者でもすぐ実践できる ボックスの挿入・カスタマイズ方法から、記事を読みやすくする使い方のコツ まで、ステップ形式で詳しく解説します。
「長文なのにサクッと読める記事」にしたい方は、今日のクエストでボックス活用をマスターしましょう。
今日のゴール
今回のクエストで目指すのは、この3つです。
今日のクエストの目的は？
- ボックスのデザインをカスタマイズしてみること
- ボックスブロックの使い方を覚えること
- 読者が要点を一目で理解できる配置のコツを身につけること
これができれば、あなたの記事は“読み流される文章”から“要点がパッと伝わる記事”にレベルアップ！
いきなり完璧を目指す必要はありません。
まずは、「ここが大事！」をボックスで強調する感覚をつかんでいきましょう。
ボックスのカスタマイズ方法
ボックスは、記事内で「ここだけは読んで！」という情報を目立たせるための重要な要素です。
JIN:Rでは、デザインプリセットを選択した時点で、ブランドカラーに合わせた色設定になっているため、基本的にカスタマイズは不要です。
見た目を大きく崩す心配もないので、初心者でもそのまま安心して使えます。
カスタマイズが必要なケース
基本はプリセットのままでOKですが、次のような場合は色を変更すると効果的です。
- ブランドカラーを反映させたいとき
- 情報の種類ごとに色を変えて見分けやすくしたいとき
（例：緑＝OK、赤＝注意、黄＝補足）
この2つのルールを守れば、記事全体の統一感を保ちながら、重要情報をしっかり引き立てることができます。
カスタマイズを開こう
左メニュー「外観」＞「カスタマイズ」をクリックする。
ボックスの設定画面を開く
カスタマイズ内の「ボックス」をクリックする。
ボックスを選択する
「ボックス」をクリックする。
色の設定
色の設定変更をしよう
保存する
設定が終わったら「公開」ボタンをクリックして保存します。
まずはプリセットのまま使い、慣れてきたら色変更で“あなたらしさ”をプラスしていきましょう。
ボックスブロックの使い方を覚えよう！
ブログ記事を書くときに役立つのが、「ボックスブロック」。
これを使いこなせるようになると、重要な情報や要点をパッと伝えられ、読者が迷わず内容を理解できる記事が作れるようになります！
ブロックを追加
まず、投稿画面を開きましょう。
そこで画面の「＋」ボタンを押します。
ボックスブロックを選択する
検索バーに「ボックス」と入力すると、JIN:Rの吹き出しブロックが表示されます。
そこから「ボックス」をクリック。
ボックスの種類を選ぶ
登録済みのデザイン一覧から「ボックス」を選びます。
文章を入力する
ボックス内に、表示したい要点や重要情報を入力します。
1〜3行程度にまとめると、パッと見て理解しやすく、読者が迷わず内容を把握できます。
ボックスは、ただの文章を“視覚的に整理された情報”へ変えてくれる便利なツールです。
まずは1つ使ってみて、読みやすさや伝わりやすさの変化を実感してみましょう！
読まれる記事にするための「ボックス」の工夫
ボックスは、こんなシーンで効果的です。
- 要点の整理（例：結論・まとめ・チェックリスト）
- 注意点の強調（例：やってはいけないこと・失敗例）
- 手順やフローの提示（例：Step1〜Step3）
- 情報の分類（例：メリットとデメリット／OKとNG）
使用例
📋 準備するもの
- パソコン（ブラウザはChrome推奨）
- JIN:Rが有効化されたWordPressサイト
- Googleアカウント（アナリティクス用）
💡 ポイント
JIN:Rのボックス機能は、背景色や枠線色を統一することで、読者にとって「重要な情報がどこにあるか」を瞬時に判断できるようにします。
- 記事冒頭で結論ボックスを置いて、概要を先に伝える
- 各見出しの末尾に要点ボックスを設置して、内容をおさらいする
- 注意が必要な箇所で赤枠や背景色付きボックスを使う
よくあるミスと対処法
- 色やデザインが記事ごとにバラバラ
-
【原因】
ボックスを記事ごとに自由に装飾してしまい、色や角丸、余白が統一されていない。【対処法】
デザインプリセットを活用し、ブランドカラーに合わせた設定を基本に統一しましょう。変更する場合は背景色や枠線色のみを調整します。
Q
- ボックス内の文章が長すぎて読みにくい
-
【原因】
本文と同じボリュームをボックスに入れてしまい、圧迫感が出ている。【対処法】
ボックスは1〜3行程度の要約にとどめ、詳細は本文に書くルールを徹底しましょう。
Q
まとめ｜今日の成果を振り返ろう！
今回のクエストでは、ボックスの基本操作から色のカスタマイズ、記事への挿入方法まで一通りマスターしました！
成果を振り返ろう！
- JIN:Rでボックスの色を管理する方法がわかった
- 記事にボックスブロックを挿入できるようになった
- ボックスの使いどころと効果を理解できた
ボックスを意識して入れるだけで、「読み流される文章」が「要点がパッと伝わる記事」にレベルアップします。
最初から完璧を目指さなくても大丈夫。
まずは1つ、記事にボックスを入れて、重要ポイントを目立たせてみましょう！
ABOUT ME
デザイン初心者でも、おしゃれなブログやホームページは作れます！
JIN:Rを使ったWeb制作の手順や、見た目を整えるコツを発信中。
難しい操作や専門用語はできるだけかみくだいて解説。
「自分でサイトを作りたい」と思ったあなたの最初の一歩を応援します。
