【Minimalism】コピペでOK！はてなブログのカスタマイズ全公開 (3)　※更新履歴編

ここで書くこと

本記事は、下記スタイルシート紹介記事を書いた後に、後から更新した箇所をまとめたものです。
スタイルシートの不具合修正や改善を行った際は、こちらに詳細を記録していきます。

endy-tech.hatenablog.jp

本記事は、すでに上記記事で紹介したスタイルシートをご利用いただいている方向けに、更新内容と修正方法をお伝えするために書いております。

元記事のスタイルシートには更新ポイントを反映しているので、これからコピペをする人は更新を意識する必要はありません。

ここで書くこと
2021/12/31 行間の見直し、引用部分のフォント修正
2021/11/13 (微改善) 脚注のスタイル調整
2021/1/31 (機能追加) 更新日の自動表示
2020/10/18 (微改善) highlight.js対応、及び見た目のブラッシュアップ
2020/9/11 (微改善) コードブロック下部に余白を追加
2018/11/18 (修正) 見出し3, 4が誤った番号で採番される問題を修正
終わりに

2021/12/31 行間の見直し、引用部分のフォント修正

変更箇所

以下の見た目を調整しました。

本文の行間が全体的に広かった (p, h2〜h4, ul, ol, .table-of.contents)
要素上の間隔が約30px、要素下の間隔が約10pxと非対称だった (h2〜h4, ul, ol, blockquote)
引用部分のフォントが環境によって異なっていた。特にLinux環境では顕著だった (blockquote)

見た目の比較

変更前は以下のような見た目でした。

スクリーンショットはLinuxからアクセスしたときのものです。
引用部分の"のフォントが、Linux環境では見た目が顕著に変わっていました。

margin_before

変更後は以下の見た目になりました。

line-heightを小さくしたことで同一パラグラフ内の行間を狭くし、併せてpタグのmarginを小さくしつつもパラグラフ間のメリハリを保てるようにしました。

他にも見出し、引用部分、箇条書きの上下の余白のバランスを整えました。
また、目次の四角形の角を他の部分とあわせて丸めました。

margin_after

CSSの差分

↓変更前 (1)

/* 本文、サイドバーの基本文字サイズ */
.entry-content p, li {
    /* 記載なし */
}

/* 【タブレット、PC限定】 */
@media screen and (min-width:641px) {
    .entry-content p, li {
        /* 記載なし */
    }
}

/* 本文、サイドバーの段落の行間 */
.entry-content p {  /* ★★★★★★ */
    margin-bottom: 2em;  /* 2em → 下に2行分の余白を開ける */
}

↓変更後 (1)

/* 本文、サイドバーの基本文字サイズ */
.entry-content p, .entry-content li {
    line-height: 1.6em; /* Minimalismのデフォルト値34pxが広すぎるので上書き */
}

/* 【タブレット、PC限定】 */
@media screen and (min-width:641px) {
    .entry-content p, .entry-content li {
        line-height: 1.6em; /* Minimalismのデフォルト値34pxが広すぎるので上書き */
    }
}

/* 本文、サイドバーの段落の行間 */
.entry-content p, .entry-content > ul, .entry-content > ol, .entry-content table {
    margin-bottom: 1.6em;  /* 2em → 下に2行分の余白を開ける */
}

↓変更前 (2)

/* 見出し2の設定 */
.entry-content h2 {
    margin: 60px 0 10px 0;
}

/* 【タブレット、PC限定】 */
@media screen and (min-width:641px) {
    .entry-content h2 {
        margin: 60px 0 10px 0;
    }
}

/* 見出し3の設定 */
.entry-content h3 {
    margin: 45px 0 10px 0;
}

/* 【タブレット、PC限定】 */
@media screen and (min-width:641px) {
    .entry-content h3 {
        margin: 45px 0 10px 0;
    }
}

/* 見出し4の設定 */
.entry-content h4 {
    margin: 30px 0 10px 0;
}

/* 【タブレット、PC限定】 */
@media screen and (min-width:641px) {
    .entry-content h4 {
        margin: 30px 0 10px 0;
    }
}

↓変更後 (2)

/* 見出し2の設定 */
.entry-content h2 {
    margin: 60px 0 30px 0;
}

/* 【タブレット、PC限定】 */
@media screen and (min-width:641px) {
    .entry-content h2 {
        margin: 60px 0 30px 0;
    }
}

/* 見出し3の設定 */
.entry-content h3 {
    margin: 45px 0 30px 0;
}

/* 【タブレット、PC限定】 */
@media screen and (min-width:641px) {
    .entry-content h3 {
        margin: 45px 0 30px 0;
    }
}    

/* 見出し4の設定 */
.entry-content h4 {
    margin: 30px 0 20px 0;
}

