なにからなにまで!

好きなことだけ紹介するブログ

記事の更新日を手動で表示させる:はてなブログ

みなさん、こんにちは。

はてなブログで記事を更新した際、更新表示を出すコードをご紹介します。
自動で表示ではなく手動タイプです。

自動と手動の違いもご確認ください。

f:id:yukik8er:20191209185502j:plain

記事の更新日を表示させる理由

いつ更新したのか、分かるようにしたい。
そんなときに更新日を手動で表示させることができます。

※下記は、他サイトのものです。韓国語ブログ「ハングルマスター」より。

f:id:yukik8er:20191209184250j:plain

上は、掲載日。下は、プラス更新日が表示されています。

自動ではなく手動で

なぜ、自動ではなく手動なのか。
記事内容を更新したことを特に知らせなくていいときにおすすめです。

例えば、漢字の変換ミスを直しただけみたいときに、わざわざ更新しましたよ表示なんていらないですよね。

また、自動での更新日を表示させるにはAMPを配信する必要があります。
GoogleさんはAMPを推奨しています。
記事の表示速度が速いとのことですが、AMPで配信した記事は見出しだったりいろんな表示がおかしくなってることが多いです。

AMP配信をしたくない方は、手動で更新日を付けることをおすすめします。

コードはこちら

下記コードを必要個所に追加してください。

「設定」→「詳細設定」→『headに要素を追加』に下記コードを追加→「変更する」

  1. <script>
  2. document.addEventListener('DOMContentLoaded', function(){
  3.    var entry = document.getElementsByClassName("page-entry");
  4.    if(entry.length >=1){
  5.       var x = entry[0].getElementsByClassName("date entry-date first");
  6.       var y =entry[0].getElementsByClassName("entry-updated updated");
  7.       if(x.length >=1 && y.length >=1){
  8.           x[0].appendChild(y[0]);
  9.       }
  10.   }
  11. }, false);
  12. </script>

css

「デザイン」→「カスタマイズ」→『{ } デザインCSS』に下記コードを追加→「変更を保存する」

  1. /*-更新日時表示-ここから*/
  2. .entry-content .updated{
  3.     display:none;
  4. }
  5. .page-entry .entry-header .updated{
  6.     display:inline-block;
  7.     font-size: 15px;
  8. }
  9. .page-entry .entry-header .updated:before {
  10.     font-family: FontAwesome;
  11.     content: "\f021";
  12.     left: 0;
  13.     top: 0;
  14.     color: #454545;
  15.     padding-left: 20px;
  16.     padding-right: 8px;
  17. }
  18. /*-更新日時表示-ここまで*/


※文字サイズを変更したいときは「font-size」で調整してください。
字のカラーは「color」で好きな色のコードにしてください。

【モバイル注意】
レスポンシブ設定の場合は、特に何もしなくて大丈夫です。
そうでない方は、デザイン→スマートフォンの記事上or下に上記のコードを追加してください。
追加していないと、モバイルで見たときに記事上に日付のみ表示されてしまいます。

  1. <style>ここにcssコード</style>

モバイルは上記のように追記することが重要です!

記事に追記:html

記事の『HTML編集』で一番上に下記コードを追加。

  1. <p><time class="entry-updated updated" datetime="2019-12-01">2019-12-01</time></p>


更新した日に変更してください。
「datetime="YYYY-MM-DD">YYYY-MM-DD」
Y=年,M=月,D=日

※アイコンが表示されない場合は、下記コードをheadに追加。

  1. <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

あとがき

更新日、特に必要ない方もいると思いますが...付けたい方はコードを追加してください。

以前、自動で更新日が表示されるようにしていましたが、AMP配信していると回遊率下がるので、手動追加をおすすめします。
毎回、入力するのが面倒な方は自動で更新する方法の記事を書いてる方、沢山いるので検索してみてください。

ではでは~。