囲み枠を増やしすぎて読みにくくなっていませんか

囲み枠が続くページは、ひとまとまりにして読んでもらいたい情報へ枠を残し、通常の説明を見出しや段落で整理してみましょう。まずは一か所だけ、文章を残したまま枠の装飾を外して比べます。

日程を囲み、持ち物を囲み、注意事項も囲む。一つずつ追加したときは整理できた気がしても、スマホで通して見ると、枠ばかりが続いて感じられることがあります。

大切な案内を見落としてほしくなくて付けた枠です。全部をなくそうとせず、どこで区切ると内容を理解しやすいかを考えてみてください。

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

その枠は、何をひとまとまりにしていますか

最初に、気になるページをスマホで開き、枠の中の内容を短く言ってみます。

「初めての方向けの説明」「当日の持ち物」「変更があるときの連絡方法」。このように、枠ごとに何をまとめているかが分かるなら、区切りとして役立っているかもしれません。

一方、一つの説明が三つの段落に分かれているだけなのに、それぞれを別の枠で囲んでいる場合は、文章のつながりが見えにくくなります。同じ話は一つの見出しの下に置き、段落の間を空ける方法もあります。

次の例では、ご予約と持ち物は見出しで区切り、別に確認してほしい変更の連絡だけ枠に残しています。

内容はそのままに、見出しと余白で区切り、注意が必要な案内だけ枠を残した比較です。説明用に制作した架空のページです。

全部の枠をなくす必要はありません

持ち物をまとめた案内や、本文から少し分けて読みたい補足など、枠がある方がまとまりをつかみやすい場所もあります。

迷ったときは、枠を外した状態で「これは何の案内か」「どこまでが同じ話か」が分かるかを見ます。分からなくなるなら、枠を残すか、見出しを補ってみてください。

注意事項は、枠や色だけで示さず、「ご予約前にご確認ください」のように言葉でも内容を伝えます。

文章を消さず、枠線だけを外してみる

「枠を消したら、中の文章も消えそう」とためらうこともあると思います。ここで試すのは、内容を残して枠線の太さを変える操作です。WordPressで文章などを扱う部品を「ブロック」といいます。今回は、複数の文章をまとめる標準の「グループ」ブロックに枠がある場合の例です。

手順1：記事を開き、文章と見た目を控える

管理画面の「投稿」または「固定ページ」から一覧を開き、対象の題名をクリックします。枠内の文章を別のメモにコピーし、変更前の画面も撮ります。

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

手順2：枠を付けたグループを選ぶ

左上の横線3本の「ドキュメント概観」を押し、「リストビュー」を開きます。直したい文章を含む「グループ」を選び、編集画面の選択枠がその一か所だけを囲んでいるか確認します。ページ全体や別の文章まで選ばれたら止めてください。

右側に設定がなければ、右上の左右に分かれた長方形の「設定」アイコンを押し、「ブロック」タブで選択した部品を確認します。グループの外側に「同期パターン」など共通の部品がある場合や、共有か不明な場合も、先に進みません。ほかの場所も更新する旨の案内が出る場合も、変更せず止めます。

手順3：枠線の幅だけを0にする

画面例では、右側を下へ送り「枠線と影」を開き、「枠線」の数値と単位を控えます。次に、数値の左の丸い色見本を押します。上部に出る色名・番号と、下の「スタイル」でどの線に枠が付いているかを、画面とメモに残してください。

手順3・変更前の記録：色見本を開くと、色と線の種類を確認できます。この例は黒と連続した1本線です。検証用実画面の一部を拡大（WordPress 7.1.2／Twenty Twenty-Five）。表示は環境で異なります。

色や線の候補、リセットは押さず、パネルの外側をクリックして閉じます。そのあと「枠線」の幅を0にします。「角丸」や内側の余白は変えません。上下左右に分かれている場合は、各辺の元の値を控えてから変更します。

手順3・変更前：選んだグループの枠線は2pxです。文章と内側の余白は変えず、枠線の幅だけを調整します。 検証用の実画面（WordPress 7.1.2／Twenty Twenty-Five、下書き）。環境によって項目や表示は異なります。

