はてなブログで記事の日付に曜日を付けるやつ2

スマホ表示・カスタマイズが可能になりました。

みんなで「マーキー！マーキーじゃないか！」とワイワイやっていた時に見つけた
はてなブログの記事の日付に六曜を表示する
 id:hitode909 さんの六曜表示するやつ。ソースを見てみるとデザイナさんにも優しい出力になっているので、曜日を付けるやつもそれに倣った。

f:id:psne:20140330224529p:plain 　これですね。

使い方

前回同様、デザインのフッタにスクリプトを入れます。

<script src="//niyari.github.io/hatenablog-modules/date-to-week.js"charset="utf-8"></script>

f:id:psne:20140330221107p:plain

これだけ？　はい、これだけです。これだけで表示されます。(PC版のみ)
「変更を保存する」ボタンを押すのも忘れずに。

スマホ版でも使いたい

フッタではなく、詳細設定のヘッダに挿入します。

スマホでも表示させる

※ブログの詳細設定はこちらから

表示させる文字を変えたい

設定を読ませることで任意の文字列に変える事ができます。

<script src="//niyari.github.io/hatenablog-modules/date-to-week.js" charset="utf-8"></script>
<script>
//表示させる文字を変える
Htnpsne.DateToWeek.init(["日","月","火","水","木","金","土"]);
</script>

「にちようび」のような文字数が多い場合、テーマによっては表示が崩れる事があります。各自CSS等で調整してください。

デザインを変えたい

今回のキモはここですね。今回はクラスが与えられます。
date-week date-week-(曜日)というフォーマットになります。

.date-week-Sun{
color:#FF0000;
}

という感じでCSSに追加すると日曜日が赤くなります。
画像に差し替えたり色々やると良いと思いますよ。
SunとかMonとか、文字列は入れない方が自由度が上がるのでしょうか。
その辺は好きなように弄って貰えば良いと思いますよ。

任意のタイミングで表示させたい

通常は、全てのデータを受信して画面表示の準備が終わった頃に処理を開始しますが、それよりも早く処理をさせたい場合に利用します。

<script src="//niyari.github.io/hatenablog-modules/date-to-week.js" charset="utf-8"></script>
<script>
//任意のタイミングで表示させる
Htnpsne.DateToWeek.disp();
</script>