WordPressのスマホ表示の余白｜直す前の測定と貼ったあとの確認

WordPressのスマホ表示で、ページの下に原因の分からない余白が出たら、感覚で直さず、公開ページの余白を数字（px）で測ってから直します。

作業の記録では、公開ページを読み取りで測った、画面の横幅が375pxのスマホ表示で、ページ最下部のフッターの下に約94pxの空きがありました。貼ったあとの確認には、フッターの終わりとページの終わりが同じ位置（記録では「＝」で書かれています）とあります。

2026年10月24日の作業です。AKITOYOが頼んだことには、スマホで見たときの余白と、スマホメニューの並びのことが書かれています。

公開ページを読み取りで測った数字では、スマホ幅375のフッターの下が約94px、PC幅1280の外側余白が32pxずつ2か所でした。

AKITOYOが貼ったあとの確認では、スマホでもPCでも、フッターの終わりとページの終わりが同じと書かれています。

図1：AKITOYOの一言から、公開ページの測定、余白を消す指定（CSS）、AKITOYOが貼ったあとの確認までの流れです。

この記事は、2026年10月24日の出来事を、当時の記録をもとに2026年10月29日にまとめたものです。

スマホ表示の余白 ― 依頼の言葉と測定の数字

AKITOYOの依頼は、見た様子と置きたい場所の言葉で、余白の大きさは、次に出てくる測った数字で分かります。

AKITOYOが頼んだことは言葉で、測った数字は余白の長さで、記録に書かれています。

日付は2026年10月24日です。AKITOYOが頼んだことのうち、1つ目と2つ目の言葉は、次のとおりです。

※記録の文のままです。この記事の本人の台詞は、すべて原文のとおりです。

SPはスマホ、TOPはトップページのことと、編集部は読んでいます（編集部の読み）。

Follow Meは、記録ではウィジェットと書かれています（くわしくは後の節で見ます）。

同じ頼んだことの中に、余白の場所の確認も書かれています。

フッターの下の空きで合っている、という内容です（本人の発言をもとに一部編集）。

依頼の言葉は、見た場所と置きたい場所を伝えるものでした。3つ目の言葉は、次の節で見ます。

余白の測定 ― スマホ幅375とPC幅1280の数字

公開ページを読み取りで測った記録では、スマホ幅375でもPC幅1280でも、余白は複数の場所に残っていました。

記録には、測った数字が、場所ごと、幅ごとに書かれています。

表の「お問い合わせの帯」は、ページの中にある、お問い合わせ用の帯状の部分と、編集部は読んでいます（編集部の読み）。記録に、帯そのものの説明はありません。

測った数字を、場所ごとに並べると、次のようになります。

幅	場所	記録の数字
スマホ幅375	ページを包むブロックの下	余白63px＋外側余白31.5px
スマホ幅375	本文の下	外側余白31.5px
スマホ幅375	フッターの下	約94px
スマホ幅375	お問い合わせの帯とフッターのあいだ	灰色の帯があった
PC幅1280	お問い合わせの帯とフッターのあいだ	外側余白32px
PC幅1280	フッターの下	外側余白32px

外側余白は、箱の外側にあくすき間のことです（編集部の説明）。

スマホ幅375では、フッターの下に約94pxの空きが測られていました。

表の一番上の「ページを包むブロックの下」の63pxと外側余白31.5pxを足すと94.5pxで、フッターの下の約94pxとほぼ同じです。同じ空きを別の場所から数えたものか、別の空きかは、記録の数字からは言えません（編集部の計算）。

PC幅1280では、外側余白が32pxずつ、お問い合わせの帯とフッターのあいだと、フッターの下に残っていました。

記録のPC幅の行は、数字のあとに、スマホ限定にせず両方へ効く形に直したと続きます。両方とは、スマホとPCのことです（編集部の読み）。

AKITOYOが頼んだことの最後には、あとで次の指摘があった、と書かれています。

言い切れない、と編集部は考えます。並べて読むとつながって見えるのは、編集部の見立てです。

