Bloggerテンプレート自作 #17:固定ページを作る

前回の「自動目次機能を追加する」に引き続き、今回は「固定ページを作る」を実践してみようと思う。

といっても、ほぼ個別記事ページの転用なので大した作業はない(一応まとめておく程度)。


作業工程


HTML


Bloggerテンプレート自作 #17:固定ページを作る

<!-- ページタイプの条件分岐 -->
<b:switch var='data:blog.pageType'>
  <!-- 個別記事の時 -->
  <b:case value="item" />
  <b:loop var='post' values='data:posts'>
    <b:include name='single-post' />
  </b:loop>
  <!-- 固定ページの時 -->
  <b:case value="static_page" />
  <b:loop var='post' values='data:posts'>
    <b:include name='static' />
  </b:loop>
  <!-- それ以外 -->
  <b:default />
  <b:loop var='post' values='data:posts'>
    <b:include name='articles' />
  </b:loop>
  <b:include name='articles-pager' />
</b:switch>
</b:includable>

<!-- 固定ページ -->
<b:includable id='static'>
  <div class="post-area">
    <h1>
      <data:post.title />
    </h1>
    <div class="post-content">
      <data:post.body />
      <!-- 記事下アドセンス -->
      <div class="ad2">
        <!-- アドセンスコードを記入 -->
      </div>
    </div>
  </div>
  <!-- コメントを読み込む -->
  <b:include name='post-comments' />
</b:includable>

上記のように固定ページ用のHTMLを作り、メインページの条件分岐に組み込めばOK。

固定ページはラベルが付けられないので、シンプルにタイトルと記事内容のみにした。ついでに記事下アドセンス欄を追加して、アドセンス対応にしてある。あとデフォルトでコメントの有無が選べるので、一応コメントも読み込んでおいた。

CSSは共通部分の設定を引っ張って来ているので、特別に用意する必要はない。