/* 【タブレット、PC限定】 */
@media screen and (min-width:641px) {
    .entry-content h4 {
        margin: 30px 0 20px 0;
    }
}

↓変更前 (3)

.entry-content blockquote {
    /* 記載なし */
}

/* 【タブレット、PC限定】 */
@media screen and (min-width:641px) {
    .entry-content blockquote {
        /* 記載なし */
    }
}

/* 引用部分の “ マークの挿入 */
.entry-content blockquote:before{
    font-family: serif;
}

/* 【タブレット、PC限定】 */
@media screen and (min-width:641px) {
    .entry-content blockquote:before{
        font-family: serif;
    }
}

/* 引用部分の ” マークの挿入 */
.entry-content blockquote:after{
    font-family: serif;
}

/* 【タブレット、PC限定】 */
@media screen and (min-width:641px) {
    .entry-content blockquote:after{
        font-family: serif;
    }
}

↓変更後 (3)

.entry-content blockquote {
    margin: 1.6em 0 1.6em;
}

/* 【タブレット、PC限定】 */
@media screen and (min-width:641px) {
    .entry-content blockquote {
        margin: 1.6em 0 1.6em;
    }
}

/* 引用部分の “ マークの挿入 */
.entry-content blockquote:before{

    font-family: 'Noto Sans JP', serif;
}

/* 【タブレット、PC限定】 */
@media screen and (min-width:641px) {
    .entry-content blockquote:before{
        font-family: 'Noto Sans JP', serif;
    }
}

/* 引用部分の ” マークの挿入 */
.entry-content blockquote:after{
    font-family: 'Noto Sans JP', serif;
}

/* 【タブレット、PC限定】 */
@media screen and (min-width:641px) {
    .entry-content blockquote:after{
        font-family: 'Noto Sans JP', serif;
    }
}

変更前 (4)

/* 目次エリア全体。背景色、文字間隔など */
.table-of-contents {
    /* 記載なし */
}

/* 【タブレット、PC限定】 */
@media screen and (min-width:641px) {
    .table-of-contents {
        /* 記載なし */
    }
}

/* 目次のリンクの文字設定 */
.table-of-contents li a {
    /* 記載なし。ただしMinimalismのデフォルト値が35pxだった */
}

/* 見出し1に対応する目次の余白調整、および自動採番用の変数セット */
ul.table-of-contents > li {
    margin-top: 0.6em;
}

変更後 (4)

/* 目次エリア全体。背景色、文字間隔など */
.table-of-contents {
    border-radius: 5px;
}

/* 【タブレット、PC限定】 */
@media screen and (min-width:641px) {
    .table-of-contents {
        border-radius: 5px;
    }
}

/* 目次のリンクの文字設定 */
.table-of-contents li a {
    line-height: 1em;  /* デフォルトが35pxと広かったので縮めた */
}

/* 見出し1に対応する目次の余白調整、および自動採番用の変数セット */
ul.table-of-contents > li {
    margin-top: 0.3em;
}

2021/11/13 (微改善) 脚注のスタイル調整

変わったこと

脚注部分の文字サイズが大きく、行間が空きすぎていたので調整しました。
また、スマホで脚注を表示した時に脚注の番号が2桁になると左端が切れてしまうので、padding-leftで間隔を微調整しました。

↓変更前

footnotes_before

↓変更後

footnotes_after

更新前

※記載なし

更新後

デザイン > カスタマイズ > デザインCSSに以下を追加。

/*
脚注の設定 (マークダウンでいう右記の部分： [^1], [^1]: xxx)
-------------------------------------------------------*/

.footnotes p, .footnotes li {
    line-height: 1em;
    font-size: 1em;
    margin-bottom: 1em;
}

.footnotes ol {
    line-height: 1em;
    font-size: 1em;
    margin-bottom: 1em;
    padding-left: 2em;
}

2021/1/31 (機能追加) 更新日の自動表示

変わったこと

下図のように、記事に追記したときに最終更新日を表示できるようにしました。
CSSとjQuery呼び出し設定を両方実施することで表示されるようになります。

modified_date

更新前

※記載なし

更新後

詳細は更新日付の自動表示を参照してください。

デザイン > カスタマイズ > デザインCSSに以下を追加。

/*
★更新日付の自動表示
https://www.tomomore.com/entry/hatenablog-date-modified をベースに、FontAwesome5ではなくblogiconを使う形にアレンジ。
-------------------------------------------------------*/
.lastmod {
    background-color: transparent;
    padding: 5px 0px;
    text-decoration: none;
    font-size: 15px;
    display: inline;
    margin-left: 0px;
    color: #888888;
}

.lastmod::before {
    margin-right: 5px;
    margin-left: 10px;
    padding-left: 3px;
    font-family: blogicon; /* font-family: FontAwesome; */
    content: '\f02b';
}

.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;
}

設定 > 詳細設定 > headに要素を追加 に以下を追加。

