Blogger TIPS: Bloggerでトップページをホームページ風にする方法を解説

01― 条件分岐方式とリダイレクト方式の比較 ―

Bloggerには、WordPressのような「ホームページを固定ページに設定する」機能はありません。

しかし、条件分岐を使えば、トップページだけに専用コンテンツを表示し、それ以外のページでは通常の記事一覧を表示する構成を作ることができます。

トップページをホームページ風にする方法は大きく2つあります。

固定ページへリダイレクトする方法
条件分岐で構造を切り替える方法

検索すると多く見かけるのはリダイレクト方式です。例えば、P-LIFE.net｜Bloggerでホームページ風のサイトを作ってみました-作り方を解説します- でも紹介されています。

ただし、この二つは見た目は似ていても、仕組みはまったく異なります。まずはそれぞれの特徴を整理します。

リダイレクト方式

実装が簡単
HTML編集の負担が少ない
初心者向き

JavaScript依存になることが多い
転送分だけ表示が遅れる可能性
構造としては別ページをホームにしている

条件分岐方式

トップページだけ表示内容を変更し、記事一覧はトップ以外のページで表示させる方法です。

少し編集が必要ですが、構造として自然な作りになります。

URL構造が自然
リダイレクト不要
JavaScript依存なし
SEO的に安定しやすい
長期運用向き

テーマHTMLの編集が必要
初心者にはやや難しい

項目	条件分岐方式	リダイレクト方式
実装難易度	やや高い	低い
表示速度	速い	やや遅い
SEO安定性	高い	普通
構造の自然さ	自然	疑似的
長期運用	向いている	簡易運用向き

条件分岐方式のサンプルDEMO

こちらのサイトで実際の表示が確認できます。

リダイレクト? 条件分岐? どちらを選ぶべきか

とにかく簡単にやりたい → リダイレクト方式

サイト設計をきちんと組みたい → 条件分岐方式

どちらが正解という話ではありません。
サイトの目的と運営方針に合わせて選べば問題ありません。

この記事では、構造から組み立てる「条件分岐方式」を採用する前提で解説していきます。

02実行前に必ずやること

テーマを編集する前に、必ずバックアップを取ってください。

手順：

テーマ

「︙」メニュー
バックアップ
ダウンロード

これをしておけば、万が一崩れても元に戻せます。テーマ編集は自己責任です。

まつさん
バックアップは最重要事項!! なんど泣かされたことか 😭

万が一レイアウトが崩れても、すぐ元に戻せます。

03手順1 : トップ専用ウィジェットを追加する

まずBlogウィジェットを探します。テーマ →「HTMLを編集」Ctrl + F で Blog1 を検索します。

次のような記述が見つかると思います。

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>

これが記事一覧を出力しているウィジェットです。

追加する位置

多くのテーマではこのような構造です。


<b:section class='main' id='main' showaddelement='no'>

  <!-- ここに追加する -->

 <b:widget id='Blog1' ...>

つまり、
Blog1 の直前に追加します。

追加するコード


<b:widget id='HTML8' locked='false' title='トップページ専用' type='HTML' version='1'>
  <b:widget-settings>
    <b:widget-setting name='content'/>
  </b:widget-settings>
  <b:includable id='main'>
    <b:if cond='data:blog.pageType == "index"'>
      <b:if cond='data:blog.url == data:blog.homepageUrl'>
        <div class='widget-content'>
          ここに内容
        </div>
      </b:if>
    </b:if>
    <b:include name='quickedit'/>
  </b:includable>
</b:widget>

条件式の解説


<b:if cond='data:blog.pageType == "index"'>
  <b:if cond='data:blog.url == data:blog.homepageUrl'>

やっていることは次の通りです。

pageType == "index"
→ 一覧ページかどうかを判定

url == homepageUrl
→ トップページかどうかを判定

つまり、
「一覧ページの中でもトップページだけ表示する」という意味になります。

💡 なぜこれが必要なのか？

この条件式を記述しない場合、意図しないページ（下記参照）にも要素が表示されてしまいます。

ラベル一覧
ページ送り（2P目以降）
検索結果ページ

04手順2 : 記事一覧をトップ以外で表示させる

トップページに記事一覧を表示したくない場合は、Blogウィジェットの中身を以下のように変更します。


<b:includable id='main' var='top'>
  <b:if cond='data:blog.url != data:blog.homepageUrl'>
    （元の投稿ループコード）
  </b:if>
</b:includable>

これで、

トップ → ホーム専用コンテンツのみ
それ以外 → 記事一覧表示

になります。

※ 記事一覧もホームに表示したい場合

なお、記事一覧をホームページ上に表示させたい場合は、今回追加したガジェットの下に自動で表示されるため、この作業は不要です。

つまり、

トップに専用コンテンツ
その下に通常の記事一覧

という構成にするなら、Blogウィジェットの編集はしなくて問題ありません。

05手順2 : 記事一覧へのボタンを自動生成する方法

トップページから記事一覧への導線を作る場合、/search を直接書いてもよいですが、URLを自動取得する方法もあります。

以下のコードをトップ専用ウィジェット内に追加してください。


<a id="postListBtn" class="home-btn">記事一覧を見る</a>

<script>
document.addEventListener("DOMContentLoaded", function() {
  var blogUrl = document.querySelector("link[rel='alternate'][type='application/atom+xml']");
  if (blogUrl) {
    var href = blogUrl.href.split("/feeds")[0] + "/search";
    document.getElementById("postListBtn").setAttribute("href", href);
  }
});
</script>

このスクリプトは、ブログのURLを自動取得 → /search を付与 → ボタンにリンクを設定という処理を行います。

これなら、将来ドメインを変更しても対応できます。

💡 なぜJSで自動取得するのか？

URL手動入力不要
ドメイン変更に自動対応
https/wwwの差異を吸収
コピペで即運用可能

まとめ

トップページをホームページ風にする方法は2つあります。

手軽にやるならリダイレクト方式

構造をきちんと組むなら条件分岐方式

初心者にとっての最大の難所は、

挿入位置の理解

条件式の意味

この2つです。

そこさえ理解できれば、実装は決して難しくありません。

Blogger TIPS

Pages

2026/02/25

Bloggerでトップページをホームページ風にする方法を解説