日々のコンピュータ情報の集積と整理

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

2015年3月11日水曜日

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

イントロダクション

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


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


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

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

Bloggerトップページ改造計画>>更なる快適さと情報の見やすさを求めて... - Dr.ウーパのコンピュータ備忘録
各投稿記事のフッターをトップページでは非表示
http://upa-pc.blogspot.jp/2014/05/bloggerreform.html

Blogger : 投稿のフッター コメント数、各種SNSの拡散ボタン、ラベルなどが表示されている
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 == &quot;item&quot;'>

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

</b:if>
<b:if cond='0!=0'><!-- 投稿のフッターは投稿ページにのみ表示 ここまで --></b:if>

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

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


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

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


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


注意

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

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

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


まとめ

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


関連記事

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

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








関連記事

関連記事を読み込み中...

同じラベルの記事を読み込み中...
Related Posts Plugin for WordPress, Blogger...