情報科学屋さんを目指す人のメモ(FC2ブログ版)

何かのやり方や、問題の解決方法をどんどんメモするブログ。そんな大学院生の活動「キャッシュ」に誰かがヒットしてくれることを祈って。

ブログ内検索

スポンサーサイト このエントリーを含むはてなブックマーク

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

スポンサー広告 | 編集
このエントリーをはてなブックマークに追加 Clip to Evernote

ブログ記事の新しさ・古さに応じて表示内容を変更する方法 このエントリーを含むはてなブックマーク

FC2ブログのテンプレートを変更することで、一ヶ月以上前の記事と一ヶ月より最近の記事とで別の処理(JavaScript)を実行する方法をメモ。ポイントは、記事の日時をJavaScriptで把握する方法です。

記事の日時をJavaScriptで読み込む

FC2テンプレートでは、

<!--topentry-->
(・・・)
<!--/topentry-->

で囲まれた部分で、記事の投稿日時に関する以下の変数を利用可能です。

年:<%topentry_year>
月:<%topentry_month>
日:<%topentry_day>
時:<%topentry_hour>
分:<%topentry_minute>
秒:<%topentry_second>

これをJavaScriptにおける「Date」オブジェクトに変換するためには次のようにします。

var date = new Date(<%topentry_year>, <%topentry_month> - 1, <%topentry_day>, <%topentry_hour>, <%topentry_minute>, <%topentry_second>);

これにより、変数部分に記事の投稿日時が埋め込まれ、JavaScriptの実行時にはdate変数に投稿日時を表すDateオブジェクトが代入されます。これを利用することで、たとえば次のようにして一ヶ月以上前の記事と一ヶ月以内の記事で別の内容を表示することが可能になります。

一ヶ月以上前と一ヶ月以内の記事で別の内容を表示する

たとえば、とある部分に「これは一ヶ月以上前の記事です」と表示することが出来るようになります。

これは、ブログテンプレートの<!--topentry--><!--/topentry-->の内側に次のように書くことで実現できます。

<div id="target"></div>
<script type="text/javascript"><!--
var now = new Date();
var date = new Date(<%topentry_year>, <%topentry_month> - 1, <%topentry_day>, <%topentry_hour>, <%topentry_minute>, <%topentry_second>);
var oneMonthAfter = new Date(date.getTime() + 30 * 24 * 60 * 60 * 1000);
if(oneMonthAfter.getTime() < now.getTime()) {
  // 一ヶ月以上前の記事の場合の処理
  document.getElementById("target").innerHTML="これは一ヶ月以上前の記事です";
} else {
  // 一ヶ月以内の記事の場合の処理
  
}
//-->
</script>

まとめ

FC2テンプレートで利用できる変数一覧を見て、なにか出来ないか考えてみると良いかもしれません。

ブログ | コメント:0 | トラックバック:0 | 編集
このエントリーをはてなブックマークに追加 Clip to Evernote

この記事のコメント

コメントの投稿 エントリの新旧に関わらず、極力18時間中に返信します。














この記事のトラックバック

トラックバックURL:
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。