はてなブログ【Brooklyn】更新日の表示（手直し不要・そのままコピペOK）

はてなブログのデザインテーマ【Brooklyn】に更新日を表示するカスタマイズコードを「元CAバンビ」さんと「ACC-DNTST」さんのコードを組み合わせて作ってみました。

【特徴】

jQueryを使用してsitemap_index.xmlから更新日の取得をしない
自分のブログのサイトマップを指定するコードの手直し不要
FontAwesome ( 外部フォント ) を使わない

もっと簡単に言うと

『コードをそのまま1ヶ所にコピペするだけでOK』

と言う事です。

※【Brooklyn】以外のデザインテーマをお使いの方が利用したい場合の「手っ取り早いコードの手直し方法」は『コメント欄』の方に書いてあります(^^;

【目次】

更新日を表示したい
更新日表示コード
- 更新日表示・アイコン版
- 更新日表示・アイコンなし版
あとがき
お世話になったサイト

更新日を表示したい

せっかく何度も手直ししたブログの記事に『更新日の表示』欲しくないですか？

私は『ブログに書きたい事』が出来てはてなブログを予備知識もないままはじめたので「記事の書き方」を知りませんでした。

おかげで「目次」「続きを読む」「alt属性」「h2見出し」等々・・・と過去記事の手直しを頻繁にしています(^^;

でも、記事の日付は投稿日のまま、記事下には「XXX日前」と表示されなんか嫌でした。

他の方の記事には更新日が表示されている物があるので【Brooklyn】に対応する物を検索してみました。

更新日表示の記事検索

まず見つかったのは「ACC-DNTST」さんの【Brooklyn】対応の更新日表示の記事でした。

account-it-dentist.hatenablog.com

他の記事も参考に・・・と探していた時に見つけた「元CAバンビ」さんの記事も気になりました。

www.bambi.pro

カスタマイズコードの違い

どちらも更新日表示のカスタマイズコードなのですが大きな違いがあります。

「ACC-DNTST」さんのコードは

jQueryを使用してsitemap_index.xmlから更新日を取得
自分のブログのサイトマップを指定するコードの手直しが必要
FontAwesomeを使用して外部サイトからアイコンを読み込んで表示
3ヶ所にコードをコピペ
【Brooklyn】用

多分はてなブログを長くやられている方にはお馴染みのコードではないかと思います。

私は最近はじめた初心者なので詳しくは分かりませんが。

※はてなブログ公式サイトマップについて『過去記事』に書いてます ( 宣伝(^^; )

でも、「元CAバンビ」さんのコードは

JavaScriptでJSONから最終更新日を取得
はてなブログに標準搭載のアイコンを使用
コードの手直し不要
1ヶ所にコードをコピペでOK
【Pallet ( パレット ) 】用

※「元CAバンビ」さんはデザインテーマ【Pallet ( パレット ) 】の作者さんです

外部サイトのファイル ( プログラム ) や
フォント、そしてsitemap_index.xmlを使用していませんでした。

個人的な感想ですが「元CAバンビ」さんのコードの方が使い勝手が良さそうなんですよねぇ。

ここでつい思ってしまいました・・・

コードを合体出来ないかな？・・・と(^^;

カスタマイズコードの合体

私は全くブログとは無縁だと思っていたのでHTML、CSS、JavaScriptと言ったWebシステムの知識を持っていません。

ただ、プログラミング経験はあるのでお二人のコードを見比べて合体出来そうだと思えました(^^;

と言いつつ、私のブログ環境は古いAndroid スマホのみ。

ついでにアバウトページや『過去記事』にも書いてありますが、コードを貼り付ける事が出来ない環境、つまりテストを繰り返しながら完全版に近づけると言った当たり前の事も出来ません・・・(^^;

お二人のコードを1週間程暇さえあればひとつひとつのコマンドを調べてコードの雰囲気をつかんでいきましたが・・・

英単語を知っていても文法を知らないので正確な翻訳にならないのと同じ様なものです(^^;

テストが出来ないので全然はかどらず途中で「ACC-DNTST」さんのコメント欄に「作りませんか？」と依頼もしてたりもするのですが・・・(^^;

基本的に「元CAバンビ」さんの更新日取得部分は触らず「ACC-DNTST」さんの表示デザイン部分の仕様変更だけを行いました。

投稿日の部分がお二人のコードが「.entry-date」と「.date」とバラバラでここだけはBrooklynの構造が分からないので悩みましたが・・・(^^;

とりあえず形にはなったのでネットカフェに出向き作成したコードをテスト用ブログに貼り付けて動かしてみた時の・・・

「え !? これで動くの !?」

と言う感想がこの後に記述するカスタマイズコードの全てを表しています(^^;

※後日「ACC-DNTST」さんから「.date」はclassで「.entry-date」はidなのかも？と言う事をお聞きしました。

classとidについてはこちらのサイトの2ページ目を見るとイメージできるかなと思います。

allabout.co.jp

更新日表示コード

これから記述するカスタマイズコードにはサポートはありません。

更新日が正しく表示される事、記事からコピペしたコードが正しく動作する事、検索サイトに記事が登録される事についてはクリアしていますが・・・

コードの細かな説明を求められても困りますし、何よりネットカフェに出向かなければテストができないのでサポートしようがないので・・・(^^;

カスタマイズコードが理解出来て修正も出来る方、または『勇者』の方向けです(^^;

でも、ご安心ください。

それ以外の方は私の依頼で「ACC-DNTST」さんがカスタマイズコードを作成して記事にして頂けたのでそちらをご利用できます。

デザインは違いますが同じ構造です。

account-it-dentist.hatenablog.com

更新日表示・アイコン版

Brooklyn更新日表示・アイコン版

【手順】
ダッシュボード＞デザイン＞カスタマイズ（スパナマーク）＞記事＞記事下

に以下のコードを貼り付けて画面上部の「変更を保存」をクリック。

<!-- 最終更新日 -->
<style>
.lastmod{
    color: #f5f5f5;
    background-color: #000000;
    padding: 5px 6px;
    text-decoration: none;
    font-size: 90%;
    display: inline;
    margin-left: 10px;
}
.lastmod:before{
    margin-right: 5px;
    padding-left: 3px;
    font-size: 90%;
    font-family:"blogicon";
    content: "\f02b";
}
.lastmod:after {
    margin-right: 5px;
    margin-left: 3px;
    padding-left: 3px;
    font-size: 90%;
    content: "更新";
}
.date a {
    padding: 5px 6px !important;
}
.date a:before{
    margin-right: 5px;
    padding-left: 3px;
    font-size: 90%;
    font-family:"blogicon";
    content: "\f043";
}
</style>
<script type="text/javascript">
    var jsonld = JSON.parse(document.querySelector('script[type="application/ld+json"]').innerHTML);
    var dateModified = jsonld.dateModified;
    var date = document.querySelector('div.date'); 
    var time = document.createElement('time');
    var lastmod = dateModified.substr(0, 10);
    time.innerText = lastmod
    time.setAttribute("datetime", lastmod );
    time.setAttribute("dateModified", "最終更新日：" + lastmod);
    time.className = 'lastmod';
    date.appendChild(time);
</script>

※念のため書いておきますが「更新日」はトップ画面の一覧表示などには表示されません。各記事を表示した時だけです。

更新日の後ろに「更新」と追加したのには理由があります。

「元CAバンビ」さんの記事でもリンクがはられている【Google 検索で署名日に影響を与える】に日付に「投稿」や「更新」等と両方またはいずれかを表示する様にと書かれていたからです。

デザインを優先したい方は以下のコードを削除してください。

.lastmod:after {
    margin-right: 5px;
    margin-left: 3px;
    padding-left: 3px;
    font-size: 90%;
    content: "更新";
}

更新日表示・アイコンなし版

Brooklyn更新日表示・アイコンなし版

一応Googleドキュメントにしっかり対応するためにアイコンを使わないタイプも作ってみました。

貼り付け手順は同じです。

<!-- 最終更新日 -->
<style>
.lastmod{
    color: #f5f5f5;
    background-color: #000000;
    padding: 5px 6px;
    text-decoration: none;
    font-size: 90%;
    display: inline;
    margin-left: 10px;
}
.lastmod:before{
    margin-right: 2px;
    padding-left: 3px;
    font-size: 90%;
    content: "更新日：";
}
.date a {
    padding: 5px 6px !important;
}
.date a:before{
    margin-right: 2px;
    padding-left: 3px;
    font-size: 90%;
    content: "投稿日：";
}
</style>
<script type="text/javascript">
    var jsonld = JSON.parse(document.querySelector('script[type="application/ld+json"]').innerHTML);
    var dateModified = jsonld.dateModified;
    var date = document.querySelector('div.date'); 
    var time = document.createElement('time');
    var lastmod = dateModified.substr(0, 10);
    time.innerText = lastmod
    time.setAttribute("datetime", lastmod );
    time.setAttribute("dateModified", "最終更新日：" + lastmod);
    time.className = 'lastmod';
    date.appendChild(time);
</script>