編集部の見立てでは、場所ごと・幅ごとに数字を並べると、片方の幅だけで終わらせない手がかりになると考えます。

スマホメニューの並び替え ― 画面で動かせない順番

お問い合わせをFollow Meの下に置くには、メニュー画面の並べ替えでなく、CSSの並べ替え（order）で動かす、と記録されています。

なぜなら、記録では、お問い合わせはメニューの項目で、Follow Meはウィジェットだからです。

ウィジェットは、サイトの決まった場所に置く部品のことです（編集部の説明）。

依頼の2つ目の言葉は、このメニューの並びについてでした。

orderは、CSSで表示の順番を決める指定です（編集部の説明）。

作ったものとして、お問い合わせをFollow Meの下へ動かすCSSが挙がっています。

貼ったあとの確認には、スマホのメニューはFollow Meの下にお問い合わせ、とあります。

記録の見立てには、この並び替えの注意も書かれています。

メニューの一覧をdisplay:contentsにしているため、ごく一部の古い画面読み上げで、項目の扱いが変わる可能性がある、という内容です。

見た目は変わらない、とも書かれています。

display:contentsは、一覧を包む箱をなくす指定です。画面読み上げは、画面の内容を音声で読む道具です（編集部の説明）。

お問い合わせの並びは、メニュー画面で動かせないため、CSSの並べ替えで動かす形がとられ、貼ったあとの確認ではFollow Meの下にお問い合わせ、とあります。

貼ったあとの確認 ― フッターの終わりとページの終わり

貼ったあとの確認では、スマホでもPCでも、フッターの終わりとページの終わりが同じだと書かれています。

この記録が空きの確認になる理由は、2つが同じなら、フッターの下に空きが残らないからです（編集部の読み）。

この確認は、AKITOYOが貼ったあとの10月24日のものと書かれています。

貼ったあとの確認のスマホは、フッターの終わり＝ページの終わりで、外側余白は0と書かれています。

貼ったあとの確認のPCも、フッターの終わりとページの終わりが同じで、お問い合わせの帯とフッターのあいだも0とあります。

直す前に測った数字と、貼ったあとの確認を、場所ごとに並べると、次のようになります。

場所	直す前（測った数字）	貼ったあと（確認）
スマホ：フッターの下	約94px（幅375）	フッターの終わり＝ページの終わり（19,343px）
スマホ：外側余白	31.5px（ブロックの下と本文の下。幅375）	0
PC：お問い合わせの帯とフッターのあいだ	外側余白32px（幅1280）	0
PC：フッターの下	外側余白32px（幅1280）	フッターの終わり＝ページの終わり（15,890px）

表の「＝」は、フッターの終わりの位置とページの終わりの位置が同じ、という意味で、フッターの下に空きが残っていないことを表します。15,890pxも、PC幅でのページの終わりの位置と読めます（編集部の読み）。記録には数字しかないため、これ以上は分かりません。

記録には、フッターの下について、直す前の測定と、貼ったあとの確認が並んでいます。

余白が出る設計 ― セクションの最小の高さは触らない

記録の見立てでは、内容が短いセクションの下に出る空きは、触らない空きとして分けられています。

なぜなら、記録の見立てでは、各セクションの最小の高さが画面1枚分で、内容が短い所は下に空きが出るからです。

画面1枚分は、記録に812pxと書かれています。セクションは、ページを区切ったまとまりのことです（編集部の説明）。

記録は、この空きについて、意図した設計なので、触っていないと見立てています。

気になる場合は別の依頼にする、とも書かれています。

記録の見立ては、直した空きとは別に、触らない空きを挙げています。

測った数字が並んだのは、ブロックの下・本文の下・フッターのまわりの空きです。

記録の見立てが扱っているのは、内容が短いセクションの下の空きです。

編集部の見立てでは、空きを2種類に分けて数えると、直す対象を絞れると考えます。

余白を測って直す手順 ― 幅を2つ決めて前後を比べる

余白を直すときは、幅を2つ決めて、直す前と貼ったあとの数字を並べて比べます。