手順3・変更後：同じ欄を0pxにし、文章と内側の余白を残したまま枠線を消した例です。 検証用の実画面（WordPress 7.1.2／Twenty Twenty-Five、下書き）。環境によって項目や表示は異なります。

手順3・入力欄の拡大：「枠線」を0pxにした状態です。その下の「角丸」12pxは動かしていません。検証用実画面の一部を拡大（WordPress 7.1.2／Twenty Twenty-Five）。表示は環境で異なります。

メニューの「削除」は押しません。 グループごと消すと、中の文章もなくなることがあります。背景色や内側の余白もそのままにし、まず枠線だけで比べます。「リセット」はテーマの指定へ戻す操作で、必ず枠が消えるとは限りません。

手順4：文章が残っているか、プレビューで見る

右上のモニター形の「表示」から「モバイル」を選びます。文章が残っていること、枠がなくても話題のまとまりが分かることを確認します。「新しいタブでプレビュー」でも、閲覧側の表示を見られます。

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

手順5：必要なら戻し、確認してから更新する

うまくいかなければ、別の編集を挟まず、左上の左向きの曲がった矢印「元に戻す」を押し、元の文章と枠へ戻ったか確認します。0にした際に線の色や種類も未指定になる場合があるので、太さだけ入れ直すより、まず直前の操作を戻します。良ければ「保存」または「更新」を押します。試すためだけに「公開」は押しません。

同じ設定が見つからないときは

枠が、テーマ独自の「注意ボックス」などで作られていることもあります。その場合は、グループ用の手順を無理に当てはめないでください。

設定が見つからない場合は、ブロック名と変更前の画面を控えるところまでにします。複雑に重なった枠も、影響範囲を確認してから扱います。

枠を外せなくても、見出しや箇条書きで中身を整理する方法は考えられます。たとえば、持ち物が文章の途中に並んでいるなら、「当日の持ち物」の下で一項目ずつ分けるだけでも、確認する場所が分かります。

その記事だけで使っている通常の段落なら、小見出しも整えられます。その段落を選び、道具の一覧にあるブロック種類の変更から「見出し」を選びます。記事内の大きな区切りはH2、その中の小さな区切りはH3が目安です。文字を大きくする目的だけで段階を変えず、内容の親子関係に合わせます。

余白を足すために空の段落を何個も重ねる前に、まず標準の見出しと段落でプレビューしてみてください。CSSというコードや、サイト全体のスタイル、追加機能の設定まで触って枠を消そうとする必要はありません。

スマホでは、枠の内側が狭くなっていないか

枠の中へさらに枠を入れると、内側の余白が重なり、スマホでは文章を置く幅が狭くなることがあります。

枠の中へさらに枠を重ねると、スマホでは文章を置く幅が狭くなることがあります。必要なまとまりを一つにできるか見直します。

更新後は、実際のスマホで公開ページを開き、変更前の画面と見比べてください。

・短い言葉まで何度も折り返していないか

・次の見出しと、前の説明を区別できるか

・注意事項を言葉で見つけられるか

・枠を外した部分の文章が抜けていないか

枠線だけを消しても、内側の余白は残る場合があります。幅の狭さが変わらなければ、枠を重ねている構造や余白の確認が必要です。原因が分からないまま、次々にブロックを削除しないでください。

更新後の戻し方を確認する

更新後は、控えておいた枠線の幅・単位・色・線の種類へ戻し、元の表示を確認して再更新します。設定を再現できない場合は、追加の変更を止めてください。文章が失われた場合は、控えた文章や、利用できれば「リビジョン」という保存履歴を確認します。過去の版を丸ごと復元すると、ほかの新しい修正も置き換わるため、現在の内容を先に控えてください。

まずは通常の説明を一か所選び、枠がなくても内容のまとまりを追えるか試してみましょう。残す枠にも役割が見つかれば、次の記事で何を囲むか決めやすくなります。

枠と文章を安全に分けて直せるか不安な場合は、該当ページのURLと囲み部分のスクリーンショットを添えて、ココナラ内のメッセージからご相談ください🌿

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