seesaaの日付を英語表記にカスタマイズ

Mon 27 July 2015
20150727

Photo:Calender By:i_yudai

Photo:Calender By i_yudai

どうも。もういくつ寝ると熱闘甲子園 らいぱちです。

見た目のデザインをがらっと変えることのできる日付表示。
seesaaブログでもHTMLをちょこっと修正すればできるみたいなので
トライしてみます。

スポンサード リンク









日付表示は漢字以外もできる


きょうの日付は何月何日でしょうか?

このサイトのseesaaブログテーマではデフォルトの表示は、
「◯年◯月○日」みたいに漢字表示になっていました。

まあ、わかりやすくてよいのですが、
HTMLをちょっといじるれば
「2015/07/26」って数字だけだったり、「Mon 2015 07 26」みたいに順序を入れ替えてみたり、はたまた「07-2015-Mon-26」とかグチャグチャにしてみたり…
と日付表示も変更することができるので、
ブログのデザインにあった表示方法に変更していきたいと思います。

strftime表示法


strftime-ロケールの設定に基づいてローカルな日付・時間をフォーマットする



seesaaブログの日付表示はstrftimeという関数(?)に基づいているようです。
(この辺難しくてわかりませんでした。すみません。)

が、strftimeで決められているルール通りにHTMLを変更することによって
日付表示の方法を変えることができます。

代表的な日付表記法


strftimeでどのようにHTMLのコードを書けばよいか、代表的なものを挙げてみます。

書式内容
%Y/%m/%d/年/月/日 と表示2015/07/26
%x月/日/年(下2桁) と表示07/26/15
%a Y/%m/%d曜日(省略名) 年/月/日 と表示Mon 2005/07/26
%A Y/%m/%d曜日(省略なし) 年/月/日 と表示Monday 2005/07/26
%Y/%b/%d年/月(英語・省略名)/日 と表示2015/Mar/26
%Y/%B/%d年/月(英語・省略なし)/日 と表示2015/March/26
%F年-月-日 と表示2015-07-26
%y/%m/%d年(下2桁)/月/日 と表示15/07/26


%Yや%mなどがひとつの要素になっていて、それらの組み合わせで表示することが可能です。
なので、それら要素の順番を入れ替えるだけで、日付の表示方法を変更することができます。
また、それぞれの要素の間に「-」(ハイフン)や「/」(スラッシュ)を入れることで、西暦と月日の間が「-」や「/」で区切られた表示になります。

コンテンツHTMLを変更する


seesaaブログの「デザイン」>「コンテンツ」>「記事」をクリックし、「コンテンツHTML編集」画面からHTMLの変更を行っていきましょう。

ずらっと並ぶHTMLソースコードですが探すべき場所は日付を設置しているコードを探します。
<% if:with_date %><h2 class="date"><% article.createstamp | date_format("%Y年%m月%d日") %></h2<<% /if %>


<div class="blog">の中にあることが多いでしょうか。
(日付の見出しタグを<h2>から≶div>に変更してSEO対策を施す方法もありますが、とりあえずデフォルトのソースコードでの説明です。)

この日付を設定しているコードの「date_format("%〜")」となっている「%〜」部分を、先ほどのstrftimeで決められたルールで書き換えてしまえばよいのです。

たとえば
<% if:with_date %><h2 class="date"><% article.createstamp | date_format("%Y年%m月%d日") %>⁢/h2><% /if %>

を、
<% if:with_date %><h2 class="date"><% article.createstamp | date_format("%x") %>⁢/h2><% /if %>

に変更すると、日付の表示は「2015年7月26日」から「07/26/15」と表示されます。

ちなみに日付を表示させたくない場合は…


ブログの更新頻度が少なかったりすると、日付を表示させたくない場合もあるかと思います。
そんな時は上記の日付を設置しているコードを消してしまえばよいわけですね。
思い切りよくざっくりと、消去です。

そうすることで、日付を表示させないようにすることもできます。

延長戦


strftimeは時刻表示についても書式が決まっています。

時刻表示のルール


書式内容
%H:%M時(24時間表示):分 と表示10:27
%X または %T時:分:秒 と表示10:27:53
%p%l:%M(AM・PM表示)時(12時間表示):分 と表示PM10:27
%P%l:%M(AM・PM小文字表示)時(12時間表示):分 と表示pm10:27
%k:%M時(24時間表示・1文字目の0はスペースに変換される):分 と表示3:50:25
&l:%M時(12時間表示・1文字目の0はスペースに変換される):分 と表示1:50:25

「日付・時刻・曜日」の全部入り


書式内容
%c曜日(省略名)月(英語・省略名)日 時:分:秒 年 と表示Mon Jul 27 10:27:25 2015

ここを学んだ


日付の表示方法が変更できると、ぐっとブログのデザインにも個性が出せますね。
デフォルトの漢字表示だと、どうしてもデフォルト感が出てしまいますので。

seesaaブログの独自タグについてもちょっと知っていないとどこで日付を設定しているのかわからなかったりしますが…

読みづらいところ、説明がおかしいところもあるかと思いますが、すみません。
きょうはこんなところで試合終了です。

タグキーワード
ブログをカスタマイズする seesaaブログカスタマイズカテゴリの最新記事
2015-07-27 | Comment(0) | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント: