シードプロッド最新ニュース

ビジネスの成長に役立つWordPressのチュートリアル、ヒント、リソース

WordPressでページを全幅にする方法

WordPressでページを全幅にする方法 

執筆者 著者アバター ステイシー・コリン
著者アバター ステイシー・コリン
ステイシーはWordPressとデジタルマーケティングについて10年以上、その他のトピックについてはもっと長い間執筆している。また、ウェブデザイン、ユーザーエクスペリエンス、SEOにも造詣が深い。
     レビュー レビュアーアバター ターナー・ジョン
レビュアーアバター ターナー・ジョン
ジョン・ターナーはSeedProdの共同設立者です。彼は20年以上のビジネスと開発の経験があり、彼のプラグインは2500万回以上ダウンロードされています。

I’ve run into this a lot when creating landing pages or simpler designs. You set up a page, but there’s a sidebar or padding that just won’t go away, and it makes everything feel tight and off-center.

Making the page full width usually fixes it right away. It gives your layout more breathing room and helps your content stand out.

In this guide, I’ll show you how to make a page full width in WordPress, step by step.

WordPressでページを全幅にする理由

WordPressでページを全幅にする方法を学ぶことは、重要なコンテンツを強調する優れた方法です。サイドバーやその他の邪魔なものがないため、訪問者はメインコンテンツに集中しやすくなります。サイドバーは、特定の行動喚起(CTA)にユーザーを誘導したいランディングページに特に有効です。

固定幅ページと全幅ページ

また、全幅のページを作成することで、ウェブサイトをモダンで視覚的に魅力的に見せることができます。すっきりとした見た目で、コンテンツは瞬時に魅力的になります。

WordPressのウェブサイトで全幅レイアウトを検討する理由は、他にもいくつかあります:

  • より良いモバイル体験:全幅レイアウトは多くの場合、よりモバイルフレンドリーです。小さな画面にも適応し、モバイルユーザーにより良いブラウジング体験を提供します。
  • 汎用性: 全幅ページは柔軟性に富んでおり、ポートフォリオ、製品紹介、長編コンテンツなど、さまざまなタイプのコンテンツに使用できます。
  • ユーザーエクスペリエンスの向上: スペースが増えることでレイアウトが整理され、訪問者がコンテンツを閲覧しやすくなります。これにより、ページ滞在時間が長くなり、直帰率が下がります。
  • 創造の自由:全幅レイアウトは、よりクリエイティブな自由を与えてくれます。余分なスペースは、大きな画像、埋め込みビデオ、または制約の多いレイアウトではうまく収まらないその他のビジュアル要素に使用できます。
  • SEOに有利:ページ滞在時間が長く、直帰率が低ければ、SEOにプラスの影響を与えます。ユーザーエクスペリエンスを向上させる全幅レイアウトは、これらの指標に貢献します。

WordPressでページを全幅にする方法:4つの方法

WordPressで全幅ページレイアウトを作成するには、いくつかの方法があります。WordPressプラグインを使ったり、カスタムCSSやHTMLコードを書いたり、WordPressページビルダーを使うこともできます。

最適な解決策を見つけるために、このガイドで取り上げる以下の方法をチェックしてください:

ということで、最初の方法を紹介しよう。

方法1:SeedProdでカスタム全幅ページを作成する

ページビルダープラグインは、WordPressサイトにフル幅のページを追加するための優れた方法です。このプラグインを使えば、ドラッグ&ドロップのインターフェイスで全幅ページを作成・編集し、カスタマイズすることができます。 

人気のあるページビルダーには、Thrive Architect、Elementor、Beever Builderなどがあります。このガイドでは、SeedProdを使用します。SeedProdは、ウェブサイトのレイアウト全体を完全にコントロールできるので、WordPressのページビルダーとしては最高です。

SeedProd ドラッグ&ドロップWordPressウェブサイトビルダー

