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

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

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

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

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

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

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

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

リダイレクト方式

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

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

条件分岐方式

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

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

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

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

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

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

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

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

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

www.performancedoll.com

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

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

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

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

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

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つです。

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