はてなブログで更新日時を自動表示させる方法

リライトしたら、更新日時を自動表示させたい！ つばさノートさんの公開されている更新日時を自動表示させるコードを使って、私が適用しているテンプレート「Naked」のCSSを作ってみました。

リライトしていることをアピールしたい

「TRY SOMETHING NEW」の記事は2015年〜、もうすぐ1,500記事に到達します。（書きすぎ）当初のブログはそれはそれは酷い出来なのでちょこちょこリライトしているのですが、更新日時の記載を忘れたりなんだりかんだりで新しくなっている感が皆無です。

WordPressでブログを書いているすごいブロガーの皆さんは「プラグイン」（何それ）とやらで更新日時が自動で表示されるようになっているのですが、はてなブログには更新日時を自動で表示する機能がありません。

投稿日時を変更することはできるのですが、それはちょっと違うんだ……私が2015年に書いたクソ記事をなんとかして2018年に生きかえらそうとしていることを伝えたいわけなんですよ。

ということで「はてなブログで更新日時を自動表示させる方法」を調べて見た結果、たった一つのブログにたどり着きました。

はてなブログで更新日時を自動表示させる方法

つばさノートさんのカスタマイズ方法が唯一無二でしたので、こちらの記事をご覧の上、設定してみてください。

やってみたのですが、私の使っているはてなブログのテンプレートとの相性なのか、更新日時が表示されず6時間くらい格闘を繰り広げた結果、jQueryを読み込んでいるであろう箇所を最新版と思われるjQuery 3.xに変更することで無事に読み込めるようになりました。

最初の状態だと

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.3.min.js"></script>

になっているところを、下記のように書き換えました。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

レスポンシブデザインを使用している方のためのアップデート版

レスポンシブデザインを使用している方向けにアップデート版も公開されていましたので、新たに導入する方はこちらを参考にされた方が良いかもしれません。うまくできなければ、同様にjQueryを変更してみるといいかも……。

更新日自動表示のカスタマイズをアップデートしました、レスポンシブデザインの方はご確認ください – つばさのーと

zeno-tealとInnocentテンプレの方向けのCSS

さらにさらに、はてなブログの2つのテンプレート「zeno-teal」と

Innocent」向けのCSSも公開されていました。凄すぎます。

更新日自動表示カスタマイズのCSSの調整始めました。ご協力よろしくお願いします – つばさのーと

Naked向けのCSSを作ってみる

しかしながら、私が使用しているテンプレートはNakedなので、これに合うCSSを作ってみたいと思います。

今はこんな感じで、全然違う雰囲気になってしまっています。なお、5月3日にブログのデザインを更新したのですが、どうやらその日付を元に更新日時表示がなされているようです。

純粋にリライトに準ずるわけではないのか……。でも、どうしたらいいのか分からないのでとりあえずそのままにします。

やりたいこと

• フォントを統一する
• 更新したよのマークを違うものにする
• 位置を揃える

CSSなんてさっぱり分からないのですが、きっとNakedの元々の表示をパクってくればいいのでしょう。「要素の検証」なんかを使って。

……と思ったんですが、「要素を検証」してもさっぱり分からなかったのでやり方を変えます。

Innocentを参考に改変を加えてみる

つばさノートさんで公開されていたInnocentのCSSを参考にします。

/*更新日時表示*/
.lastmod {
background-color: transparent;
padding: 5px 6px;
text-decoration: none;
font-size: 100%;
display: inline;
margin-left: 10px;
}
.lastmod::before {
margin-right: 10px;
padding-left: 3px;
font-family: FontAwesome;
content: '\f021';
}
.entry-date a {
padding: 5px 6px !important;
}
.entry-date a::before {
margin-right: 5px;
padding-left: 3px;
font-family: FontAwesome;
content: '\f017';
}

CSSとかよく分かりませんが、エンジニアの人ってよく言いますよね。「プログラミングといっても言語だから」と！ 

おそらく、lastmodが更新日時で、entry-dateが一番初めの執筆日ということなんだと思います。

