hitode909の日記

趣味はマリンスポーツですの日記です

はてなブログの記事の日付に六曜を表示する

普通の手帳やカレンダーなんかには六曜が書いてあるから,運が悪いことがあると,やっぱり仏滅だった,とか,大安だから遊びに行こう,とか述べることができる.
はてなブログでは六曜を表示していないので,どういう日なのか分からなくて困る.
以前から問題意識があったので,JavaScriptでブログに六曜を表示するようにした.


f:id:hitode909:20140112204725p:plain
こんな感じに出る.PC版だけ表示される.スマフォ版には出ない.

使い方

以下のHTMLをコピペして,デザイン編集 → カスタマイズ → フッタHTML に貼り付けると六曜が出る.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://hitode909.github.io/hatenablog-unofficial-modules/rokuyo.js" charset="utf-8"></script>

デザイン

rokuyouっていうクラスが当たるので,自由に六曜をデザインできる.また,日に応じて,rokuyou-仏滅 とか,rokuyou-大安 みたいなクラスも当たるので,大安だけ赤くするとかできる.
日本語でクラス指定していいのって思ったけどこの前調べたら使ってよさそうだった.
テーマによっては見た目崩れるかもしれない..dateにwidth: 100px;とか書いてると改行してしまうので,display: inline-block; width: auto;とか足すと良い.

.date {
    display: inline-block;
    width: auto;
}

.rokuyou {
    font-family: serif;
    font-weight: bold;
}

.rokuyou-大安 {
    color: #FAA;
}


ソースコードここに置いてある.

六曜を返してくれるAPIがあったので利用している.クライアントサイドで計算できるライブラリがあればよかったのだけど,よさそうなのなかった.

JSの配信にrawgithub.comというのを使ってる.productionでは使うなって書いてあるけど,そんなにリクエスト数多くないだろうし壊れてもいいので使ってる.これを使って配布するのはやっぱりよくないと思ったので変えた.

追記


rawgithub.comへのホットリンク - Weblog - Hail2u.net

ある日壊れてもいいから問題ないかと思ってたけどたしかにと思ったのでそのうちもうちょっとなんとかします。

追記(2)

Github Pagesを使って配信するようにした.昨日コピペした人いたら,上のソースもっかいコピペして貼り直してください.

追記(3)

Taberarelooのパッチになった.
Taberareloo 用パッチ: 日付に六曜を追加する · GitHub