すなばいじり

はてなブログを使って、トンピーを揃えるまで止めないブログ。ふっくらかわいい。

はてなブログで記事の日付に曜日を付けるやつ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>

※上級者向けになります。

 

ソースコード

hatenablog-modules/date-to-week.js at master · niyari/hatenablog-modules · GitHub

 

あいつ…糞コード書いてない?

どうする兄ちゃん
処す?処す?

 

この記事は、見たままモードではなく、はてな記法モードで書けばよかった。スーパーpre記法とかもっと自由に使いたい。
 

こぐまのトンピー

こぐまのトンピー