SeedProdを使用すると、カスタムランディングページを作成し、ヘッダー、フッター、ホームページ、および他のページ領域を含む他の要素をコードなしでカスタマイズすることができます。ドラッグ&ドロップのインターフェイスは初心者に優しく、現在のテーマとシームレスに動作します。

SeedProdを使用してカスタム全幅ページを作成するには、まずWordPressウェブサイトにSeedProdプラグインをインストールし、有効化します。

ヘルプが必要な場合は、SeedProdのインストールに関するドキュメントをご覧ください。これは、アクティベーションプロセスをガイドし、追加機能のロックを解除するためにライセンスキーをアクティベートする方法を示しています。

注:このガイドではSeedProd Proを使用しています。しかし、WooCommerceストアをカスタマイズしたい場合は、SeedProd Eliteを使用することをお勧めします。

ランディングページの作成

プラグインを有効化した後、SeedProd " Landing Pagesに移動し、Add New Landing Pageボタンをクリックします。

SeedProdで新しいランディングページを追加する

180以上のランディングページテンプレートが用意されています。これらのテンプレートの多くは、デフォルトで全幅オプションを含んでいます。

ランディングページのテンプレートを選ぶ

気に入ったテンプレートが見つかったら、チェックマークアイコンをクリックします。

次に、ランディングページの名前とURL情報を入力し、「保存してページの編集を開始する」ボタンをクリックします。

ランディングページの詳細を入力する

新しいテンプレートが起動すると、左側にブロック、セクション、設定が表示され、右側にライブプレビューが表示されます。プレビュー上のどこかをクリックして、異なるページ要素を選択し、その設定を編集することができます。

SeedProdドラッグ・アンド・ドロップ・インターフェースのスクリーンショット

SeedProdでページを全幅にする方法

良い例は、テンプレートのセクションをカスタマイズして全幅にすることです。下のテンプレートでは、セクションは固定画面になっています。

WordPressの固定幅ページのスクリーンショット

これを変更するには、セクションをハイライトして紫色のボーダーを表示させ、設定パネルを開きます。そこから "セクションの幅 "の見出しまでスクロールダウンし、ドロップダウンメニューからフルスクリーンを選択してください。  

SeedProdでページセクションを固定幅からフルスクリーンに変更する方法を示すスクリーンショット

そして、ページをプレビューすると、その部分が画面全体を覆っているのがわかる。

ワードプレスの全幅ページのスクリーンショット

他のセクションでもこの作業を続ければ、ページ全体を全幅にすることができます。同様の手順で、個々の行や列を全幅にすることも可能です。

SeedProdで固定幅の行を全幅にする方法を示すスクリーンショット

ページのカスタマイズが終わったら、保存して公開することを忘れないでください。

ランディングページビルダーと並んで、SeedProdにはドラッグ&ドロップのWordPressテーマビルダーも含まれています。この機能により、コードを書くことなくカスタムWordPressテーマを作成することができます。

SeedProdテーマテンプレートキット

まず、WordPressのダッシュボードからSeedProd " Theme Builderにアクセスし、テーマテンプレートキットボタンをクリックして、80以上の完全にカスタマイズ可能なウェブサイトのテーマキットから選択します。

SeedProdテーマテンプレートキット

SeedProdでのテーマのカスタマイズは、ページビルダー機能に似ています。ここでは、リストからテーマファイルを選び、ページビルダーで開き、ポイント&クリックするだけで、以前のように任意のセクションを全幅にすることができます。

テーマビルダーでは、ページ、ブログレイアウト、アーカイブ、ヘッダー、フッター、サイドバー、WooCommerceページなど、ウェブサイトのあらゆる部分をカスタマイズできます。さらに、カスタマイズオプションには、フォント、色、背景、スペーシング、アニメーションなどのスタイリングも含まれています。

詳しくは、カスタムWordPressテーマの作成方法をご覧ください。

