Blogger:投稿のフッターを投稿ページのみ表示するようにする

イントロダクション

Google のブログサービス「Blogger」では、テンプレートの HTML を編集することで、ブログを様々な形へカスタマイズすることが可能になります。

今回は、投稿の下部に表示されているフッター部分を、投稿ページのみ表示するようにしてみましょう。

Blogger:投稿のフッターを投稿ページのみ表示するようにする

このブログでは、1 年くらい前に投稿のフッターをトップページでは、非表示にしていました。

Bloggerトップページ改造計画>>更なる快適さと情報の見やすさを求めて... - Dr.ウーパのコンピュータ備忘録

各投稿記事のフッターをトップページでは非表示
http://upa-pc.blogspot.jp/2014/05/bloggerreform.html

Blogger : 投稿のフッター
コメント数、各種SNSの拡散ボタン、ラベルなどが表示されている

その後、いろいろとブログを改良した結果、投稿ページでのみ、投稿のフッターを表示するようにしました。

テンプレートの修正

※ Blogger のテンプレートの修正には、ブログが正常に表示できなくなるような危険性があります。以下のページを参考にしたのちに、作業を行ってください。

Blogger:BloggerのテンプレートのHTMLを編集するときに気を付けること
http://upa-pc.blogspot.com/2015/03/blogger-template-edit-attention.html

Blogger の設定のテンプレートの、テンプレートのHTMLの編集にて、投稿のフッターを示すタグである、以下のキーワードでテンプレート内を検索します。

<div class='post-footer'>

すると、テンプレート内で 2 箇所ヒットする箇所があります。
何故 2 箇所にヒットするのかというと、通常の表示と、モバイル表示とで、別々に投稿のフッターを実現するためのコードが記載されています。

ヒットした個所の上位の要素を見てみると、次の表示があります。

<b:includable id='mobile-post' var='post'>
→ モバイル表示の場合

<b:includable id='post' var='post'>
→ 通常の表示の場合

モバイル表示をカスタマイズできる設定にしている場合でかつ、モバイル表示の投稿のフッターを、投稿ページにのみ表示したい場合には、モバイル表示の方も同じように以下の修正を行う必要があります。

フッターを投稿ページにのみ表示する場合には、フッターを記載している部分（<div class='post-footer'>～省略～</div>）を、次のように修正します。

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

<div class='post-footer'>
～省略～
</div>

</b:if>
<b:if cond='0!=0'></b:if>

赤字の部分が追加した部分です。
なお、<b:if cond='0!=0'>～</b:if>の部分は表示とは関係のない、ただのコメントです。

Blogger : テンプレートの HTML
投稿のフッターを投稿ページにのみ表示する修正を実施

このように、Blogger のテンプレートタグである、b:if を使用すると、指定した条件に合致した場合のみ、その中の要素を表示する(Bloggerサーバから、クライアントのブラウザへHTMLソースコードを配信する)ことができます。

今回は、data:blog.pageType == "item"の条件が成立した場合（表示するページのタイプが、投稿ページの場合）のみ、投稿のフッターを表示するようにしました。

これで、テンプレートを保存すると、投稿ページにのみ、投稿のフッターが表示されるようになっています。
（※必ずプレビューを行い、正常に表示できることを確認してから保存してください。）

注意

この修正を行うと、投稿ページ以外では、投稿のフッターが表示されなくなります。

複数のブログ記事がまとめて表示されるページ（トップページや、ラベルページなど）だけではなく、”ページ”のページでも表示されなくなります。

”ページ”のページでも表示されるようにするのは、工夫が必要になります。

まとめ

今回は、Blogger のテンプレートを編集して、投稿のフッターを投稿ページのみ表示するようにすることができました。

Bloggerユーザ必見！テンプレートのHTMLを編集するときに参考になる公式ページリスト - Dr.ウーパのコンピュータ備忘録
http://upa-pc.blogspot.jp/2014/06/blogger-html-edit-ref.html

Bloggerユーザなら知っておきたい、BloggerブログのURL構成まとめ - Dr.ウーパのコンピュータ備忘録

http://upa-pc.blogspot.jp/2015/02/blogger-url-summary.html

このブログ内の Blogger 記事を検索！

Dr.ウーパのコンピュータ備忘録

2015年3月11日水曜日