Bloggerのトップページをカスタマイズする方法

ブログ運営 #Blogger #カスタマイズ

今回は、Blogger のトップページをカスタマイズする方法を紹介します。

たとえば、トップページにのみお知らせを入れたい、新着記事一覧は非表示にして別のリンクを置きたい、などの場合に活用できると思います。

この記事ではテンプレート QooQ と JetTheme を例にカスタマイズ方法を紹介します。カスタマイズを行う際はバックアップを取ってからテンプレートを編集してください。

（参考）特定のラベルの記事にのみコンテンツを表示したい場合は以下の記事をご参照ください。

【Blogger】特定ラベルの記事にのみ、特定のコンテンツを表示する（独自タグ利用）

トップページにのみコンテンツを表示する

トップページのトップに次のようなお知らせを表示する方法を紹介します。
表示内容の HTML・CSS は適宜修正ください。

<div class='information'>
お知らせ<br/>
８月13日〜15日は夏季休暇となります。
</div>
<style>
.information{border:1px solid;margin:20px;padding:20px;text-align:center}
</style>

QooQ の場合

テンプレートで以下を検索します。

<b:includable id='main' var='top'>

その下に、次のようにコードを追加して保存します。

<b:includable id='main' var='top'>
<b:if cond='data:view.isHomepage'>
<!-- お知らせコンテンツ ここから -->
<div class='information'>
お知らせ<br/>
８月13日〜15日は夏季休暇となります。
</div>
<style>
.information{border:1px solid;margin:20px;padding:20px;text-align:center}
</style>
<!-- お知らせコンテンツ ここまで -->
</b:if>

JetTheme の場合

JetTheme の場合、デフォルトで注目の投稿がトップに表示されています。この注目の投稿の上（または下）にお知らせを表示する方法を紹介します。

テンプレートで以下を検索します。複数箇所ありますが、１つ目のもの（すぐ下に<b:include name='JetFeaturedPost'/>の記述がある箇所）を見つけてください。

<b:includable id='main' var='this'>

その下に、次のようにコードを追加して保存します。

<b:includable id='main' var='this'>
<b:if cond='data:view.isHomepage'>
<!-- お知らせコンテンツ ここから -->
<div class='information'>
お知らせ<br/>
８月13日〜15日は夏季休暇となります。
</div>
<style>
.information{border:1px solid;margin:20px;padding:20px;text-align:center}
</style>
<!-- お知らせコンテンツ ここまで -->
</b:if>
<b:include name='JetFeaturedPost'/>
</b:includable>

注目の投稿の下にお知らせを表示したい場合は<b:include name='JetFeaturedPost'/>の下に追加コードを記述してください。

トップページ以外のページにも応用したい場合

上記で紹介したコードのうち、<b:if cond='data:view.isHomepage'>の部分が「トップページにのみ表示する」ことを指示する条件文のコードになっています。

この条件文を変えることで、投稿ページのみ、固定ページのみ、特定ページのみ、など表示ページをカスタマイズすることができます。

ページごとの条件文の書き方については、以下サイトに詳しくまとめられています。

Bloggerテンプレートの各ページ毎の条件式 | バグ取りの日々

新着記事一覧を非表示にし、別のコンテンツを表示する

たいていのテンプレートではトップページには新着記事一覧が表示されるようになっていると思いますが、この新着記事一覧を非表示にして別のコンテンツを表示する方法を紹介します。

記事一覧の代わりにカテゴリー別のリンクやおすすめ記事のリンクを表示するなど、サイト型のトップページにしたい場合に参考にしていただければと思います。

表示するコンテンツは HTML で入力する必要があります。
HTML での記述が難しい場合は、投稿画面から「作成モード」で一旦表示内容を作成し、その後「HTML モード」に切り替えて HTML を取り出すと良いと思います。ただ、このとき HTML に不要な記述が入るケースがあるので、不要な記述は削除した上でテンプレートに移してください。

QooQ の場合

テンプレートで以下を検索します。

<div id='list'>

その前後に、次のように赤字のコードを追加し、トップページに表示したい内容（HTML）を入力して保存します。

      <b:if cond='data:view.isHomepage'>
        <!-- トップページに表示したい内容 ここから -->

        <!-- トップページに表示したい内容 ここまで -->
      <b:else/>
        <div id='list'>
          <b:loop values='data:posts' var='post'>
            <b:include data='post' name='post'/>
         </b:loop>
        </div>
        <b:include name='nextprev'/>
      </b:if>          
      </b:if>          
    </b:includable>

※ QooQ の場合、上記の修正だけだとトップページにパンくずリストが表示されたままとなります。このパンくずリストを非表示にした場合に検索結果への影響がどの程度あるのか不明なため、ここではパンくずリストに触れていません。必要に応じて対処をお願いします。

JetTheme の場合

テンプレートで以下を検索します。

<b:includable id='JetBlog'>

次のように赤字のコードを追加し、トップページに表示したい内容（HTML）を入力して保存します。

    <b:includable id='JetBlog'>
    <b:with value='(data:widgets where (w =&gt; w.type == data:widget.type and w.id == data:widget.instanceId )).first' var='jwidget'>
      <b:if cond='data:view.isError OR data:numPosts == 0'>
        <b:include name='JetBreadcrumbs'/>
        <b:include name='Jet404'/>
        <b:elseif cond='data:view.isHomepage'/>
        <!-- トップページに表示したい内容 ここから -->

        <!-- トップページに表示したい内容 ここまで -->
        <b:elseif cond='data:view.isMultipleItems'/>
        <b:include name='JetBreadcrumbs'/>

トップページにのみコンテンツを表示する

QooQ の場合

JetTheme の場合

トップページ以外のページにも応用したい場合

新着記事一覧を非表示にし、別のコンテンツを表示する

QooQ の場合

JetTheme の場合

新着記事一覧のリンク