方法2:プラグインを使ってWordPressでページを全幅にする

次に紹介する方法も簡単で、ほとんどのWordPressプラグイン、テーマ、ページビルダーで動作する。

WordPressの全幅テンプレートプラグイン

ここでは、Fullwidth Templatesプラグインを使用します。プラグインをダウンロードして、WordPressサイトにインストールしてください。

WordPressのプラグインをインストールする方法については、こちらのガイドをご覧ください。

プラグインを有効化すると、WordPressのページエディターに3つの新しいテンプレートファイルオプションが追加されます。既存のページを編集するか、新しいページを追加して、右側のパネルにある "テンプレート "の見出しを見つけることで見つけることができます。

Fullwidthテンプレートプラグインのプリメイドテンプレートのスクリーンショット

テンプレートは以下の3つ:

  1. FWサイドバーなし:このオプションは、あなたのページからサイドバーを削除し、残りのコンテンツはそのまま残します。
  2. FW全幅:このオプションはサイドバー、コメント、タイトルを削除し、ページレイアウトを全幅に引き伸ばします。
  3. FW Fullwidth ヘッダー・フッターなし:このオプションは、ヘッダーとフッターだけでなく、FW Fullwidth設定が行うすべてのことを削除します。

WordPressエディターで最も人気のあるオプションは、FW No Sidebarです。

結局のところ、このプラグインは全幅ページを簡単に作ることができる。しかし、カスタマイズのオプションはあまりないので、ページビルダーを使うことをお勧めします。

方法3:テーマの全幅テンプレートを使う

多くの優れたWordPressテーマには、デフォルトで全幅ページのテンプレートが用意されています。ですから、あなたのテーマにこのオプションがあれば、それを使うのがベストです。

通常、WordPressエディターのページ属性セクションを見れば、あなたのテーマが全幅テンプレートを採用しているかどうかがわかります。

この例では、人気のあるHestia WordPressテーマを使用しています。ご覧のように、テンプレートオプションは右側のパネルの「テンプレート」見出しの下にあります。

ヘスティアのWordPressテーマは、テンプレートオプションをフル装備

全幅ページのテンプレート・オプションには以下のものがある:

  1. 全幅テンプレート
  2. サイドバーのあるページ
  3. ページビルダー ブランク
  4. ページビルダー全幅

表示されるオプションは、お使いのWordPressテーマによって異なる場合があります。お好みのテンプレートを選択し、ページを保存するだけで全幅にすることができます。

方法4:WordPressで手動でページを全幅にする

WordPressで全幅ページを作成する最後の方法は、全幅ページのテンプレートを自分で作成することです。この方法は、WordPressのテーマファイルを編集することに抵抗がなく、他の方法でうまくいかない場合にのみお勧めします。

作業を始める前に、WordPressサイトと現在のテーマをバックアップしてください。そうすることで、何か問題が発生したときにサイトを素早く復元することができます。

カスタムテンプレートの作成

まず、メモ帳のようなテキストエディタを開き、以下のコードをコピーして空白のファイルに貼り付ける:

<?php
/*
*
Template Name: Full-Width
*/
get_header(); ?>

次に、このファイルをfull-width.phpという名前で保存し、"Save as type "を "All Files "に変更します。これにより、ファイルは自動的に.txtファイルとして保存されません。

カスタム全角テンプレートファイルの保存方法を示すスクリーンショット

このファイルはWordPressにファイル名を伝え、ヘッダーテンプレートを取得する。

次のステップは、コードのコンテンツ部分を編集することです。FTPクライアントか ウェブホストのファイルマネージャーを使ってウェブサイトに接続し、/wp-content/themes/your-theme-folder/に移動する。

このフォルダの中で、テーマのデフォルト・ページ・テンプレート・ファイルであるpage.phpファイルを見つける必要があります。テキストエディタでこのファイルを開き、get_header()行以下のコードをすべてコピーしてください。

