特定の内容をトップページにだけ表示したい

Bloggerは基本的にブログ用のCMSなので、トップページのメインカラムにはブログ記事のリストが表示されるだけです。ブログとしてのみ使用する場合には、当然これで何の問題もありません。しかし、単なるブログとしてでなく、もう少し本格的なサイトにしたいという場合には、トップページに、サイトのコンセプトや構成についての説明を掲載したいところです。そして、その場合、その内容はトップページにだけ表示されればよいので、個別のブログ記事ページには表示されないようにする必要があります。


今回は、Bloggerのカスタマイズでこれを実現する方法を、僕の転送・テスト用サイトを実験台にして説明します。


トップページにガジェットを追加

Bloggerのデフォルトでは、トップページのメイン部分には記事リストしか表示されませんので、まずはレイアウト機能を使って、「メイン」ブロックの「ブログの投稿」の上の部分にサイト説明用の「HTML/Javascript」ガジェットを追加します。追加できたら、そのガジェットを編集して、トップページに表示させたい内容を記述します。



変更内容を保存して実際のページを表示させると、下のようになります。


ブログ記事リストの上に、サイトについての説明文が表示されました。

しかし、このままでは、トップページ以外のすべてのページにも同じ内容が表示されてしまい、個別のブログ記事ページも下のようになります。


トップページ以外でこの説明文を表示させないようにするためには、テンプレートのHTMLを編集する必要があります。


トップページでだけ表示させるためのテンプレート編集

では、テンプレートを編集していきます。

まず、「テーマ」の画面を開き、「カスタマイズ」の右にある▽ボタンをクリックし、表示されたメニューから「HTMLを編集」を選択します。


HTML編集画面が開きますので、さきほど追加したガジェットの部分を探してください。文言で検索をかければ見つかるでしょう（今回の例でいえば「移転しました」など）。

見つかったら、

<b:includable id='main'>
の後ろに
<b:if cond='data:blog.url == data:blog.homepageUrl'>
を追加し、

さらに
</b:includable>
の前に
</b:if>
を追加します。

つまり、
<b:includable id='main'>
・・・・・・
</b:includable>
という部分を

<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
・・・・・・
</b:if>
</b:includable>
に変更するわけです。



これによって、<b:if cond='data:blog.url == data:blog.homepageUrl'>と</b:if>に挟まれた部分に記述された処理が、トップページでのみ行われるようになります。変更を保存して、実際のサイトを確認してみると、上で追加したサイト説明文はトップページでだけ表示され、個別ブログ記事ページでは表示されなくなっています。　



これで、今回のカスタマイズは完了です。意外と簡単でしたね。


ifタグをいじれば様々な応用が可能

今回は「トップページにだけ表示させる」というカスタマイズでしたが、テンプレートのHTMLに追加したifタグの内容を変えれば、様々なパターンに応用できます。


たとえば、「トップページにだけ表示させない」と言う場合は、

<b:if cond='data:blog.url != data:blog.homepageUrl'>

とします。


「個別ブログ記事ページにだけ表示させる」という場合は、

<b:if cond='data:blog.pageType == "item"'>

になります。


また、「固定ページにだけ表示させる」という場合は、

<b:if cond='data:blog.pageType == "static_page"'>

となります。


さらに、次のようにURLを記述すれば、指定したURLのページにだけ表示させることもできます。

<b:if cond='data:blog.url == "https://～～～～～"'>


今回のカスタマイズや、固定ページの機能などをうまく使えば、Bloggerで本格的なサイトも手軽に作ることができます。無料でここまでできて、広告もなく、カスタムドメインも使えてSSL認証も簡単なので、これから新しくサイトを作りたい人には、Blogger一択だと思います。


関連記事