AFFINGER7 EXで全幅デザインを作る方法｜LPワイドの設定と注意点

AFFINGER7 EXのLPワイドとは？1カラムとの違い

LPワイドは、1カラムやLPレイアウトをベースに、主にパソコンで背景や帯状のコンテンツを画面幅いっぱいに広げて見せるための機能です。一般的な記事本文の枠を広げるだけでなく、セクションごとに背景色を切り替えたサービス紹介ページなどに向いています。

ただし、ワイド化を有効にするだけでは、完成したLPデザインにはなりません。 横に伸びた本文をそのまま配置すると視線の移動が長くなり、かえって読みにくくなる可能性があります。

AFFINGER7通常版とEX版でLPワイドの違いは？

まず確認したいのは、「トップページをワイドにできるか」と「任意の個別ページをワイド化できるか」は別の話という点です。公式マニュアルでは、AFFINGER7以降、トップページのみのLPワイド化は通常版でも利用可能と案内されています。一方、個別の投稿・固定ページの「LP化（ワイド）する」はEX版向けです。

つまり、通常版でもコードを使って横幅の広いデザインに近づけることはできます。ただし、それはEX版の「LP化（ワイド）する」レイアウト機能が通常版に含まれるという意味ではありません。目的がトップページだけなら、まず通常版で足りるか確認するとよいでしょう。

通常版とEX版の機能差を詳しく知りたい方は、私がまとめたAFFINGER7 EXと通常版の違いもご参考ください。

LPワイドの設定方法は3種類｜どこを変更すべき？

EX版の公式案内には、ワイド化の適用範囲が異なる3つの方法があります。最初の制作では、ほかの記事を巻き込まないページごとの設定をおすすめします。

サイト全体の一括設定は既存ページへも反映される

「テーマ管理」→「全体設定」→「サイト全体のレイアウト一括設定」にある「LP・1カラム時を全てワイド化する（β）」を有効化すると、すでに公開している1カラム・LPも対象になります。公開済みページの余白や帯背景が変わる可能性があるため、変更前に対象ページを洗い出しておきましょう。

トップページだけ変更する場合

「テーマ管理」→「トップページ」→「トップページのレイアウト」でワイド化を選びます。トップページの本文に固定ページを使う場合は、作成した固定記事のIDをテーマ管理の「トップページに固定記事を挿入」で指定する方法も公式に案内されています。

AFFINGER7 EXで固定ページをLPワイドにする5ステップ

サービス紹介や問い合わせ獲得を目的とするページを例に、設定の順番を整理します。設定項目名は公式マニュアルの表記に沿っています。

グループブロックで全幅背景を作る方法｜本文幅を保つのがコツ

ここがLPワイド制作の中心です。公式マニュアルでは、コンテンツをグループブロックに変換し、設定にある「ワイドにする」を適用する方法が案内されています。

背景色を変えたい範囲ごとにグループ化する

例えば、上から「ファーストビュー」「選ばれる理由」「制作実績」「料金」「問い合わせ」と分けてグループを作ります。背景を変えない部分まで一つの巨大なグループにすると、セクション間のメリハリをつけにくくなります。

「ワイドにする」を押したのに色が変わらない場合

マニュアルでは、投稿の編集画面上では変化しなくても、公開側（フロント側）には反映される場合があると説明されています。エディターの表示だけで判定せず、必ずプレビューで確認しましょう。

全幅LPを見やすくするレイアウト実例｜背景と文章幅を分ける

全幅化の目的は「何でも大きく見せる」ことではありません。訪問者が、何を提供しているページか理解し、必要な情報を読んで、次の行動に移れることが大切です。

例1：サービス紹介LPは5つの帯で組み立てる

例2：白背景と濃色背景の切り替えで読みやすさを作る