次に、コピーしたコードを先ほど作成したfull-width.phpテキストファイルに貼り付けます。

サイドバーの削除

同じfull-width.phpファイルで、以下のコード行を見つけて削除する:

<?php get_sidebar(); ?>

これにより、全幅テンプレートを使用しているときにサイドバーが表示されなくなります。

フッターウィジェットエリアなど、複数のサイドバーがあるテーマの場合、このコードが複数回表示されることがあります。どのサイドバーを残すかを決め、不要なものは削除してください。

もしあなたのテーマがページにサイドバーを表示しないのであれば、ファイル内にこのコードが全く見つからないかもしれません。

変更後、新しいfull width.phpファイルのコードはこのようになります:

<?php
/*
*
Template Name: Full-Width
*/
get_header(); ?>

<div id="primary" class="site-content">
		<div id="content" role="main">

			<?php
			while ( have_posts() ) :
				the_post();
				?>
				<?php get_template_part( 'content', 'page' ); ?>
				<?php comments_template( '', true ); ?>
			<?php endwhile; // End of the loop. ?>

		</div><!-- #content -->
	</div><!-- #primary -->

<?php get_footer(); ?>

最後に、このファイルを保存し、FTPクライアントを使用してテーマフォルダにアップロードします。

これで、全幅カスタムページテンプレートを作成し、WordPressテーマにアップロードすることに成功しました。次のステップは、このテンプレートを使って全幅ページを作成することです。

これを行うには、WordPressの管理画面にアクセスし、新しいページを作成または編集します。

右側の "Page "パネルで "Templates "を探し、"Template "ドロップダウンをクリックして、新しい "Full Width "テンプレートを選択します。

WordPressの新しいカスタム全幅ページテンプレートを示すスクリーンショット

テンプレートを選択したら、PublishまたはUpdateをクリックして変更を保存します。

カスタムCSSを追加してページを全幅にする

ページを表示すると、サイドバーは表示されず、1カラムで表示されます。場合によっては、まだ全幅になっていないこともあるので、CSSでスタイルを追加する必要があります。

これを行うには、Inspectツールを使って、テーマがコンテンツエリアを定義するために使用しているCSSクラスを見つけます。その後、CSSを使って幅を100%に調整する。 

これで、外観 " カスタマイズにアクセスし、一番下にある追加CSSタブをクリックすることで、カスタムCSSコードをテーマに追加することができます。

WordPressのカスタマイザーでカスタムCSSを追加する場所を示すスクリーンショット

使用したCSSは以下のようなものだ:

.page-template-full-width .site-content {
width:100%;
}

Twenty Twelveテーマを使用したデモサイトでのページの見え方は以下の通りです。

カスタムテンプレートを使ってWordPressでページを全幅にする方法の最終結果を示すスクリーンショット。

If you need help with this step, you can see this guide on how to add custom CSS in WordPress.

次ページ:WordPressテーマをカスタマイズする方法

このガイドが、WordPressでページを全幅にする方法を学ぶのにお役に立てば幸いです。

さらに役立つWordPressチュートリアルをお探しなら、以下のトップ・チュートリアルをご覧ください:

お読みいただきありがとうございました!ご質問やご意見がありましたら、お気軽にコメントをお寄せください。

また、YouTubeX(旧Twitter)Facebookでも、ビジネスの発展に役立つコンテンツを配信しています。

著者アバター
ステイシー・コリン ライター
ステイシーはWordPressとデジタルマーケティングについて10年以上、その他のトピックについてはもっと長い間執筆している。また、ウェブデザイン、ユーザーエクスペリエンス、SEOにも造詣が深い。

情報開示私たちのコンテンツは読者支援型です。つまり、あなたが私たちのリンクをクリックした場合、私たちはコミッションを得る可能性があります。私たちは、読者に付加価値をもたらすと信じる製品のみを推薦します。