nu notebook

nu notebook

はてなブログの「こよみモード」のタイトルを省略なしで表示し、ついでに幅も広げる

はてなブログ

はてなブログの「こよみモード」*1は、予約投稿をいつにしているか・どれぐらいの頻度で投稿しているかを確認するのにとても便利だと思うのですが、タイトルが1行に収まるように終端が省略されているので、投稿によっては見分けがつかなかったりしませんか？

というわけで、拡張機能 Stylus用のコードを書いたので公開します。Mozilla FirefoxのuserContent.cssでも可。

※Stylus とか userContent.css とか何のこと？　という方は、ひとまずググってください。→別の件で書いたエントリで言及したので、検索してもよく分からなかった、という人はこちらをどうぞ: Evernote WebのデフォルトフォントをCSSでメイリオに変更する - nu notebook

コードは以下です。

@-moz-document regexp("https://blog.hatena.ne.jp/[^\\/]+/[^\\/]+/koyomi/?.*") {
    /* タイトルを省略表示しない */
    .calendar-day-entries-title { white-space: normal !important; }
    /* カレンダーの幅を広げる */
    .koyomi-container { max-width: 1600px !important; }
    .calendar-day-entries-title { max-width: none !important; }
    /* 予約マークを目立たせる */
    .badge { background-color: #d00 !important; }
}

Before
Before

いくら自分で投稿したといっても「はてなブロ...」だけでは何の記事なのかわからない……

After
After

のが、タイトルが複数行で表示されてわかりやすくなります。
「予約」というマークも目立たないので赤くしてみました。

なおカレンダーそのものの幅も狭い気がしたので、最大 1600px まで広がるように変更しています。
（限界まで広げたい場合は 1600pxの部分をnoneにすればいいです）

右側で地味に幅を取っている「○月のあゆみ」というバーは、過去の同じ月の投稿がピックアップされて表示される箇所らしいので、そのままにしています。私の場合はまだ始めたばかりなので何も表示されていませんが、消しっぱなしだと存在を忘れてしまいそうなので……。

*1:カレンダー形式で投稿一覧を表示してくれる機能