Bloggerでトップページをホームページ化する方法

Bloggerでブログを運営する際、初めての方は「トップページ＝最新記事一覧」と思いがちです。しかし、WordPressのようにトップページを「ホームページ化」することで、ブログの顔となる独自のページを作ることができます。

このページには、ブログの目的や特徴を紹介したり、各記事一覧ページへのリンクボタンを設置したりと、訪問者にわかりやすく案内する役割があります。

今回の記事では、初心者でも理解できるように丁寧に手順を解説しつつ、2つの方法のメリット・デメリットも紹介します

トップページを「ホームページ化」するとは

Bloggerでは通常、トップページに最新記事が自動で表示されます。しかし、WordPressでいう「固定ページ」をトップページに指定するイメージで、トップページを自由にデザインできるようにすることが可能です。

方法の比較：テンプレート直接編集 vs リダイレクト型

テンプレート直接編集（今回の方法）

トップページ専用の <b:widget> やHTMLを直接テンプレートに追加して、独自デザインのトップページを作ります。

メリット

• URLはそのまま / を使える

デメリット

• 初心者には挿入場所や条件式の理解が少し難しい
• テンプレート更新時にコードが消える・壊れる可能性あり

リダイレクト型（固定ページURLに飛ばす方法）

トップページにアクセスしたとき、自動的に固定ページにリダイレクトさせる方法です。固定ページ上で作った内容をトップページとして見せる形になります。

メリット

• 初心者でも比較的簡単に実装可能
• 固定ページの編集画面で内容を作成できる
• テンプレートを直接触らなくて済む

デメリット

• URLは /p/固定ページ.html になる（トップページURLは維持できない）
• SEOに影響する場合がある

かつの一日ひとつ｜Bloggerのトップページをホームページ風にする方法

トップページ専用コンテンツを作る方法

条件式 <b:if> の基本

トップページ専用に表示させたい要素には、条件式で「トップページかどうか」を判定します。

<b:if cond='data:blog.url == data:blog.homepageUrl'>
  <!-- ここにトップページ専用コンテンツ -->
</b:if>
  

注意点

<b:if> は「HTML編集画面」でしか動作しません。レイアウト画面のガジェット内に直接書いても無効です。

セクションを追加

1. テンプレート編集画面を開く

Blogger の管理画面で「テーマ」 → 「HTMLを編集」 を選択します。

2.<main>  内にセクションを作る

トップページ専用のコンテンツは、記事エリア（通常 <main> タグ内） に配置します。

<b:if cond='data:blog.url == data:blog.homepageUrl'>
  <b:section class='topspace' id='TOPPAGE' showaddelement='yes'>
    <!-- ここに後でガジェットを追加できます -->
  </b:section>
</b:if>
  

テンプレートによってメインコンテンツのタグが異なるので注意 / 画像 : F-light

• <b:if> でトップページのみ表示する条件を指定
• id='TOPPAGE' は仮のものですが、わかりやすい名前にすると便利
• showaddelement='yes' があることで、レイアウト画面からガジェットを追加可能

3. テンプレートを保存

コードを追加したら 「保存」 をクリックします。

4. レイアウト画面でセクションを確認

「レイアウト」 に移動すると、作成したセクションが表示されます。ここから HTMLガジェットを追加 して、自由にコンテンツを作ることができます。

5.トップページ専用コンテンツの完成

セクション内にガジェットを追加したら、トップページのみ表示されるカスタムエリアの完成です。

トップページの「記事一覧あり / なし」パターン

トップページに記事一覧ありバージョン

• 特に追加作業は不要
• 記事一覧セクションはそのまま表示されるので、トップページにも記事一覧が出ます
• 記事一覧の上や下にガジェットとして追加可能

トップページに記事一覧なしバージョン

記事一覧セクションには トップページ以外 の条件式を付ける

<b:if cond='data:blog.pageType != "index"'>
  <b:section id='MAIN' showaddelement='yes'>
    <!-- 記事一覧ウィジェットなど -->
  </b:section>
</b:if>
  

これでトップページには記事一覧は表示されません

ただ、記事一覧へ行くためのリンクがどこにもなくなってしまうため、記事一覧の導線を確保する必要があり、記事一覧へのURLも同時に必要となります。

このURLは実装しているページネーション等によっても異なるので事前に確認が必要です。https://performancedoll.com/ で参照しているURLは

https://www.performancedoll.com/search?max-results=12#Page-1
  

参照するURLがわからないという方は、HTMLガジェットに下のコードを貼り付けてみてください。

<a id="list-page-btn" class="top-page-btn">記事一覧を見る</a>

<script type="text/javascript">
  // 記事一覧ページURLを自動取得してボタンにセット
  document.addEventListener("DOMContentLoaded", function() {
    var btn = document.getElementById("list-page-btn");
    if(btn) {
      var blogUrl = window.location.origin + "/";
      btn.href = blogUrl + "search?max-results=12";
    }
  });
</script>
  

うまく設置できればボタンが表示されているはずです。ボタンをクリックして記事一覧が出ていれば成功です。1ページあたりの記事数を12件と定義していますので、ズレが生じている場合には "search?max-results=12" の数字を1ページの表示件数に書き換えて調整してください。

完成サンプルデモ

CATCH!!｜東京パフォーマンスドール ファンサイト

90年代に活動していたダンスポップエンターテインメント集団『東京パフォーマンスドール』が残した軌跡。

www.performancedoll.com

まとめ

Bloggerでトップページをホームページ化する目的は、WordPressでいう固定ページをホームに設定する感覚に近く、最初は何もない状態のトップページに必要なコンテンツだけを配置することです。そのためにHTML編集画面で専用のセクションやガジェットを設置する手順を踏みます。

手順としては、まずトップページ専用のセクションを「メイン」内に作成し、その中にHTMLガジェットを追加することで、レイアウト画面から管理可能な状態にします。トップページ専用のコンテンツを表示するには <b:if> 条件式を使用しますが、ガジェット単位で条件式を使うにはHTMLで直接作成する必要があります。ガジェット内の編集画面では条件式は使えません。

記事一覧をトップページに載せない場合は、訪問者が記事一覧ページにアクセスできるよう、リンクなどの導線を用意する必要があります。ボタンでもリンクテキストでも構いません。ポイントは「訪問者が迷わず記事一覧に辿り着ける経路を確保する」ことです。

注意点としては、トップページ専用セクションは必ず「メイン」内に置くことが重要で、ここを間違えるとレイアウト画面でドラッグできなかったり、意図した表示にならない場合があります。

総じて、この方法は最低限の手順を押さえれば十分で、あとは閲覧者の目的や好みに応じて自由にコンテンツを作り込むことができます。テンプレート編集だから特別に自由度が高いわけではなく、あくまで「トップページ専用の構造を作るための手段」であることを理解しておくとよいでしょう。