記事ごとの文字サイズをそろえるには、読みやすい記事をひとつ基準にし、本文どうし・見出しどうしで設定を合わせます。毎回、見た目だけで数字を入れ直さないことが、ばらつきを防ぐ近道です。
お店の仕事が終わってから、翌月のお知らせを更新。「先月の記事より文字が大きい気がするけれど、どこを触ったか思い出せない」。そんなときは、記事全体を直そうとせず、本文の1段落から確かめてみましょう。
表紙はAIで制作したイメージイラストです。操作の位置は本文の実画面で確かめてください。
最初に、同じ役割の文字を比べる
見出しが本文より大きいのは、話題の区切りを見つけやすくするためです。すべて同じ大きさにする必要はありません。
まず、次の組み合わせで比べます。
・説明文は、ほかの記事の説明文と
・大きな話題の見出しは、同じ段階の見出しと
・写真の説明は、ほかの写真の説明と
たとえば「予約方法」という見出しと、「ご予約は前日までにお願いします」という本文は、役割が違います。本文を大きくしたいからといって見出しに変えると、文章の区切りまで変わってしまいます。
見出しか本文かは内容で決め、文字サイズは別に確認します。
見出しの大小は残し、本文どうしをそろえた例です。説明用に制作した架空の表示です。
「標準」と「18px」は、同じ決め方ではありません
WordPressの文字サイズには、用意された選択肢から選ぶ方法と、数字を入力する方法があります。選択肢の名前や数は、サイトの見た目の土台となる「テーマ」などで変わります。
「小・中・大」などの選択肢は、あらかじめ用意されたサイズです。同じサイト内で同じ役割に同じ選択肢を使えば、判断を繰り返さずに済みます。ただし、「中」がどのサイトでも同じ大きさになるわけではありません。
「18px」のような数字は、その文章のまとまり(ブロック)に入れた個別の指定です。pxは文字サイズに使う単位のひとつ。数字で指定すること自体が間違いではありませんが、記事を書くたびに17、18、19と変えると、あとから基準が分からなくなります。
また、「初期値」「デフォルト」や未指定の状態は、そのブロックでサイズを上書きしていない場合があります。サイト側の設定などを引き継ぐため、「未指定なら必ず同じ表示」とも限りません。
「本文は何pxが正解?」と迷ったら、まず今のサイトで無理なく読める本文を基準にしてください。書体、つまり文字の形や、行の長さ、スマホでの見え方も関係するので、ひとつの数字ですべてのサイトを決める必要はありません。
そろえる基準は、本文・見出しなどの役割ごとに残します。図の選択肢は考え方の例で、WordPressの操作画面ではありません。
公開中の記事でも、まず1段落だけ試す
ここからは、文章を「ブロック」というまとまりで編集する標準の画面で進めます。対象は記事内の普通の本文です。見出しまで小さくなるのが気になるときは、右側に「段落」と出ていることを確かめてから変更しましょう。
手順1:記事を開き、変更前を残す
WordPressの管理画面で「投稿」を開き、一覧から記事の題名をクリックします。固定ページの文章なら「固定ページ」から開きます。直す前のページを撮影し、基準にする本文をひとつ決めます。別の記事を基準にする場合は、その記事も編集画面で開いて確認します。
記事の編集画面で右上の「設定」を開き、「投稿」または「固定ページ」と「ブロック」のタブが出ることを目安にしてください。配置や使える項目は環境で異なります。「テンプレート」など別の画面にいる場合や、タブが見当たらない場合は、この手順で変更せず編集画面を確認します。
手順2:本文を選び、基準のサイズを調べる
基準にする文章の中をクリックします。右側の設定がなければ、右上の、左右に分かれた長方形の「設定」アイコンを押します。「ブロック」タブを選び、選択中の名前が「段落」になっているか確認してください。
「タイポグラフィ」は文字の見た目の設定です。その中の「フォントサイズ」を見て、選択肢名、または数字と単位を控えます。数値欄が空欄で、用意されたサイズも選ばれていない場合は、「未指定」として控えます。次に直したい段落を選び、元のサイズも控えます。
左上の横線3本の「ドキュメント概観」から「リストビュー」を開くと、部品のまとまりを確認できます。「同期パターン」など、ほかの場所と共通の部品に入っている場合や、共有かどうか判断できない場合は、変更せず止めましょう。ほかの場所も更新する旨の案内が出る場合も、変更せず止めます。
手順3:その段落だけ、基準と同じサイズにする
基準が「中」などの選択肢なら、同じものを選びます。数字を入れる場合は「フォントサイズ」横の「カスタムサイズを設定」を押し、数値欄へ基準の数字を入れます。「ユニットを選択」で、pxなどの単位も基準に合わせます。すでに数値欄が出ている場合は、その欄を使います。
手順3:段落の設定で見るフォントサイズ欄です。24pxは操作例で、本文の推奨値ではありません。検証用実画面の一部を拡大(WordPress 7.1.2/Twenty Twenty-Five)。表示は環境で異なります。
例の24pxを、そのまま自分の本文に入れる必要はありません。
基準が未指定で、直す段落だけにサイズの指定がある場合は、その段落のサイズ指定だけを外して比べます。画面例では「タイポグラフィ」右の「⋮」を開き、「サイズ」の行の右側にある「リセット」を押します。「すべてリセット」は選びません。
手順3・基準が未指定の場合:「サイズ」の行の「リセット」で、文字サイズだけを外します。検証用実画面の一部を拡大(WordPress 7.1.2/Twenty Twenty-Five)。表示は環境で異なります。
この検証では数値欄が空になり、隣の基準段落と同じ大きさになりました。文字色はそのままです。自分の画面でも前後と比べ、差が残る・合わない場合は、別の編集を挟まず左上の「元に戻す」で戻します。同じ「リセット」が見つからなければ、全体設定を探さず記録までにしましょう。
手順4:更新する前に、スマホ幅で比べる
右上のモニター形の「表示」を開き、「モバイル」を選びます。変更した段落だけ急に大きくないか、前後の本文と比べてください。同じメニューの「新しいタブでプレビュー」を使うと、閲覧側の見た目も確認できます。
ここで使うのは「モバイル」と「新しいタブでプレビュー」だけです。ほかの項目は触らず、もう一度設定を変えるときは「デスクトップ」に戻します。
手順4:「表示」メニューの「モバイル」を押す場所です。画像は押す前で、現在の選択は「デスクトップ」です。検証用実画面の一部を拡大(WordPress 7.1.2/Twenty Twenty-Five)。表示は環境で異なります。
手順5:違ったら戻し、良ければ更新する
まだ更新していなければ、編集画面の左上にある、左向きに曲がった矢印の「元に戻す」を押します。直前の変更から戻るので、元のサイズになったか見てください。記録した値へ入れ直す方法もあります。
整ったことをプレビューで確認してから「保存」または「更新」を押します。表示名は環境で異なります。試すためだけに「公開」を押す必要はありません。
サイズの項目がない、合わせても違うとき
使える設定は、ブロックやテーマによって異なります。文字サイズの項目が見つからないときは、記事の本文が「段落」になっているかまで確認し、無理に別の画面へ進まなくて大丈夫です。
同じ設定でも差が残る場合は、囲みやグループの中にある、別の書体や太さを使っているなど、ほかの条件が関係している可能性があります。公開ページを同じ端末・同じ拡大率で見比べて、どの場所が違うかを絞ります。
この段階で、サイト全体の文字設定やテーマまで変更する必要はありません。機能を追加するプラグインや、見た目をコードで変えるCSSの設定も、今回は触らずに進めます。直したいページと基準にしたページ、違いが出る段落を控えると、相談するときも伝えやすくなります。
保存・更新後に戻したい場合は、まず記録した設定に戻して確認します。過去の保存内容をたどる「リビジョン」が使える環境もありますが、履歴の有無や残る数は設定次第です。復元すると別の文章変更も戻ることがあるため、内容を比べてから判断してください。
スマホで読んで、次の記事の基準を残す
編集画面のモバイル表示は、幅を確かめる手がかりになります。実際のスマートフォンで見られるなら、いつもの表示でも確認しましょう。
・本文を読むたびに、拡大したくならないか
・見出しと本文の区切りが分かるか
・長い見出しが、読みづらい位置で折り返していないか
・前後の段落に、急な大きさの差がないか
そろったら「本文は基準記事と同じ設定」「同じ段階の見出しは同じ設定」と短くメモします。過去の記事を一度に直し切らなくても、次に更新する記事から同じ基準で続けられます。
文字サイズがそろわない場合は、基準にした記事と気になる記事のURL、違って見える場所を添えて、ココナラ内のメッセージからご相談ください🌿 画面の画像を送る際は、パスワードやお客さまの個人情報が写らないようにしてください。