【はてなブログ】記事の更新日付を自動表示させる方法を解説

カスタマイズ

f:id:asobitukusou:20200308143400p:plain

ブログに更新日付を表示させると、ブログ内容がいつのものなのかが把握でき、情報が古いものなのか、新しく更新されているものなのかが一目でわかるメリットがあります。


 
今回はブログの更新日付を作成日付と一緒に自動表示させる方法について、私が実際にやったやり方をご紹介します。
今回表示させる作成日付と更新日付

カスタマイズの際の注意

  • PCとスマホで表示されるかの表示確認をしてください。
  • カスタマイズは自己責任で行ってください。
    何かトラブルが起きてもこちらでの責任は負いかねます。

CDNの読み込み

jQueryとfontawesomeのCDNを読み込み

【ダッシュボード】→【設定】→【詳細設定】→【headに要素を追加】に下記のコードを追加します。すでに同じコードが書き込まれている場合は、書き込みは不要です。

<!--「jQuery」参照URL-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--「Font Awesome」参照URL-->
<link href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" rel="stylesheet">


 
CDNを読み込んでfontawesome（日付前のアイコン）とjQuery（ライブラリ）を使用できるようにします。

Scriptの読み込み（PC・スマホ）

  • PC版はてなブログで更新日付を自動表示する場合は【ダッシュボード】→【デザイン】→【カスタマイズ】→【記事】→【記事下】に下記のコードを追加します。
  • スマホ版はてなブログで更新日付を自動表示する場合は【ダッシュボード】→【デザイン】→【スマートフォン】→【記事】→【記事下】に下記のコードを追加します。
  • コード内のurlに自分のサイトマップのURLを入力します。
    （例）url = '自分のサイトのURL/sitemap.xml'; 
<!--[if lt IE 9]>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.3.min.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.3.min.js"></script>
<!--<![endif]-->
<script>
/*
 * Show lastmod for Hatena Blog v1.0.1
 * Date: 2016-12-20
 * Copyright (c) 2016 https://www.tsubasa-note.blog/
 * Released under the MIT license:
 * http://opensource.org/licenses/mit-license.php
 */
;(function($) {
'use strict';
var urls = [], opts = {cache: false, dataType: 'xml'}, p,
//url = 'https://asobitukusou.hatenablog.com/sitemap.xml'; //urlの入力例
url = ''; // ここにサイトマップへのURLを入力してください。
function parseSitemapXML(url) {
var d = new $.Deferred;
$.ajax($.extend(opts, {
url: url
})).done(function(xml) {
$(xml).find('sitemap').each(function() {
urls.push($(this).find('loc').text());
});
d.resolve();
}).fail(function() {
d.reject();
});
return d.promise();
}
function findURL(url) {
$.ajax($.extend(opts, {
url: url
})).done(function(xml) {
var isMatched = false;
$(xml).find('url').each(function() {
var $this = $(this);
if ($this.find('loc').text() === location.href) {
isMatched = true;
appendLastmod($this.find('lastmod').text());
return false;
}
});
if (!isMatched) nextURL();
}).fail(function() {});
}
function nextURL() {
urls.shift();
if (urls.length) findURL(urls[0]);
}
function appendLastmod(lastmod) {
var $container = $('<div></div>', {'class': 'lastmod'}).text(lastmod.replace(/T.*0/,""));
if ($('.entry-header > .date').get(0).tagName.toLowerCase() === 'span') {
$('.entry-title').before($container);
} else {
$('.entry-date').append($container);
}
}
p = parseSitemapXML(url);
p.done(function() {findURL(urls[0])});
p.fail(function(error) {});
})(jQuery);
</script>

CSSの読み込み（PC・スマホ）

はてなブログPC版のスタイル

  • 【ダッシュボード】→【デザイン】→【カスタマイズ】→【デザインCSS】に下記のコードを追加します。
/*↓----更新日時表示----↓*/
.lastmod {
    background-color: transparent;
    padding: 5px 0px;
    text-decoration: none;
    font-size: 15px;/*更新日付の文字の大きさ*/
    display: inline;
    color: #888888;/*更新日付の文字色*/
    margin-left: 1em;
}
.lastmod::before {
    margin-right: 5px;
    font-family: "Font Awesome 5 Free";
    font-weight: bold;
    content: '\f01e';/*更新日付前のアイコンの種類*/
    color: orange;/*更新日付前のアイコンの色*/
}
.entry-date a {
    background-color: transparent;
    padding: 5px 0px;
    text-decoration: none;
    font-size: 15px;/*作成日付の文字の大きさ*/
    display: inline;
}
.entry-date a::before {
    margin-right: 5px;
    font-family: "Font Awesome 5 Free";
    content: '\f073';/*作成日付前のアイコンの種類*/
    font-weight: bold;
}
/*↑----更新日時表示----↑*/

はてなブログスマホ版のスタイル

  • 【ダッシュボード】→【デザイン】→【スマートフォン】→【記事】→【記事上】に下記のコードを追加します。（あるいは【デザイン】→【スマートフォン】→【ヘッダ】→【タイトル下】に下記コードを追加）
  • CSSは<style>CSSを記述</style>で囲ってください。
/*↓----更新日時表示----↓*/
.lastmod {
    background-color: transparent;
    padding: 5px 0px;
    font-size: 15px;/*更新日付の文字の大きさ*/
    display: inline;
    margin-left: 1em;
    color: #333;/*更新日付の文字色*/
}
.lastmod::before {
    margin-right: 5px;
    font-family: "Font Awesome 5 Free";
    content: '\f01e';/*更新日付前のアイコンの種類*/
    color: orange;/*更新日付前のアイコンの色*/
    font-weight: bold;
}
.date {
    background-color: transparent;
    padding: 5px 0px;
    font-size: 15px;/*作成日付の文字の大きさ*/
    display: inline;
}
.date::before {
    font-family: "Font Awesome 5 Free";
    content: '\f073';/*作成日付前のアイコンの種類*/
    font-weight: bold;
}
/*↑----更新日時表示----↑*/

今回参考したサイト

日付前のアイコンについて
作成日付、更新日付前に表示されるアイコンはFont AwesomeというWebアイコンフォントです。
Font Awesomeの使い方や、今回ならアイコンの種類の変え方がサルワカさんの下記リンク先にとても分かりやすく書かれています。（今回のアイコンの変え方は「項目４.CSSでアイコンを表示」欄を見てください。）
saruwakakun.com
また公式サイトは以下です。「Search icons...」からアイコンを探しましょう。

その他参考サイト様

kurokinomizuiwa.hatenablog.comwww.itjigoku.com

まとめ

さて、今回ははてなブログで更新日付を自動表示させるカスタマイズをしてみました。
過去に書いたブログ内容をリライトする方は多いと思います。更新した日付はその情報の新しさを示す大切な指標です。
アイコンの種類や色、文字の大きさや色を変えて、是非皆さんも自分だけの作成・更新日付表示にチャレンジしてみてください。

 
カスタムお疲れさまでした。この記事の内容が少しでもお役に立てれば幸いです！

asobitukusou 読者になる

広告を非表示にする
関連記事
コメントを書く