WordPressのフル幅ページとは、サイドバーやレイアウトを制限するコンテナボックスなしで、コンテンツがブラウザウィンドウ全体に広がるようにすることです。これは人々が最もよく行いたいデザイン変更の1つであり、予想よりも早く設定できることがほとんどです。
多くの初心者がこの問題で苦労しているのを目にしました。なぜなら、ほとんどのWordPressテーマはデフォルトでサイドバーを追加し、コンテンツの幅を制限するからです。サイドバーが全く不要な場合でも、ページが窮屈に感じられることになります。
良いニュースは、それを修正する方法がいくつかあることです。このガイドでは、最も簡単な方法（プラグインなし、コードなし）から最も高度な方法まで、WordPressでページをフル幅にするための5つの方法を説明します。また、フル幅レイアウトが期待どおりに機能しない場合の対処法も説明します。
テーマに組み込まれたフル幅テンプレートを使用する
ほとんどのWordPressテーマには、すでにフル幅ページテンプレートが含まれています。プラグインをインストールしたり、コードを書いたりすることなく、ページエディターで切り替えることができます。
確認方法は次のとおりです。
ステップ1：フル幅にしたいページをWordPressエディターで開きます。
ステップ2：右側のサイドバーで、テンプレートセクションを探します。テーマによっては、ページ属性の下に表示されるか、独立したテンプレートドロップダウンとして表示される場合があります。
ステップ3：ドロップダウンをクリックし、フル幅オプションを探します。名前はテーマによって異なります。「フル幅」、「サイドバーなし」、「空白」、またはそれに類するものが表示される場合があります。
ステップ4：フル幅テンプレートを選択し、更新または公開をクリックします。
ステップ5：ページをプレビューして、サイドバーが消え、コンテンツがページ全体に広がっていることを確認します。
これで完了です。テーマにフル幅テンプレートがある場合、これが最も簡単な使用方法です。
ドロップダウンにフル幅オプションが表示されない場合は、テーマにそれがない可能性があります。次の方法に進んでください。
ブロックエディターで個々のブロックをフル幅にする
WordPressのブロックエディターでは、個々のブロックをフル幅の配置に設定でき、ページテンプレートを変更せずに画面全体に引き伸ばすことができます。これはWordPressに組み込まれているため、プラグインは必要ありません。
これは、グループブロック、カバーブロック、画像ブロック、およびほとんどのレイアウトブロックで機能します。
ステップ1：WordPressエディターでページを開き、フル幅にしたいブロックを選択します。
ステップ 2: ブロックの上部にあるブロックツールバーで、配置の変更ボタン（横線が並んだアイコン）をクリックします。
ステップ 3: ドロップダウンからフル幅を選択します。
ブロックはブラウザウィンドウの端まで引き伸ばされます。WordPress は、これを実現するために舞台裏で .alignfull という CSS クラスを追加します。
ヒント: ページ全体をフル幅にしたい場合は、まずグループブロックを追加します。グループブロックをフル幅に設定してから、その中にコンテンツブロックを追加します。グループブロックは、ネストされたすべてのもののフル幅コンテナとして機能します。
フル幅の配置オプションがツールバーに表示されない場合は、テーマがそれをサポートしていない可能性があります。その修正方法については、以下のトラブルシューティングセクションで説明します。
ブロックテーマでのフル幅レイアウト（フルサイト編集）
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 フル幅」が適切です。完全に空白のキャンバスには、「FW ヘッダーフッターなしフル幅」を使用します。
ステップ 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：ページを更新してプレビューします。
このアプローチは完全な制御を可能にしますが、子テーマでテンプレートファイルを維持する必要があります。コードの編集に慣れていない場合は、前の方法のいずれかを選択する方が安全です。
フル幅レイアウトを使用する場合（および使用しない場合）
フル幅レイアウトは、すべてのページに適しているわけではありません。ここでは、うまく機能する場合と、コンテナレイアウトの方が適している場合について説明します。
| フル幅が最も適しているもの | コンテナレイアウトが最も適しているもの |
|---|---|
| ランディングページ | ブログ投稿 |
| ホームページ | ドキュメント |
| ポートフォリオページ | 長文記事 |
| 商品紹介ページ | 文字数が多いページ |
| 発売前ページ | ナレッジベース |
理由は読みやすさです。広い画面全体に広がる長いテキスト行は、狭い余白で区切られた行よりも読みにくいです。主にテキストで構成されるコンテンツの場合、ボックスレイアウトは行の長さを快適に保ちます。
同じサイトで両方を混在させることも可能です。私は、ホームページやランディングページのような主要なページにはフル幅レイアウトを使用し、サイドバー付きの標準テンプレートをブログ記事に使用しています。
フル幅ページが機能しない？修正方法はこちら
ページをフル幅に設定しても、ボックス表示されたままだったり、サイドバーが表示されたりする場合は、最も一般的な原因とそれぞれの修正方法を以下に示します。
テーマがフル幅の配置をサポートしていない
ブロックエディタのツールバーに「フル幅」の配置オプションが表示されない場合、テーマはそのサポートを宣言していません。
テーマには、functions.phpファイルに1行のコードが必要です：
add_theme_support( 'align-wide' );
まずテーマのドキュメントを確認して、この設定があるかどうかを確認してください。ない場合、コードの編集に慣れている場合は、子テーマのfunctions.phpファイルにその行を追加してください。これにより、ブロックエディタで幅広とフル幅の両方の配置オプションが有効になります。
プラグインがレイアウトを上書きしている
一部のプラグインは、サイドバー、ウィジェット、またはレイアウトの制限を挿入して、フル幅テンプレートを上書きします。これは多くのサイトで発生しており、原因となっているプラグインを特定するのが常に容易ではありません。
競合を見つけるには、プラグインを1つずつ無効にし、それぞれ無効にした後にページを確認してください。フル幅レイアウトが再表示されたら、原因を特定したことになります。
テスト中にライブ訪問者に影響を与えたくない場合は、Health Check & Troubleshootingプラグインをインストールしてください。そのトラブルシューティングモードを使用すると、他の全員にとってサイトを通常の状態に保ちながら、自分だけプラグインを無効にすることができます。
サイドバープラグインとウィジェットプラグインが最も一般的な原因です。
コンテンツ幅の設定がレイアウトを制限している
WordPressおよび一部のテーマでは、ブロックを全幅に引き伸ばすことができない最大コンテンツ幅が設定されており、全幅配置を選択した場合でも同様です。
ブロックエディターで、右上にある設定アイコン（歯車アイコン）をクリックし、レイアウトセクションを探します。コンテンツ幅の値が設定されている場合、ブロックが制限されている可能性があります。
ブロックテーマでは、これはテーマのtheme.jsonファイル内のcontentSizeおよびwideSizeの値によって制御されます。これらの値を増やすか、削除すると、全幅ブロックがブラウザの端まで引き伸ばせるようになります。
CSSがコンテンツ領域を制限している
テーマのスタイルシートでは、コンテンツコンテナにmax-widthが設定されており、全幅テンプレートが適用されていても、コンテンツコンテナが引き伸ばされるのを妨げている可能性があります。
確認するには、ページコンテンツを右クリックして検証（またはF12キーを押す）を選択します。コンテンツラッパー要素を確認します。これは、.site-content、.entry-content、または.content-areaのようなクラスを持つdivであることがよくあります。
コンテナを制限する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 で、ビジネスを成長させるための役立つアドバイスやコンテンツをさらにご覧ください。
