Bloggerテンプレート自作 #17:固定ページを作る
前回の「自動目次機能を追加する」に引き続き、今回は「固定ページを作る」を実践してみようと思う。
といっても、ほぼ個別記事ページの転用なので大した作業はない(一応まとめておく程度)。
作業工程
HTML
<!-- ページタイプの条件分岐 -->
<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>
<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は共通部分の設定を引っ張って来ているので、特別に用意する必要はない。
スポンサーリンク
スポンサーリンク
コメント
0 件のコメント :
コメントを投稿