みなさん、こんにちは。
はてなブログで記事を更新した際、更新表示を出すコードをご紹介します。
自動で表示ではなく手動タイプです。
自動と手動の違いもご確認ください。
※コード転載禁止
記事の更新日を表示させる理由
いつ更新したのか、分かるようにしたい。
そんなときに更新日を手動で表示させることができます。
※下記は、他サイトのものです。韓国語ブログ「ハングルマスター」より。
上は、掲載日。下は、プラス更新日が表示されています。
自動ではなく手動で
なぜ、自動ではなく手動なのか。
記事内容を更新したことを特に知らせなくていいときにおすすめです。
例えば、漢字の変換ミスを直しただけみたいときに、わざわざ更新しましたよ表示なんていらないですよね。
また、自動での更新日を表示させるにはAMPを配信する必要があります。
GoogleさんはAMPを推奨しています。
記事の表示速度が速いとのことですが、AMPで配信した記事は見出しだったりいろんな表示がおかしくなってることが多いです。
AMP配信をしたくない方は、手動で更新日を付けることをおすすめします。
コードはこちら
下記コードを必要個所に追加してください。
head
「設定」→「詳細設定」→『headに要素を追加』に下記コードを追加→「変更する」
- <script>
- document.addEventListener('DOMContentLoaded', function(){
- var entry = document.getElementsByClassName("page-entry");
- if(entry.length >=1){
- var x = entry[0].getElementsByClassName("date entry-date first");
- var y =entry[0].getElementsByClassName("entry-updated updated");
- if(x.length >=1 && y.length >=1){
- x[0].appendChild(y[0]);
- }
- }
- }, false);
- </script>
css
「デザイン」→「カスタマイズ」→『{ } デザインCSS』に下記コードを追加→「変更を保存する」
- /*-更新日時表示-ここから*/
- .entry-content .updated{
- display:none;
- }
- .page-entry .entry-header .updated{
- display:inline-block;
- font-size: 15px;
- }
- .page-entry .entry-header .updated:before {
- font-family: FontAwesome;
- content: "\f021";
- left: 0;
- top: 0;
- color: #454545;
- padding-left: 20px;
- padding-right: 8px;
- }
- /*-更新日時表示-ここまで*/
※文字サイズを変更したいときは「font-size」で調整してください。
字のカラーは「color」で好きな色のコードにしてください。
【モバイル注意】
レスポンシブ設定の場合は、特に何もしなくて大丈夫です。
レスポンシブ非対応のテーマの場合、スマートフォンのデザイン変更よりタイトル下や記事上などに<style></style>でcssコードを挟めば対応できるはずなのですが、このブログの記事をもとにカスタマイズをしようとされた方から『反映しない』とのご連絡をいただきました。
使用できるテーマもあるかもしれませんが、できないものもあるようです。
その際は、レスポンシブ対応のテーマに変えていただくか、自動更新のコードであれば問題ないかと思いますので、自動更新のコードについての記事をお探しいただければと思います。（検索すると掲載しているブロガーさん多いです）
記事に追記：html
記事の『HTML編集』で一番上に下記コードを追加。
- <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に追加。
- <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
あとがき
更新日、特に必要ない方もいると思いますが...付けたい方はコードを追加してください。
以前、自動で更新日が表示されるようにしていましたが、AMP配信していると回遊率下がるので、手動追加をおすすめします。
毎回、入力するのが面倒な方は自動で更新する方法の記事を書いてる方、沢山いるので検索してみてください。
ではでは～。
※追記
私が作成したコードではありません（人に教えてもらった）が、勝手にコードを自身のサイトやブログで掲載しないでください。紹介は構いませんし、アレンジはOKですが、そのまま転載されている方が何人もいらっしゃいます。控えていただけると幸いです。
