1. はじめに
WordPressでサイトを構築する際、「トップページとブログ一覧ページを別々のデザインにしたい」と考えることはありませんか？
例えば、企業サイトならトップページを サービス紹介やビジュアル重視のレイアウト にし、ブログ一覧は シンプルで記事が見やすいデザイン にするのが理想的です。
本記事では、WordPressでトップページとブログ一覧を個別にデザインする方法を詳しく解説します。
2. トップページとブログ一覧ページを分ける基本設定
WordPressでは、トップページとブログ一覧を別々に設定する方法が用意されています。
1. 固定ページを作成する
- WordPress管理画面で「固定ページ」→「新規追加」
- 「ホーム」用のページと「ブログ」用のページをそれぞれ作成
- 「公開」をクリック
2. 表示設定でトップページとブログ一覧を分ける
- 「設定」→「表示設定」
- 「ホームページの表示」で「固定ページ」を選択
- 「ホームページ」に作成した「ホーム」ページを設定
- 「投稿ページ」に作成した「ブログ」ページを設定
- 「変更を保存」をクリック
これで、トップページとブログ一覧を別々のページとして表示できます。
3. トップページを自由にデザインする
方法1：テーマのカスタマイザーを使う
多くのWordPressテーマでは、カスタマイザー（外観 → カスタマイズ）でトップページのデザインを変更できます。
- ウィジェットを活用
- セクションの追加
- カラーやフォントの調整
方法2：ページビルダーを利用する
ElementorやGutenbergのブロックエディターを使えば、トップページを自由にデザイン可能です。
- Elementor（ドラッグ&ドロップで編集）
- Gutenberg（ブロックエディターで構成）
- Brizy（直感的な操作）
方法3：カスタムテンプレートを作成する
独自のデザインを作る場合は、front-page.php を作成します。
<?php
/* Template Name: Custom Home */
get_header();
?>
<div class="home-content">
<h1>ようこそ！</h1>
<p>サイトの紹介をここに記載</p>
</div>
<?php get_footer(); ?>
- このテンプレートを固定ページの「テンプレート」から選択
- 独自のデザインを反映可能
4. ブログ一覧ページのデザインを変更する
方法1：テーマのブログ設定を活用
テーマによっては「ブログページのレイアウト設定」が可能です。
- Cocoon → 記事リストのデザイン変更
- GeneratePress → 記事の表示方法をカスタマイズ
- Astra → ブログ専用のデザインオプションあり
方法2：カスタムテンプレートを作成する
home.php を作成し、ブログ一覧を独自デザインにできます。
<?php
get_header();
?>
<div class="blog-list">
<h1>最新のブログ記事</h1>
<?php
if ( have_posts() ) {
while ( have_posts() ) {
the_post();
echo '<h2><a href="' . get_permalink() . '">' . get_the_title() . '</a></h2>';
the_excerpt();
}
}
?>
</div>
<?php get_footer(); ?>
home.phpを作成すると、ブログ一覧専用のレイアウトを適用可能- 記事のリスト表示を自由に変更できる
5. まとめ
トップページとブログ一覧を分けてデザインすることで、サイトの目的や訪問者のニーズに応じた最適なレイアウトを構築できます。
トップページでは、ブランドの魅力を強調し、訪問者にインパクトを与える視覚的な要素を活用できます。
一方、ブログ一覧ページは、情報の整理とアクセスのしやすさを重視し、読者がスムーズにコンテンツを閲覧できる設計にすることが重要です。
これらを適切にデザインすることで、サイト全体のユーザー体験を向上させ、エンゲージメントの向上やコンバージョン率の改善が期待できます。
トップページを視覚的に魅力的にし、ブログ一覧を見やすく整理することで、ユーザーの滞在時間が増え、コンバージョン率の向上が期待できます。
WordPressの設定を活用し、トップページとブログ一覧のデザインを最適化しましょう！
コメント