「PCではきれいなのに、スマホで見ると見出しが切れる」「ボタンが細く、文字が何行にも折り返される」。AFFINGER7でページを作ったあと、こうした違いが気になることはありませんか。
スマホ表示を整えるときは、文字を小さくして押し込むのではなく、狭い画面でも読める順番と幅に組み直すのが基本です。特に固定ページへ独自のHTML/CSSを入れている場合は、テーマ側の設定だけでなく、自分で指定した幅や余白も確認します。
この記事では、DOWELLのトップページ制作で調整した文字・画像・ボタンの考え方をもとに、スマホ表示のチェック手順を紹介します。特定の端末での計測結果や、表示速度・検索順位の改善を保証する記事ではありません。
ページ全体の構成から作る場合はAFFINGER7でトップページを作る方法、ボタンの目的や文言はメルマガ登録への導線の作り方で解説しています。本記事では、完成したページをスマホで読みやすくする工程に絞ります。
最初に「テーマの設定」と「独自の装飾」を切り分ける
AFFINGER7の公式マニュアルにはスマホ向けのヘッダーナビゲーションやメニューなどの項目があります。一方、固定ページに直接書いたHTMLやCSSの表示は、そのコードの指定にも左右されます。公式マニュアルで対象の機能を確認し、どこを変更すべきかを分けましょう。
- サイト全体で起きる：共通の設定、追加CSS、メニュー、共通部品を確認する。
- 特定のページだけで起きる：そのページのHTML、画像、埋め込み、個別の装飾を確認する。
- 特定の幅だけで起きる：幅に応じて切り替わるCSSや、横並びの部品を確認する。
これは原因を絞るための目安です。テーマやプラグインが悪いとすぐ決めつけず、まず「どのページの、どの部分が、どの幅で崩れるか」を記録します。
変更前には本文と追加CSSを控え、検証環境で試します。テーマ移行直後なら、先に移行前後の確認チェックリストに沿って、画像の欠落や旧ショートコードが残っていないかも確認してください。
手順1：PCプレビューと実際のスマホを使い分ける
PCブラウザの開発者ツールでは、画面幅を変えて表示を確認できます。Chromeの場合は開発者ツールを開き、デバイスツールバーへ切り替える方法が公式に案内されています。操作の詳細はChromeのデバイスモード解説をご覧ください。
確認する幅は、たとえば360px、390px、430pxのように複数用意します。これは本記事での確認例で、全端末を網羅する数字でも、AFFINGER7の標準の切り替え幅でもありません。幅を連続して変えると、途中で急に崩れる箇所も探しやすくなります。
ただし、PC上の再現は実機そのものではありません。最後はスマホでも開き、指での操作、メニューの開閉、画面の縦横切り替えなどを確認します。ログイン中だけでなく、公開後はログアウト状態でも確認しましょう。下書きは権限のない閲覧者には表示できません。
手順2：文字はサイズより先に改行と余白を見直す
大きな見出しが切れているとき、最初に見るのは文字サイズだけではありません。固定幅、改行禁止、左右の大きすぎる余白、位置をずらす指定などが原因になる場合があります。
- PCに合わせて入れた強制改行が、スマホで不自然な一行を作っていないか。
- 長い英数字やURLが、文章の幅からはみ出していないか。
- 見出しの高さが固定され、折り返した行が隠れていないか。
- 背景写真の明るい部分と文字色が同化していないか。
本文は、まず16px前後・行間1.7程度を試し、実際のフォントと画面で調整する方法があります。これはデザインの出発点であり、必ずこの値にするという規則ではありません。読める大きさを維持したまま、長い段落を意味のまとまりで分けます。
DOWELLのヘッダー制作でも、画像と文字が重なった状態で読めることを重視しました。強い影を何重にも付けるより、文字の背後に落ち着いた面を用意する、文字の位置をずらすなど、背景との関係を先に整えると扱いやすくなります。
手順3：画像は「全体を見せる」と「切り抜いて使う」を分ける
本文の図解や文字入り画像は、基本的に全体を見せたい素材です。幅を本文内に収め、高さを比率に合わせて変えると、横にはみ出したり縦に伸びたりするのを防ぎやすくなります。
一方、ヘッダーの背景写真は、表示枠を埋めるために一部が切り取られることがあります。PCで中央に見える人物が、縦長のスマホでは端へ隠れる場合もあります。重要な被写体の位置を確かめ、必要ならスマホ用の構図を用意します。
画像へ重要な説明文を焼き込むと、縮小されたときに文字も小さくなります。見出しや案内文は可能ならHTMLの文字として置き、画像は雰囲気や理解の補助に使いましょう。
なお、画像が表示されない問題と、表示される画像のサイズが合わない問題は別です。欠落している場合は画像URLやファイルの有無を確認し、CSSだけで直そうとしないことが重要です。
手順4：カードとボタンを狭い幅に合わせて並べ直す
PCで横に並ぶカードを、スマホでも同じ列数のまま見せると、文章が縦に長くなりがちです。内容が窮屈なら1列にし、上から自然に読める順番にします。単純に縮小するより、並び方を変える発想です。
DOWELLでは、無料教材の案内を主役にし、プロフィールへの案内は控えめにする方向でボタンを調整しました。スマホでは、幅だけでなく上下の間隔や文字の位置も確認します。
- ボタンの文章が長すぎる場合は、説明をボタンの外へ分ける。
- 一行表示にこだわって、文字を小さくしすぎない。
- 隣のリンクを誤って押さないだけの間隔を取る。
- 固定表示のメニューやボタンが、本文や入力欄を覆っていないか確認する。
色の変更だけでは、押しやすさは改善しません。スマホを実際に持って押してみることも大切です。
独自HTMLを使う場合の、小さなCSS例
次は、自分で作るカードをPCでは2列、狭い幅では1列にする例です。AFFINGER7専用の設定やショートコードではありません。既存部品のクラス名に無差別に適用せず、例のように専用のクラスで範囲を限定します。
固定ページのテキストモードに入れるHTML例
<div class="dw-mobile-demo">
<div class="dw-mobile-demo__cards">
<section><h3>学べること1</h3><p>説明文を入れます。</p></section>
<section><h3>学べること2</h3><p>説明文を入れます。</p></section>
</div>
</div>追加CSSなど、CSSを管理する場所に入れる例
.dw-mobile-demo { overflow-wrap: anywhere; }
.dw-mobile-demo__cards {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.dw-mobile-demo__cards > section {
min-width: 0;
padding: 20px;
box-sizing: border-box;
background: #f3f7fb;
}
.dw-mobile-demo img { max-width: 100%; height: auto; }
@media (max-width: 600px) {
.dw-mobile-demo__cards { grid-template-columns: 1fr; }
}600pxはこの例で選んだ値です。テーマ全体の切り替え幅を変更するコードではありません。実際にカードが窮屈になる幅に合わせて調整してください。
追加CSSを公開すると、専用クラスを使っている他のページにも影響します。先に検証環境で確認し、元のCSSを控えてから反映します。CSSを使わずテーマの設定で対応できる場合は、そちらを先に検討すると管理箇所を増やさずに済みます。
画面幅に応じて配置を変える基本的な考え方は、MDNのレスポンシブデザイン解説でも確認できます。
直らないときは、この順番で確認する
- 保存先：プレビューしているページと編集したページは同じか。
- 適用範囲：HTMLのクラス名とCSSが一致しているか。
- 競合：別のCSSやインライン指定で上書きされていないか。
- キャッシュ：古い表示が残っていないか。利用中のキャッシュ機能の手順を確認する。
- 共通部品：表、動画、広告、埋め込みなどが固定幅で飛び出していないか。
ページ全体へ「はみ出した部分を隠す」指定を入れるだけだと、必要な文字やボタンまで見えなくなることがあります。どの要素が幅を超えているかを探すのが先です。
また、原因が分からないまま本番でプラグインを一斉停止したり、テーマを切り替えたりすることは避けましょう。比較が必要なら検証環境で一つずつ変更し、結果を記録します。
公開前のチェックリスト
- タイトル、見出し、本文が欠けずに読める。
- 写真の重要な部分と、図解内の文字を確認できる。
- ページ全体が意図せず横スクロールしない。
- メニューを開閉でき、リンク先が正しい。
- 主ボタンと補助リンクを見分けられ、指で押しやすい。
- 画像の読み込み中に、ボタンが大きく移動して押し間違えないか確認する。
- PC表示も再確認し、スマホ向け修正で崩していない。
読み込みが遅いと感じる場合は、画像の容量や外部埋め込みなども別途調べます。見た目の確認と速度の計測は分けて考え、測っていない段階で「高速化した」とは判断しません。
まとめ：スマホ表示は「縮小」ではなく「読み直し」で整える
AFFINGER7のスマホ表示は、①崩れる範囲を特定する、②改行と余白を整える、③画像の用途を分ける、④カードとボタンを並べ直す、⑤実機とPCの両方で確認する、という順番で見直しましょう。
細かな装飾より先に、読者が文章を読み、画像を理解し、次のリンクへ進めることを優先します。一度に全部を変更せず、小さく修正して確認するほうが、原因も結果も追いやすくなります。
AFFINGER7の関連記事
2026年9月9日作成。DOWELLの制作過程を参考にした一般的な調整手順です。設定項目は使用環境で異なるため、専用機能はAFFINGER7公式マニュアルをご確認ください。
