記事を書くたびに色を増やしていませんか

記事の色に迷ったら、まず「背景・文字・アクセント」の役割を決め、今ある色を使い回してみましょう。すべてを三色に制限するのではなく、文章や見出しを飾るたびに新しい色を足さないための、小さな目安です。

春のお知らせはピンク、料金の説明は青、今月の募集はオレンジ。記事に合わせて工夫しているうちに、同じホームページなのに、ページごとの印象がばらばらになることがあります。

「地味に見えるから、もう一色足そうかな」。そんなときは、色を選ぶ前に、どこを読んでもらいたいかを一つ決めてみてください。

表紙はAIで制作したイメージイラストです。操作の位置は本文の実画面で確かめてください。

新しい色を選ぶ前に、今ある色を見る

最初から配色を作り直さなくても大丈夫です。自分のサイトで「このページは読みやすい」と感じるものを一つ開き、次の場所を見ます。

・本文の背景は何色か

・長い文章は何色か

・見出しや案内の目印に何色を使っているか

そのページを、次の記事の基準にします。写真に好きな色が入っているからといって、本文まで同じ色に変える必要はありません。

文章やイラストは変えず、見出し・本文・強調の色の使い方をそろえた例です。説明用に制作した架空のページです。

背景・文字・アクセントの役割を決める

たとえば、白を背景、濃いグレーを本文、深い緑を案内の目印にする、と決めます。これは一例なので、今のサイトに合う組み合わせを使ってください。

背景は文章や写真を載せる土台。文字の色は、長い文章を読んでもらうための色。アクセントは、見出しや次の案内など、目を向けてほしい場所に使う色です。

背景・文字・アクセントは、配色を考えるための三つの役割です。使える色数を厳密に三色へ制限する決まりではありません。

写真やロゴには、もともといろいろな色があります。エラーや注意を伝える色も、役割を考えて残します。サイト全体の色を数えて、三色を超えたら直す、という作業はしなくて大丈夫です。

ただし、色の名前が同じでも、文字と背景の組み合わせによって読みやすさは変わります。淡い緑の背景に白い文字を置くなど、明るさが近い組み合わせには注意してください。

目立たせたいところが増えたら

「料金も、締切も、おすすめも大事」と思うと、全部に違う色を付けたくなります。その前に、文章の分け方で伝えられないかを考えます。

料金は「料金について」という見出しの下へ。締切は「申込締切：10月31日」のように言葉で示し、その短い部分を太字にする。おすすめの理由は、色だけに頼らず文章で説明します。

新しい色を足す前に、見出しと短い太字で伝わるか試す。これを一つ決めておくだけでも、記事ごとの迷いを減らせます。

注意事項を赤字にする場合も、「赤い文字のところをご覧ください」だけでは伝わらない人がいます。「注意」「申込締切」などの言葉を添え、色が分からなくても意味が読める形にしてください。

まずは、一段落の文字色だけを戻してみる

過去の記事を一度に全部直す必要はありません。今回は、記事内で色が強くなった本文を一段落だけ選び、普段の本文色に合わせます。標準のブロックエディターで、文章を部品（ブロック）ごとに編集する例です。

手順1：記事を開き、変更前を残す

管理画面の「投稿」から一覧を開き、記事の題名をクリックします。変更前の画面を撮り、基準にする本文をひとつ決めます。

記事の編集画面で右上の「設定」を開き、「投稿」または「固定ページ」と「ブロック」のタブが出ることを目安にしてください。配置や使える項目は環境で異なります。「テンプレート」など別の画面にいる場合や、タブが見当たらない場合は、この手順で変更せず編集画面を確認します。

手順2：段落を選び、基準の色を調べる

基準の本文の中をクリックします。右側の設定がなければ、右上の左右に分かれた長方形の「設定」アイコンを押します。「ブロック」タブで選択中の名前が「段落」になっていることを確かめます。

画面例では「タイポグラフィ」の「色」を押すと、文字色の見本が開きます。基準の色名や「#」から始まる番号を控えます。「色が選択されていません」と出たら、個別の色指定がない状態なので、手順3の「基準が未指定」の場合へ進みます。次に直したい段落を選び、元の色もメモしてください。