見出し・文章が続くところは白背景、重要な結論や特徴は淡い水色、最後のCTAは濃紺、と役割ごとに色を変えると整理しやすくなります。濃色背景の上には白文字を置き、文字が背景に埋もれないようにしましょう。

例3：大きい画像を使うなら、文字の配置まで考える

ヒーロー画像を画面幅に広げても、上に載せるキャッチコピーが読みにくければ意味がありません。画像の主役を避けて文字を置く、暗いオーバーレイを重ねる、スマホでは縦長の画像に差し替えるなど、視認性を優先してください。

LPワイドにしたときのヘッダー・記事タイトル・カテゴリ表示

LP化デザインは、通常の記事と異なりコンテンツ以外の一部要素が非表示になる特殊なレイアウトです。公式マニュアルも、目的によって表示崩れが起こり得ると注意しています。

トップページでヘッダーを表示したい場合

トップページのLPでは、headerエリアが通常非表示になると公式で説明されています。トップでヘッダーを残したいときは、テーマ管理のトップページ設定にある「LP時にヘッダー（headerエリア）を表示する」を確認してください。

記事タイトル・カテゴリは自動で消えるとは限らない

公式マニュアルでは、ワイド化後にタイトルやカテゴリを非表示にしたい場合、CSS等による調整が必要と案内されています。次は公式に掲載されているクラス名を使った例です。

.st-lp-wide .entry-title,
.st-lp-wide .st-catgroup {
  display: none;
}

このCSSは、ワイドLPのタイトル・カテゴリを非表示にする例であり、すべてのサイトに推奨する設定ではありません。対象を絞らず適用すると、ほかのLPワイドページのタイトルまで消える場合があります。特定ページにだけ適用したいときは、WordPressが付ける個別ページのbodyクラスなどと組み合わせて範囲を限定してください。

SEO面では、画面上の見出しを隠すかどうかと、検索結果向けのタイトル・ページの意味構造をどう整えるかは別問題です。表示だけでなく、H1の位置、見出しの順番、パンくず、内部リンクも確認しましょう。

LPワイドで表示が崩れるときの原因と対処法

横幅を大きく扱うページは、見出しや表だけでなく、画像・広告・フォームにも影響が出やすくなります。よくある症状を原因別に確認しましょう。

特に注意したいのは「100vw」の横はみ出し

独自CSSで要素にwidth:100vwを使うと、スクロールバーの幅や親要素の位置によって、端がはみ出す場合があります。WPのブロックやテーマ側のワイド化機能を優先し、独自CSSで画面幅を計算する場合は実際の表示を確認することをおすすめします。

CSSの競合はページ単位で切り分ける

WordPressテーマの見出し装飾、追加CSS、Gutenbergのブロックスタイル、目次プラグインが重なると、想定外の色や余白になることがあります。全体のCSSを一気に変えるのではなく、どの要素にどのスタイルが当たっているかを確認して修正しましょう。

全幅デザインを公開する前の確認ポイント｜スマホ・速度・SEO

LPワイドは主にPCで背景を広げる機能です。しかし、実際に訪問する読者の画面はスマートフォンかもしれません。PCで迫力があっても、スマホで読めなければ意味がありません。

ページの見た目を全幅化しただけで検索順位が上がるわけではありません。Google検索から訪問した方が求める内容にすぐたどり着き、次の行動まで迷わない構成にすることが重要です。

LPワイドが向いているページは？EXを選ぶべき人も整理

LPワイドの価値が出るのは、画面いっぱいの背景や写真に意味があるページです。必ずしもブログの全記事をワイド化する必要はありません。

はまちゃんねるではAFFINGER7 EXを使い、公開記事で比較表・図解・CTAを組み合わせています。ただし、それらのすべてがLPワイドやEX専用機能だけで実現しているわけではありません。通常記事を読みやすく整える設計と、個別LPで全幅背景を使う設計は、目的に合わせて選び分けるのがおすすめです。

AFFINGER7 EXのLPワイドでよくある質問