<!-- Automatically display the last-modified date -->
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>

デザイン > カスタマイズ > 記事 > 記事下 に以下を追加。
※13行目のurl = 'https://endy-tech.hatenablog.jp/sitemap.xml'; の部分は、ご自身のブログのURLに書き換えが必要です

<!-- Automatically display last-modified date
https://www.tomomore.com/entry/hatenablog-date-modified#head -->
<!--[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>
;(function($) {
'use strict';
var urls = [], opts = {cache: false, dataType: 'xml'}, p,
url = 'https://endy-tech.hatenablog.jp/sitemap.xml';
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>

2020/10/18 (微改善) highlight.js対応、及び見た目のブラッシュアップ

Syntax Highlighting の変更

変更前

molokai を参考にしたカラフルな色遣いでした。

syntax-highlighting-molokai-base

更新前のCSSは以下の内容でした。

.entry-content pre.code {
    background-color: #1e1e1e;
    color: #e0e0e0;
}

.synSpecial {
    color: #f1e369;
}

.synType {
    color: #9cdcfe;
}

.synComment {
    color: #aaaaaa;
}

.synPreProc {
    color: #9cdcfe;
}

.synIdentifier {
    color: #a5ea15;
}

.synConstant {
    color: #dc8b69;
}

.synStatement {
    color: #e6c864; 
}

/* コードブロック下部の余白調整 */
.entry-content pre {
    margin-bottom: 2em;
}

変更後

Nordを参考にしたクールな色遣いに変更しました。
ただしコメント部分だけはブログ用に編集し、黄色く目立つようにしました (元はグレー)。

syntax-highlighting-nord-base

更に、以下のように更新しました。

通常のマークダウン表記に加え、highlight.jsにも対応
字間が空きすぎていたのを調整

更新後のCSSは以下の内容です。

/*
コードブロックのシンタックスハイライト (Syntax Highlighting) の書式
Nordのカラースキームを参考にしました！ただしコメント色だけは変更しています。
https://www.nordtheme.com/docs/colors-and-palettes
-------------------------------------------------------*/
.entry-content pre {
    background-color: transparent;
    border: none;
    padding: 0;
}

.entry-content pre.code {
    background-color: #2E3440; /* nord0 */
    border-radius: 3px;
    color: #ECEFF4; /* nord6. 公式推奨の bright to dark を選択 */
    font-size: 0.9em;
    line-height: 1.2em;
    padding: 20px;
}

.synSpecial {
    color: #D08770; /* nord12 */
}

.synType {
    color: #8FBCBB; /* nord7 */
}

.synComment {
    color: #EBCB8B; /* 本来はnord3の#4C566Aだが、ブログなのでコメント色を目立つNord13に変更 */
}

.synPreProc {
    color: #5E81AC; /* nord10 */
}

.synIdentifier {
    color: #8FBCBB; /* nord7 */
}

.synConstant {
    color: #D8DEE9; /* nord4 */
}

.synStatement {
    color: #88C0D0; /* nord8 */
}

/* コードブロック下部の余白調整 */
.entry-content pre {
    margin-bottom: 2em;
}


/*
★highlight.js
<pre><code>で囲う
Nordのカラースキームを参考にしました！ただしコメント色だけは変更しています。
https://www.nordtheme.com/docs/colors-and-palettes
-------------------------------------------------------*/

.entry-content pre .hljs {
    background-color: #2E3440; /* nord0 */
    line-height: 1.2em;
    padding: 20px;
}

.entry-content pre code .hljs-comment {
    color: #EBCB8B; /* 本来はnord3の#4C566Aだが、ブログなのでコメント色を目立つNord13に変更 */
}

また、highlight.jsを利用可能にするために、 設定 > Advanced > headに要素を追加 に以下の行を追記しています。
下記はNordカラースキーム用の設定ですが、他のカラースキームを利用する場合は適宜書き換えが必要です。
詳細は前回の記事を参照してください。

<!-- highlight.js - Nord Color Scheme -->
<link rel="stylesheet"
      href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.1.2/build/styles/nord.min.css">
<script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.1.2/build/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

クリック後のハイパーリンクの色の変更

変更前

変更前は、デフォルトの文字色のままでした。
デフォルトなので、スタイルシートにも特に何も書いていません。

hyperlink-default

変更後

変更後は、クリック後のハイパーリンクをクリック前と同じ文字色となるように設定しました。

hyperlink-customized

スタイルシートに以下の行を追加しました。

/* クリック済みのハイパーリンクの色変更 */
.entry-content a:visited {
    color: #1a95bd;
}

見出し2, 見出し3 に対する項番自動付与の廃止

見出し部分の文字数が増える割に、項番部分は画像と同様に文字列検索などに使えないため廃止しました。

変更前

title-section-old

変更後

title-section

スタイルシートの以下2箇所において、 content の行をコメントアウトしました。

/* 見出し2に項番の文字列自動挿入 */
.entry-content h2::before {
    color: #888888;
    /*content: counter(h2) ". ";*/ /* 手前に文字列挿入。"1. " のような形式 */
}

/* 見出し3に項番の文字列自動挿入 */
.entry-content h3::before {
    color: #888888;
    /*content: counter(h2) "." counter(h3) ". ";*/
}

強調文字列の蛍光ペンの色を薄く、線を細くした

微々たる差...ですが、ちょっと目に優しくなりました。

変更前

strong-old

変更前のスタイルシートは以下の内容でした。

.entry-content strong {
    background: linear-gradient(rgba(246, 210, 139, 0) 60%, rgba(246, 210, 139, 1) 60%);  
    border-radius: 2px; /* 角を丸める */
}

変更後

strong

変更後のスタイルシートは以下の内容です。

.entry-content strong {
    background: linear-gradient(rgba(246, 210, 139, 0) 65%, rgba(255, 225, 150, 1) 65%);
    border-radius: 2px; /* 角を丸める */
}

段落の広すぎるインデント幅を調整

変更前

ブラウザにも依ると思います。
Google Chrome の場合、ブラウザ組み込みのCSS (User Agent Stylesheet) により、段落のインデント幅が40pxになっていました。
広すぎ！

toc-old

Google Chrome の User Agent Stylesheet はこのような内容です。
padding-inline-start が悪さをしています。

ul {
    display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
}

ol {
    display: block;
    list-style-type: decimal;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
}

変更後

インデントを1文字分に変更しました。

toc

スタイルシートに以下の行を追加しています。

ol, ul {
    padding-inline-start: 1em;
}

2020/9/11 (微改善) コードブロック下部に余白を追加

変わったこと

従来は、本文中にコードブロックを挿入したときに上には余白が大きめに空いていたのですが、下の余白が小さめでした。
今回、下の余白を少し大きくすることでバランスを整えました。

更新前

※記載なし

更新後

デザインCSSに以下を追加。

/* コードブロック下部の余白調整 */
.entry-content pre {
    margin-bottom: 2em;
}

2018/11/18 (修正) 見出し3, 4が誤った番号で採番される問題を修正

修正前

「2.3. 見出し3」の部分が不具合です。

1. 見出し2
1.1. 見出し3
1.2. 見出し3

2. 見出し2
2.3. 見出し3

修正後

本来は、「2.1. 見出し3」になるのが正です。

1. 見出し2
1.1. 見出し3
1.2. 見出し3

2. 見出し2
2.1. 見出し3

修正方法

スタイルシートの .entry-content h2 と @media screen and (min-width:641px) の部分を以下のものに差し替えてください。
スタイルシートの設定箇所は、お手数ですが冒頭のリンクから元記事を参照してください。

.entry-content h2 {
    background: #f4f4f4;
    border-left: 9px solid #1a95bd;
    border-radius: 5px;  /* 角を丸くする */
    counter-increment: h2; /* h2という変数に1を足す */
    counter-reset: h3 h4; /* h3, h4という変数を0に戻す */
    font-size: 20px;
    font-weight: bold;
    line-height: 1.5em;
    margin: 60px 0 10px 0;
    padding: 20px 10px 17px 15px;
}

/* 【タブレット、PC限定】 */
@media screen and (min-width:641px) {
    .entry-content h2 {
        background: #f4f4f4;
        border-left: 9px solid #1a95bd;
        border-radius: 5px;  /* 角を丸くする */
        counter-increment: h2; /* h2という変数に1を足す ※初期値は0 */
        counter-reset: h3 h4; /* h3, h4という変数を0に戻す */
        font-size: 30px;
        font-weight: bold;
        line-height: 1.5em;
        margin: 60px 0 10px 0;
        padding: 20px 10px 17px 15px;
    }
}

(参考) どう間違えていたか？

同じセクション内にcounter-resetを2行書くと、どちらか片方が無視されるようです。
2つの変数を一度にcounter-resetしたい場合は、スペース区切りで変数を指定する必要があります。

↓ 良くない例

.entry-content h2 {
    /* (中略) */
    counter-reset: h3;  /* h3という変数を0に戻す */
    counter-reset: h4; /* h3という変数を0に戻す */
    /* (中略) */
}

↓良い例

.entry-content h2 {
    /* (中略) */
    counter-reset: h3 h4; /* h3, h4という変数を0に戻す */
    /* (中略) */
}

終わりに

更新履歴もだいぶ溜まってきました。
頃合いを見てGitHub管理へ移行して、更新差分もRelease Notes に書く形式にするかもしれません。

CSSを見ていてお気づきの点があれば、コメント欄などで教えて頂けますと幸いです。
見ていただいてありがとうございました。