複数の文章をまとめたグループを選んでいたら、段落を選び直します。左上の横線3本の「ドキュメント概観」から「リストビュー」を開き、「同期パターン」など共通の部品に入っていないかも確認します。共有かどうか判断できない場合は変更せず止めてください。ほかの場所も更新する旨の案内が出る場合も、変更せず止めます。

手順3：本文の文字色を、基準と同じ色へ

対象の段落の「タイポグラフィ」→「色」を開き、基準と同じ見本を選びます。色番号を使う場合は、上部の大きな色見本を押して色番号を入れる「Hex」の欄を開き、控えた番号を入れます。変更するのは文字色です。

手順3：段落の文字色を基準の「Contrast」に合わせた例です。#111111はこのテーマの例で、全サイトへの指定値ではありません。検証用実画面の一部を拡大（WordPress 7.1.2／Twenty Twenty-Five）。表示は環境で異なります。

基準が未指定で、直す段落だけに色の指定がある場合は、対象の「タイポグラフィ」→「色」を開き、パレット右下の「クリア」を押します。外すのはその段落の文字色だけです。背景色やサイズの設定は変えません。

手順3・基準が未指定の場合：文字色のパレットで「クリア」を押す場所です。検証用実画面の一部を拡大（WordPress 7.1.2／Twenty Twenty-Five）。表示は環境で異なります。

「色が選択されていません」と表示されたら、前後の本文と比べます。この検証では基準と同じ黒に戻りましたが、囲みなどから別の色を引き継ぐ場合もあります。合わなければ、別の編集を挟まず左上の「元に戻す」で戻してください。「クリア」が見つからない場合は、全体設定へ進まず記録までにします。

一部の文字だけ色が残る場合は、文字単位の装飾が付いている可能性があります。段落の設定を何度も変えず、その部分を控えておきましょう。

項目がないときは、テーマやブロックの違いも考えられます。標準の文字色を保ち、新しい色を足さないところから始められます。サイト全体の配色や、見た目をコードで変えるCSS、追加機能の設定へ進む必要はありません。

手順4：更新前に、スマホ幅で確認する

右上のモニター形の「表示」から「モバイル」を選びます。直した段落が周囲の本文となじみ、背景から読み取れるか確認します。「新しいタブでプレビュー」で閲覧側の表示も見られます。

ここで使うのは「モバイル」と「新しいタブでプレビュー」だけです。ほかの項目は触らず、もう一度設定を変えるときは「デスクトップ」に戻します。

手順5：合わなければ戻し、良ければ更新する

まだ更新していなければ、左上の左向きに曲がった矢印「元に戻す」を押して、元の色を確かめます。良ければ「保存」または「更新」を押します。公開ページは手元のスマホでも読み直しましょう。試すためだけに「公開」は押しません。

保存前と、スマホの公開ページで確かめる

プレビューで、直した段落が背景から十分に見分けられるか、本文を続けて読めるかを確認します。WordPressに文字の読みづらさを知らせる警告が出たら、文字と背景の組み合わせを見直してください。警告がない場合も、読みやすさの確認は必要です。

更新後は、実際のスマホで公開ページを開き直します。見出しから本文へ読み進め、色を減らした結果、締切や注意事項を見失っていないかも見ます。目立たなくなった大切な内容は、見出しや言葉で補います。

「色をクリア」「リセット」は既定の色へ戻す操作で、直前に指定していた色へ戻るとは限りません。

更新後に戻すときは、控えた色を設定し直して再更新します。「リビジョン」という保存履歴で以前の版を確認できる場合もありますが、全体を復元するとほかの文章の修正も戻るため、現在の内容を先に控えてください。

次の記事で迷わないための小さなメモ

最後に、「本文はこの色、背景はこの色、アクセントはここに使う」とメモを残します。色の名前や番号が分からなければ、基準にしたページのURLと画面でも構いません。

色を増やす前に、見出しや短い太字で伝えられるかを考えると、記事ごとの配色に迷いにくくなります。

今日は一段落を整え、次から使う色の役割を決めるところまで。記事を書くたびに配色を考え直さなくて済む、自分なりの基準を作ってみてください。

今の色をどう整理すればよいか迷う場合は、気になる記事のURLと画面のスクリーンショットを添えて、ココナラ内のメッセージからご相談ください🌿

画像には、パスワードやお客さまの個人情報が写らないようにしてください。