JavaScriptで投稿日の見せ方を変える

JavaScriptを使用して、日めくりカレンダー風に投稿日を表示させてみた。


参考になればと手順を以下に。

テンプレートの編集は自己責任でお願いします。

1.投稿日を表示する場所にJavaScriptコードを挿入する

『data:post.dateHeader』で投稿日を取得する。
記事のタイトル左横に表示することとし、以下の場所に挿入することとした。
『<h3 class='post-title entry-title'>』の下に以下のコードを挿入する。

<div id='post_dh'>
<script>
    show_postdate('<data:post.dateHeader/>');
</script>
</div>

投稿日を引数に「show_postdate」を実行。ここに必要なタグを出力することになる。

2.実際に処理を行うJavaScriptコード

取得した日付から「年」、「月」、「日」をJavaScriptを使用して抜き出す。

• 年 = getFullYear()
• 月 = getMonth()
• 日 = getDate()

「月」を英語短縮表記にする。


実際のJavaScriptコードは以下の通り。

function show_postdate(pdate){ 
var month = new Array(12); 
month[0] = "Jan"; 
month[1] = "Feb"; 
month[2] = "Mar"; 
month[3] = "Apr"; 
month[4] = "May"; 
month[5] = "Jun"; 
month[6] = "Jul"; 
month[7] = "Aug"; 
month[8] = "Sep"; 
month[9] = "Oct"; 
month[10] = "Nov"; 
month[11] = "Dec"; 

var posDate = new Date(pdate);

py = "<div class='dhy'>" + posDate.getFullYear() + "</div>"; 
pd = "<div class='dhd'>" + posDate.getDate() + "</div>"; 
pm = "<div class='dhm'>" + month[posDate.getMonth()] + "</div>"; 

document.write(py+pd+pm); 
}

このコードをTemplateの適当なところに追加します。

3.CSSで見た目を調整

以下は見本程度に。

#post_dh { 
  padding: 1px; 
  margin: 0px; 
  float: left; 
  display: block;  
  width: 36px; 
  text-align: center; 
  color: #777; 
  border-right: 1px solid silver; 
  border-bottom: 1px solid silver; 
  background: #eee; 
}

.dhy { 
  font-size: .7em; 
  line-height: 1.2em; 
  font-weight: normal; 
  color:#fff; 
  background: #666; 
  display: block; 
}

.dhd{ 
  font-size: 1.1em; 
  line-height: 1.1em; 
  font-weight: bold; 
  display: block; 
  color: #666; 
}

.dhm {
  font-size: .7em;
  line-height: 1.2em;
  font-weight: bold;
  display: block;
  background: #999;
  color: #fff;
}

4.投稿日の表示設定を変更

[レイアウト] - [ページ要素] - [ブログの投稿]の編集をクリック

下記のチェックボックスにチェックを入れる。日付フォーマットは以下の通り「yyyy/mm/dd」形式に変更する。



上で投稿日を表示する設定に変更したが、実際に表示する必要はないので、テンプレートの以下のタグを探してコメントアウトする。

<!-- ********************************************* 
<b:if cond='data:post.dateHeader'> 
<h2 class='date-header'><data:post.dateHeader/></h2> 
</b:if> 
**********************************************-->