WordPressのフルワイドページでは、コンテンツがブラウザウィンドウ全体に広がり、サイドバーやボックス型コンテナによるレイアウト制限がありません。これはユーザーが最も頻繁に求めるデザイン変更の一つであり、通常は予想以上に素早く設定できます。
多くの初心者がこれに苦労しているのを見てきました。なぜなら、ほとんどのWordPressテーマはデフォルトでサイドバーを追加し、コンテンツの幅を制限するからです。その結果、サイドバーを全く使いたくない場合でも、ページが窮屈に感じられることになります。
良い知らせは、修正方法がいくつかあることです。このガイドでは、WordPressでページを全幅表示にする5つの方法を、最も簡単な方法（プラグイン不要・コード不要）から高度な方法まで順にご紹介します。また、全幅レイアウトが意図した通りに機能しない場合の対処法についても説明します。
テーマの組み込みフルワイドテンプレートを使用する
ほとんどのWordPressテーマには、すでに全幅ページテンプレートが含まれています。プラグインをインストールしたりコードを書いたりすることなく、ページエディタで切り替えることができます。
確認方法は以下の通りです。
ステップ1:WordPressエディターで全幅にしたいページを開きます。
ステップ2:右サイドバーで「テンプレート」セクションを探します。テーマによっては「ページ属性」の下に表示されるか、独立した「テンプレート」ドロップダウンとして表示される場合があります。
ステップ3：ドロップダウンをクリックし、全幅オプションを探します。名称はテーマによって異なります。「全幅」「サイドバーなし」「空白」など、類似の名称が表示される場合があります。
ステップ4:全角テンプレートを選択し、「更新」または「公開」をクリックします。
ステップ5：ページをプレビューし、サイドバーが消え、コンテンツがページ全体に広がることを確認します。
以上です。テーマに全幅テンプレートが用意されている場合、これが最も迅速な使用方法です。
ドロップダウンに全角オプションが表示されない場合、お使いのテーマに全角オプションが含まれていない可能性があります。次の方法に進んでください。
ブロックエディタで個々のブロックを全幅にする
WordPressのブロックエディタでは、個々のブロックを全幅配置に設定でき、ページテンプレートを変更せずに画面全体にブロックを拡大表示できます。これはWordPressに標準搭載されている機能なので、プラグインは必要ありません。
これはグループブロック、カバーブロック、画像ブロック、およびほとんどのレイアウトブロックで機能します。
ステップ1:WordPressエディターでページを開き、全幅にしたいブロックを選択します。
ステップ2:ブロック上部のブロックツールバーで、配置変更ボタン（水平線のアイコン）をクリックします。
ステップ3：ドロップダウンから「フル幅」を選択します。
ブロックはブラウザウィンドウの端まで伸びます。WordPressは「 .alignfull これを実現するために裏方で尽力した。
ヒント：ページのセクション全体を全幅にしたい場合は、まずグループブロックを追加してください。グループブロックの配置を「全幅」に設定し、その内部にコンテンツブロックを追加します。グループブロックは、内部にネストされたすべての要素を収容する全幅コンテナとして機能します。
ツールバーに「全幅」配置オプションが表示されない場合、お使いのテーマが対応していない可能性があります。その対処法については、以下のトラブルシューティングセクションで説明します。
ブロックテーマにおけるフル幅レイアウト（フルサイト編集）
Twenty Twenty-Fiveのような新しいブロックテーマを使用している場合、全幅レイアウトの動作は異なります。ブロックテーマでは、サイトエディターとtheme.jsonという設定ファイルを使用してレイアウトの幅を制御します。
ブロックテーマでページ幅を調整するには、WordPressダッシュボードの「外観」→「エディター」に移動します。そこからページテンプレートを直接編集し、テンプレートレベルでコンテンツ領域を全幅に設定できます。
theme.jsonファイルは2つのキー値を制御します： contentSize (コンテンツのデフォルト幅)および wideSize （幅広ブロックの幅）。これらの値を調整すると、コンテンツがサイト全体に広がる幅が変わります。
モダンなブロックテーマを使用している場合、これが最も柔軟なアプローチです。ページごとに設定する代わりに、レイアウトの幅をグローバルに制御できるためです。
無料プラグインで全幅テンプレートを追加する
お使いのテーマに全幅テンプレートが含まれていない場合、無料の「Fullwidth Templates」プラグインでどのWordPressテーマにも追加できます。コードの記述は不要です。
ステップ1:WordPressダッシュボードで、[プラグイン] → [新規追加]に移動し、「Fullwidth Templates」を検索してください。この手順でサポートが必要な場合は、WordPressプラグインのインストール方法に関するガイドをご覧ください。
ステップ2:プラグインをインストールして有効化する。
ステップ3：任意のページを編集し、右サイドバーの「テンプレート」ドロップダウンを開きます。
3つの新しいテンプレートオプションが表示されます：
| テンプレート | 除去対象 |
|---|---|
| FW サイドバーなし | サイドバーのみ |
| FW 全角 | サイドバー、ページタイトル、コメント |
| FW 全角 ヘッダーなし フッターなし | サイドバー、タイトル、コメント、ヘッダー、フッター |
ステップ4：必要な内容に合ったテンプレートを選択します。ほとんどのランディングページには「FW Fullwidth」が最適です。完全に空白のキャンバスが必要な場合は「FW Fullwidth No Header Footer」を使用してください。
ステップ5: 「更新」または「公開」をクリックし、ページをプレビューします。
このプラグインはどのテーマでも動作するため、テーマ自体に全幅テンプレートが用意されていない場合でも、信頼できる選択肢となります。
SeedProdでカスタムフルワイドページを作成する
ランディングページ、近日公開ページ、販売ページ、またはカスタムレイアウトなど、デザインを完全に制御する必要がある場合、ページビルダーはテンプレート切り替えだけでは得られない柔軟性を提供します。
この目的にはSeedProdを定期的に使用しています。既存のテーマと併用できるため、現在の設定を変更する必要はありません。SeedProdで作成するすべてのページはデフォルトでフル幅になります。
以下に、それを使って全幅ページを作成する方法をご紹介します。
ステップ1:SeedProdをインストールして有効化し、ダッシュボードのSeedProd → ランディングページに移動します。インストール方法がわからない場合は、こちらのSeedProdインストールガイドをご参照ください。
ステップ2:「新しいランディングページを追加」をクリックします。
テンプレートを選択してください。SeedProdには、ランディングページ、ウェビナー登録ページ、販売ページなどのテンプレートが含まれています。また、白紙のページから始めることもできます。
ステップ3：ページ名とURLを入力し、「保存してページの編集を開始」をクリックします。
ステップ4:ドラッグ＆ドロップエディターが開き、ページレイアウトが表示されます。各セクションはデフォルトで全幅に広がります。
セクションの幅を調整する必要がある場合は、セクションをクリックし、設定パネルで「セクションの幅」を「フルスクリーン」に変更してください。
変更後の全幅ページの表示は以下の通りです：
個々の行をクリックし、同じ方法で幅を設定することで、行全体を全幅にすることもできます。
ステップ5:ブロックをドラッグしてコンテンツを追加します：見出し、画像、フォーム、ボタン、価格表、その他必要な要素を自由に配置できます。
ステップ6:レイアウトに満足したら、[保存]をクリックし、次に[公開]をクリックします。
SeedProdは、サイト内の他のページとは見た目が異なるページ（特化型ランディングページや近日公開ページなど）が必要な場合に最適です。また、フルワイドレイアウトを組み込んだ完全なカスタムWordPressテーマの作成にも利用できます。通常のテーマテンプレートで問題ないページについては、このガイドの前の方法の方が迅速です。
コードを書かずにフルワイドページを作成したいなら、今すぐSeedProdを始めましょう。
手動で全幅ページテンプレートを作成する
PHPとCSSに慣れているなら、テーマファイルを直接編集することでカスタムのフルワイドページテンプレートを作成できます。この方法ではプラグインは一切必要ありません。
重要：テーマファイルを編集する前に、サイトのバックアップを取ってください。また、これらの変更は子テーマで行ってください。そうすれば、テーマの更新によって作業内容が上書きされることはありません。
ステップ1： サイトに接続する FTPクライアントを使用する またはあなたの ウェブホストの ファイルマネージャー。移動先 /wp-content/themes/your-theme-folder/.
ステップ2： 新しいファイルを作成してください full-width.phpファイルの先頭に、WordPressが認識できるようにこのテンプレートヘッダーを追加してください：
<?php
/*
* Template Name: Full Width
*/
get_header();
?>
ステップ3： テーマを開いてください page.php ファイルを開き、その内容を新しいファイルにコピーしてください full-width.php ヘッダーコードの下にあるファイルを開きます。次に、サイドバーを呼び出す行を探して削除します：
<?php get_sidebar(); ?>
その行を削除してください。これにより、テンプレートからサイドバーが削除されます。
ステップ4:ファイルを保存し、テーマフォルダにアップロードします。
ステップ5:WordPressのダッシュボードに戻ります。任意のページを編集し、テンプレートのドロップダウンを開くと、新しい「フル幅」オプションが表示されます。
ステップ6：テンプレートを選択し、コンテンツ領域を全幅に拡大するカスタムCSSを追加します。「外観」→「カスタマイズ」→「追加CSS」に移動し、以下を追加してください：
.page-template-full-width .site-content {
width: 100%;
max-width: none;
}
正確なCSSクラス名はテーマによって異なります。正しいコンテナクラスを見つけるには、ブラウザの要素検査ツールを使用してください。 .site-content うまくいかない。
ステップ7:ページを更新し、プレビューします。
この方法では完全な制御が可能ですが、子テーマ内でテンプレートファイルを維持管理する必要があります。コード編集に慣れていない場合は、前述の方法のいずれかを選択する方が安全です。
フル幅レイアウトを使用すべき時（そして使用すべきでない時）
全幅レイアウトはすべてのページに適しているわけではありません。ここでは、全幅レイアウトが効果的な場合と、コンパクトなレイアウトの方が適している場合について説明します。
| フル幅が最適です | 囲まれたレイアウトが最適です |
|---|---|
| ランディングページ | ブログ記事 |
| ホームページ | ドキュメンテーション |
| ポートフォリオページ | 長文記事 |
| 製品展示 | テキスト量の多いページ |
| 近日公開のページ | 知識ベース |
理由は可読性です。広い画面に広がる長いテキスト行は、狭い余白で制限された行よりも読みにくくなります。主にテキストで構成されるコンテンツでは、ボックスレイアウトが適切な行長を維持します。
同じサイトで両方を組み合わせることができます。私はホームページやランディングページなどの重要なページにはフルワイドレイアウトを、ブログ記事にはサイドバー付きの標準テンプレートを使用しています。
フル幅ページが表示されない？解決方法はこちら
ページを全幅に設定してもボックス状に見える、またはサイドバーが表示される場合、最も一般的な原因とそれぞれの解決方法をご紹介します。
お使いのテーマは全幅配置に対応していません
ブロックエディタのツールバーに「全幅」配置オプションが表示されない場合、お使いのテーマがこれをサポートしていないことを意味します。
テーマには、その中に1行のコードが必要です。 functions.php ファイル：
add_theme_support( 'align-wide' );
まず、テーマのドキュメントを確認し、この設定があるかどうかを確認してください。設定がない場合、コード編集に慣れているなら、その行を 子テーマの functions.php ファイル。これにより、ブロックエディタでワイドとフル幅の両方の配置オプションが有効になります。
プラグインがレイアウトを上書きしています
一部のプラグインは、サイドバーやウィジェット、レイアウト制限を挿入し、フル幅テンプレートを上書きします。多くのサイトでこの現象を確認していますが、原因となるプラグインが必ずしも明確とは限りません。
問題の原因を特定するには、プラグインを一つずつ無効化し、その都度ページを確認してください。全幅レイアウトが再び表示された時点で、原因となっているプラグインが見つかります。
テスト中に実際の訪問者に影響を与えたくない場合は、Health Check & Troubleshootingプラグインをインストールしてください。そのトラブルシューティングモードでは、他のユーザーにはサイトが通常通り表示されたまま、自身のみプラグインを無効化できます。
サイドバープラグインとウィジェットプラグインが最も一般的な原因です。
コンテンツ幅の設定がレイアウトを制限しています
WordPressおよび一部のテーマでは、コンテンツの最大幅が設定されているため、フル幅配置を選択してもブロックが全幅に広がらない場合があります。
ブロックエディタで、右上の設定アイコン（歯車アイコン）をクリックし、レイアウトセクションを探してください。コンテンツ幅の値が設定されている場合、ブロックの表示が制限されている可能性があります。
ブロックテーマでは、これは contentSize そして wideSize theme.json ファイル内の値。これらの値を増やすか削除すると、全角ブロックがブラウザの端まで伸びるようになります。
CSSがコンテンツ領域を制限しています
テーマのスタイルシートで設定されている可能性があります max-width コンテンツコンテナが全幅テンプレートを適用しても伸縮しないようにする。
確認するには、ページの内容を右クリックし、[選択] を選択してください。 点検する (またはF12キーを押す)。コンテンツラッパー要素を確認してください。これは多くの場合 div クラスのような .site-content, .entry-contentあるいは .content-area.
もしあなたが max-width または width コンテナを制限するプロパティは、カスタムCSSで上書きできます。 外観 → カスタマイズ → 追加CSS:
.your-content-class {
width: 100%;
max-width: none;
}
置換 .your-content-class 実際のクラス名は、お使いのテーマに合わせて変更してください。
WordPressでページを全幅表示にするFAQ
WordPressのテーマで全角テンプレートが見つからないのはなぜですか？
すべてのテーマに全幅テンプレートが含まれているわけではありません。お使いのテーマに全幅テンプレートがない場合、2つの選択肢があります。無料の「Fullwidth Templates」プラグインをインストールして、どのテーマにも全幅テンプレートオプションを追加する方法。またはSeedProdのようなページビルダーを使用して、完全なレイアウト制御でカスタム全幅ページを作成する方法です。
ブロックエディタにおける「ワイド幅」と「フル幅」の違いは何ですか？
ワイド幅はブロックを通常のコンテンツ領域を超えて拡張しますが、ページの余白内にとどまります。フル幅は余白を完全に無視し、ブロックをブラウザウィンドウの端まで拡張します。どちらのオプションも、テーマがワイド配置をサポートしている必要があります。ほとんどの現代的なテーマは対応しています。
ページを全幅にするとページ速度に影響しますか？
レイアウト自体はページの表示速度を低下させません。ただし、最適化されていない大きな画像を全幅に拡大表示すると、読み込み時間が長くなる可能性があります。全幅セクションで使用する前に画像を圧縮・リサイズし、ページの高速表示を維持してください。
ページ全体を変更せずに、1つのセクションだけを全幅にすることはできますか？
はい。ブロックエディターでグループブロックまたはカバーブロックを追加し、フル幅配置に設定してください。その内部のブロックはブラウザの端まで広がり、ページの残りの部分は通常の幅のままになります。SeedProdではセクションごとに幅を制御することも可能です。
フルワイドのページはモバイルでも見栄えがしますか？
はい、テーマがレスポンシブ対応であれば可能です。全幅レイアウトは自動的に小さい画面に最適化されます。公開前にモバイル端末でページをプレビューし、表示が正しいことを確認してください。WordPressブロックエディターとSeedProdの両方にモバイルプレビュー機能があります。デスクトップ専用サイトをモバイル対応にする方法についてはこちらをご覧ください。
フル幅ページの作成を開始する
WordPressでページを全幅表示にするには、設定箇所さえ分かれば1分もかかりません。まずはテーマの標準テンプレートから始めましょう。個々のセクションをより細かく制御したい場合は、ブロックエディタの「全幅」配置機能を使えば、プラグインなしで対応できます。
ランディングページやカスタムレイアウトの完全なデザイン制御が必要な場合、SeedProdならコードなしでフルワイドページを簡単に構築できます。
以下の関連ガイドもご参照ください：
- WordPressテーマのフォントを変更する方法（5つの解決策）
- WordPressテーマにFont Awesomeを簡単に追加する方法
- コンテンツを失うことなくWordPressのテーマを変更する方法
- WordPressでヘッダーをカスタマイズする方法（4つの簡単な方法）
- WordPressのホームページを編集する方法（簡単な方法）
お読みいただきありがとうございました！あなたのご意見をぜひお聞かせください。YouTube、X、Facebookで、あなたのビジネスを成長させるために役立つアドバイスやコンテンツを提供していますので、お気軽に会話にご参加ください。