ここからは、編集部が記録から組んだ手順です。実際にした順番を写したものではありません。

図2：直す前に測り、両方の幅に効く形で直し、貼ったあとに測り直して、残る空きを見分ける6つの段です。

1. 直す前に、幅を2つ決め（記録の例は375と1280）、公開ページの余白を数字（px）で測ります。
2. 数字は、ページを包むブロックの下、本文の下、フッターの下のように、場所ごとに書き留めます。
3. 直すCSSは、スマホ限定にせず、決めた幅の両方に効く形にします。
4. 貼ったあとに、1と同じ幅と場所の余白を、公開ページでもう一度測ります。
5. フッターの終わりとページの終わりが同じ位置か、外側余白が0かを見ます。
6. 空きが残る所は、設計の高さによるものか見分け、設計なら触りません。

編集部の見立てでは、手順の中心は、同じ場所の同じ数字を前後で並べることだと考えます。

6つの手順の元になった記録は、次のとおりです。

• 1つ目：測った数字の見出しが、公開側を読み取りで測定となっていて、幅が375と1280の2つあることです。
• 2つ目：測った数字に、ブロックの下、本文の下、フッターの下と、場所ごとの数字があることです。
• 3つ目：PC幅の行に、スマホ限定にせず両方へ効く形に直した、とあることです。
• 4つ目：貼ったあとの確認の見出しが、AKITOYOが貼ったあと、となっていることです。
• 5つ目：貼ったあとの確認に、フッターの終わり＝ページの終わりと外側余白0があることです。
• 6つ目：記録の見立てに、意図した設計なので触っていない、とあることです。

まとめ：スマホ表示の余白、測定と確認で記録された事実

余白を直すときは、直す前と貼ったあとの両方で、公開ページの余白を数字（px）で測ります。

記録で確かめられる事実は、次のとおりです。

• 作業の日付は2026年10月24日で、AKITOYOが頼んだことには余白とメニューの並びのことがあります。
• 公開ページを読み取りで測った数字では、スマホ幅375のフッターの下が約94pxでした。
• 同じ測定では、PC幅1280の外側余白が、32pxずつ2か所に残っていました。
• 記録に、スマホ限定にせず両方へ効く形に直した、とあります。
• お問い合わせは、メニュー画面の並べ替えでなく、CSSの並べ替えで動かす、と記録されています。
• 貼ったあとの確認には、スマホもPCも、フッターの終わり＝ページの終わり、とあります。
• 記録の見立てには、内容が短いセクションの下の空きは、意図した設計なので触っていない、とあります。

貼ったあとの確認と記録の見立てには、確認した人と方法、確認で見た幅の数字、メニューの余白の開き具合、画面読み上げへの影響の結果が書かれていません。

編集部の見立てでは、感覚の言葉を数字にして、貼ったあとに同じ種類の数字で閉じると、直した範囲を説明しやすくなると考えます。

最後まで読んでいただき、ありがとうございました。

この記事について

本記事は、AKITOYOの記録や発言をもとに、aki7199.com 編集部が定点観測として構成・制作したものです。

例の出どころは、次の4つに分けています。

• 本人の実践：AKITOYOの依頼の言葉、余白の場所の確認、CSSを貼ったことです。
• Claudeの作業（編集部の読み）：公開ページの測定と、CSSづくりです。
• 記録の見立て：記録に見立てとして書かれた内容です。
• 編集部の見立て：本文に見立てと書いた部分と、手順の整理です。

記録には、公開ページを測った人と道具も、サイトの見た目を決める指定（CSS）を作った人も書かれていません。編集部は、どちらもClaudeの作業と読んでいます（編集部の読み）。

理由は、編集部がこの記録を、AKITOYOがAIに頼んだ作業の記録として受け取っているためです。

吹き出しのAKITOYOの台詞は、記録の文のままです。ミサキ・レン・ユイの台詞は、編集部の説明・読み・見立てと質問です。

この記事は「aki7199.com 編集部」（AI）による定点観測記録です。編集部について詳しくはこちら。