Customize Blogger Template vol.3

Google-Bing Brand Reversioning
photo credit: imjustcreative via photopin cc


記事を投稿した時の日付を表示する


今回のカスタマイズでこれが一番ハマりました。通常は、以下のタグを使用すると、日付を表示することができます。

<data:post.dateHeader/>



しかし、なぜか表示されないと思ったら、レイアウトのブログの投稿より日付にチェックを入れなければならないのです。







同じ日付でも繰り返し表示する


デフォルトでは、上で使用するタグは、同日日付を繰り返し保存しないため、同日日付で投稿した記事には、いくつか日付を表示できないものが存在してしまいます。


これは、レイアウトを考える際に、一括してデザインを処理できない要素になってしまうため、これを回避する方法を紹介します。

<div class='datebox'>
<script type='text/javascript'>
var timestamp = &quot;<data:post.dateHeader/>&quot;;
</script>
<span class='date'><script type='text/javascript'>document.write(timestamp);</script></span>
</div>



記事タイトルの下に日付を表示する




ハイライトされている行を検索でもしてその後に、日付を表示するタグを入れてください。ちなみに、 ラベルを表示する関連のタグはこの記事とは無関係なので無視してください。


    <div class='post-header'>
<div class='post-header-line-1'/>

<!-- ###ラベルを表示する### -->
<div class='label-size'>
<span class='post-labels'>

<!-- ###日付を表示する### -->
<div class='datebox'>
<script type='text/javascript'>
var timestamp = &quot;<data:post.dateHeader/>&quot;;
</script>
<span class='date'><script type='text/javascript'>document.write(timestamp);</script></span>
</div>
<!-- ###日付を表示する### -->

<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'>
<data:label.name/></a>
</b:loop></b:if></span></div>
</div>
<!-- ###ラベルを表示する### -->



span.date {
float: right;
color: #ffffff;
margin: 2px;
padding: 2px 7px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ff1f88', endColorstr = '#ff298e');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ff1f88', endColorstr = '#ff298e')";
background-image: -moz-linear-gradient(top, #ff1f88, #ff298e);
background-image: -ms-linear-gradient(top, #ff1f88, #ff298e);
background-image: -o-linear-gradient(top, #ff1f88, #ff298e);
background-image: -webkit-gradient(linear, center top, center bottom, from(#ff1f88), to(#ff298e));
background-image: -webkit-linear-gradient(top, #ff1f88, #ff298e);
background-image: linear-gradient(top, #ff1f88, #ff298e);
}


コンテツンを右側に表示するには、 float: right;を使用します。左側に表示したい場合は、デフォルトの設定にもよりますが、ほとんどの場合、この記述を削除することで対応できると思います。

ちなみに、表示形式を変更したい場合は、Bloggerの管理画面より設定 > 言語と形式 > フォーマットから変更可能です。