日付の前にある可愛いアイコンは、FontAwesomeから持ってきているコンテンツほにゃららだよ、って意味なんだと思います。ふはは、読める、読めるぞぉ！ （ムスカ）

モンスターペアレント？ みたいな「transparent」は文字だけ切り抜いて表示しているよ、的な意味みたいです。

とはいえ、現状では入力済みのCSSが全然適用されていないような……？

CSSには「下の方に書いてあるやつ」と「!important」が付いているものが優先されるという特徴があるので、まずはカスタマイズCSSの一番末尾に先ほどのコードを入力してみました。

日付の前のアイコンを変える

これでCSSが効いているのか、日付の前のアイコンを時計からカレンダーに変更してみます。

contentの後に、FontAwesomeで見つけた可愛いアイコンの番号みたいなものを入れます。

時計のマークが無事にカレンダーのマークに変わりました！ 一応効果を発揮しているようです。

フォントの大きさを揃える

では、このフォントの大きさのずれを調節してみます。更新日時の方のフォント情報と思われるものをコピペし、font-sizeが100%ではちょっと大きい気がしたので90%に変えました。

あ、すごい！ なんかフォントが小さくなって大きさが揃ってる！！！ （でも仕組みがわからない！）

あとはフォントが統一できればいいんだけれど……。

Nakedのフォントを探す

きっと、NakedのCSS全体を司る場所にそのヒントがあるはず……と思い、

何も考えずにぺたっと貼り付けただけだったこの箇所から、CSSが記述されているっぽいページをみてみました。

投稿日時は「entry date」と記述されているので、「date」で検索。

すると、まさしく数字フォントに付いて触れている部分を発見！ 

きっとここには「投稿日時の数字フォントは'Montserrat',sans-serifを指定する」的なことが書いてあるに違いありません。

CSSの更新日時の末尾に、font-familyについての一行を追加してみました。

すると！ お見事！！ フォントが揃いましたー！！ 

フォントの大きさを揃える

%で指定していたfont-sizeでは、なんとなく微妙に大きさに違いがあるように思います。いっそのことpxで指定してみることにしました。

うん、綺麗に揃ったと思う。あとはこの微妙な色の違い……。

色を揃える

色の情報も元のCSSのどこかにあるのかもしれませんが、探し方が分からなかったのでgooglechromeの拡張機能で色を調べて、そのまま指定してみることにしました。

color: #888888; って指定したらいけました。

わーい、ついに色が揃ったぞ！！ あとはなんていうかこう、二つの日付の距離をもう少し狭めたいところ……。

日付の間の距離を狭める

こういう時はどうせ、marginとかpaddingが影響してるんだろう、と思ったので更新日時についていた「margin-left: 10px;」を0にしてやりました。ついでに、さっきコピペでくっついてしまっていた投稿日時の「margin-left: 10px;」を削除。

あとはpaddingの6pxをうまく調節すればいいような気がします。

最大限隙間をなくしてみました。

Naked用の更新日時自動表示CSS完成！

ということで、必死の格闘により ↑こっから

↓ こうなりました！！

完成したコードがこちら。

/*更新日時表示*/
.lastmod {
background-color: transparent;
padding: 5px 0px;
text-decoration: none;
font-size: 15px;
display: inline;
margin-left: 0px;
font-family: 'Montserrat', sans-serif;
color: #888888;
}
.lastmod::before {
margin-right: 5px;
padding-left: 3px;
font-family: FontAwesome;
content: '\f01e';
}
.entry-date a {
background-color: transparent;
padding: 5px 0px 5px 6px;
text-decoration: none;
font-size: 15px;
display: inline;
}
.entry-date a::before {
margin-right: 5px;
padding-left: 3px;
font-family: FontAwesome;
content: '\f073';
}

まとめ

分からないなりに頑張ったー！！

なかなか表示されなかったスマホの方は、CSSの方だけしか貼り付けていなかったのが原因でした。日時を読み込むためのコードも入力し、見た目を整えて完成！ 

できた……もはや全く別のブログのようだ……。色々とカスタマイズしましたが、それに合わせて今後は記事のリライトも進めていこうと思います。疲れた。