記事のトップに更新日時も表示する【脱jQuery】【脱sitemap.xml利用】【オリジナル】（はてなブログ改造計画）
記事のトップに更新日時も表示する方法です。
すでにたくさんの方が同様の記事を書いていますが、なんやかんやでオリジナルな実装になりました。
こちらを使いませんでした
これらは使いませんでした。
- jQuery の利用
- sitemap.xml の利用（
$.ajax(...)で自ブログに再アクセスする仕組み） - FontAwesome の利用
- 既存の「はてなブログ 更新日」でググってヒットする記事
上記の 1. と 2. と 3. は私の好みではなかったから避けました。（理由は「方針」の項にて。）
既存の記事（4. です）はこの3つに抵触しているものがほとんどだったので使えなかったです。なので、 1. と 2. と 3. が問題なしと思う人なら既存の記事で全然OKだと思います。「はてなブログ 更新日」でググってヒットする記事がたくさんありますので、その中からお好きなものを使っても良いでしょう。（抵触してなかったけどテンプレートの違いなのか上手く動かないものもあったなー。）
逆に、これらを使いました。
- JavaScript の標準関数の利用【脱jQuery】【脱外部ライブラリ】
- JSON-LDの利用【脱sitemap.xml利用】
- はてなブログ搭載済みのアイコンの利用【脱FontAwesome】【脱外部ライブラリ】
- 追加する更新日は
<span>タグにする（非<time>タグ）
コッチの方がいいじゃんという方は、当記事が参考になれば幸いです。尚、なぜこうしたかのお話は「方針」の項に任せます。
変更内容
記事ヘッダーに更新日も表示されるようになりました。ついでに、作成日のデザインも変更しています。
仕様
以下のような仕様になっています。
- 「更新日」は、「作成日」の右隣に表示します。
- 【変更可】「更新日」は、「作成日」と日付が異なる場合のみ表示します。
- 日付はハイフンつなぎの
yyyy-MM-dd形式にしています。 - 【変更可】日付の前にアイコンを、後ろに「作成」or「更新」という文言を付けています。
- 【変更可】追加する「更新日」は
<span>タグです。 - 「作成日」のリンクはそのまま残し、「更新日」にリンクは付けません。
ここで【変更可】と書いている項目は、「変更方法」の項の中で対処方法を書いています。
ちなみに、『「更新日」は、「作成日」と日付が異なる場合のみ表示』としている理由は、カテゴリーの設定ミスやタグの付け忘れなど、ちょっとしたミスで更新することが結構あるからです。その場合は「更新してないよ」って体裁にするという考えです。この点も【変更可】ですので、一律表示したい方は以下の文章を読んで対応してください。
変更方法
HTML, JavaScript の変更手順
管理画面から以下のようにたどります。
デザイン ＞ レンチマーク ＞ サイドバー ＞ ヘッダ
ここに次項にある「追加 HTML, JavaScript」の内容を追記します。
追加 HTML, JavaScript
<!-- 記事ヘッダーの作成日・更新日 --> <script> document.addEventListener('DOMContentLoaded', function () { // 各要素を取得 const jsonld = JSON.parse( document.querySelectorAll('head script[type="application/ld+json"]')[0] .innerText ); // JSON-LD const datePublished = jsonld.datePublished; // 作成日文字列 const dateModified = jsonld.dateModified; // 更新日文字列 const entryDate = document.querySelector('header.entry-header .entry-date'); // 日付表示領域 // 取得できなかったら処理終了 if (!jsonld) return; if (!datePublished) return; if (!dateModified) return; if (!entryDate) return; // 「更新日要素」を作成 const modifiedElm = document.createElement('span'); // ！！！注意 1！！！ modifiedElm.innerText = dateModified.substr(0, 10); modifiedElm.className = 'modified-date'; // 日付が違った場合は「更新日要素」を追加 if (datePublished.substr(0, 10) !== dateModified.substr(0, 10)) { // ！！！注意 2！！！ entryDate.appendChild(modifiedElm); } // ！！！注意 2！！！ }); </script>
このスクリプトを利用される場合の注意事項です。
- 「更新日」を
spanタグで追加しています。任意のタグ（timeとか）に変更してもOKです。 CSS にも影響はありません。（ただし、インライン要素にしてください。） - 「作成日」と「更新日」が同日だった場合は「更新日」を表示しないようにしています。「更新日」を必ず表示させたい場合は「！！！注意 2！！！」が書かれている
if(...) {と}の行を削除してください。
CSS の変更手順
管理画面から以下のようにたどります。
デザイン ＞ レンチマーク ＞ デザインCSS
ここに追記をします。
追加CSS
/* 記事ヘッダーの作成日・更新日 */ .entry-header .entry-date { color: #6f8383; /* ！！！注意 1！！！ */ } .entry-header .entry-date a time { font-size: 0; } .entry-header .entry-date a time > span { font-size: .9rem; } .entry-header .entry-date a time::before { /* ！！！注意 2！！！ */ font-family: blogicon; content: "\f03a"; /* blogicon-calendar */ font-size: .9rem; margin-right: 3px; } .entry-header .entry-date a time::after { /* ！！！注意 3！！！ */ content: "作成"; font-size: .9rem; margin-left: 3px; } .entry-header .entry-date .modified-date { font-size: .9rem; margin-left: 10px; } .entry-header .entry-date .modified-date::before { /* ！！！注意 2！！！ */ font-family: blogicon; content: "\f02b"; /* blogicon-repeat */ font-size: .9rem; margin-right: 3px; } .entry-header .entry-date .modified-date::after { /* ！！！注意 3！！！ */ content: "更新"; font-size: .9rem; margin-left: 3px; }
この設定を利用される場合の注意事項です。
- 文字色です。任意の色に設定してください。
- 先頭にアイコンを追加する設定です。不要な場合はこのブロックを丸ごと削除してください。
- お尻に「作成」と「更新」という文字を追加する設定です。不要な場合はこのブロックを丸ごと削除してください。
説明（開発者向け）
今回の対応方針と、追加した JavaScript と CSS の実装内容の説明です。利用するだけの人は読まなくても大丈夫です。
方針
先にも書きましたが、以下の方針で作成しました。
- JavaScript の標準関数の利用【脱jQuery】【脱外部ライブラリ】
- JSON-LDの利用【脱sitemap.xml利用】
- はてなブログ搭載済みのアイコンの利用【脱FontAwesome】【脱外部ライブラリ】
- 追加する更新日は
<span>タグにする（非<time>タグ）
以下に説明を続けます。
脱jQuery、脱FontAwesome
- jQuery , FontAwesome を読み込むこと
- jQuery に依存すること
が嫌だったので使わない方法にしました。
jQuery は偉大でしたが、まあ使わなくなりつつあるのは時流でしょうしね。
FontAwesome は全然使っていいと思ってますが、外部ファイルを読み込むのが嫌だったのでやめました。はてなブログには既に搭載済みのオリジナルアイコンがありましたので、こちらを利用することにしました。
上記の記事に利用可能なアイコンがまとまっていました。ありがたく利用させていただきました。
JSON-LD
JSON-LD って何でしょ？
はてなブログの HTML 内にはこういうタグが含まれています。コイツです。
<script type="application/ld+json"> { "@context": "http://schema.org", "@type": "Article", "dateModified": "2021-01-27T05:26:39+09:00", "datePublished": "2015-12-29T19:22:48+09:00", "headline": "はてなブログで目次を表示するようにしました", "image": [ "https://cdn-ak.f.st-hatena.com/images/fotolife/h/hiranoon/20210115/20210115013559.png" ] } </script>
こいつは何なのかって説明は Google さんの説明に任せましょう。以下に引用します。（引用は「構造化データ ≒ JSON-LD」として読むと理解しやすい。）
ページに構造化データを含めて、ページの内容についての明白な判断材料を提供すると、Google でそのページをより正確に理解できるようになります。 構造化データとは、ページに関する情報を提供し、ページ コンテンツ（中略）を分類するために使用される、標準化されたデータ形式です。
要は、 Google や Twitter など向けに、記事の情報を調べるのが楽になるようブログ側が提供してあげるデータということです。その標準規格が JSON-LD です。
この JSON-LD は既にはてなブログに含まれているので、こいつを利用すれば楽なんじゃないかと思った訳です。 sitemap.xml に再アクセスしたりなんて不要でしょう。
time タグ不使用の理由
これは前2項と違い、非常に弱い理由になります。以下は単なる使わない言い訳なので飛ばしてOKです。。。（一応書き残しておきます。）
実は、「作成日」には <time> タグが使われています。じゃあ「更新日」も <time> タグでいいじゃん、なんですけど、あえて <span> にしました。
MDN の <time> タグの説明を見てみましょう。
（前略）datetime 属性を使用して、機械可読な形式の日付を記述することができ、検索エンジンの結果を改善したりリマインダーなどの独自機能に使用したりすることができます。
「更新日」って JavaScript でムリヤリ後付けしている文字情報ですし、検索エンジン関係ない気がします。やるならちゃんとタグを作り込むべきでしょうが、それは面倒だしメンテも手間というのがあって、、、あえて「意味のない」飾りとして振る舞うべく <span> にしました。
まあ、横着ですね。 <time> タグでもいいと思います。本当はセマンティックに <time> タグにするべきなのかも知れませんね。
JavaScript の実装
ここから実装内容の説明になります。
JavaScript では「更新日」の HTML を追加するロジックが組まれています。
起動条件
document.addEventListener('DOMContentLoaded', function () { ... }); で、画面描画時に起動するようになっています。良くある処理ですね。この中に HTML を後付けで編集する処理が書かれています。
JSON-LD の取得
JSON-LD の取得方法は（自分でコードを考えるのが面倒だったのでググって、、、）こちらを利用しました。
querySelectorAll で取ってきて JSON.parse(...) するだけ。ワンライナーだし良き。シンプル・イズ・ベスト！ 尚、今回はセレクタに head を加える変更を行っています。
const jsonld = JSON.parse( // セレクタの先頭に「head 」を追加しています。 document.querySelectorAll('head script[type="application/ld+json"]')[0] .innerText ); const datePublished = jsonld.datePublished; const dateModified = jsonld.dateModified;
HTML から <script type="application/ld+json"> を取得して利用します。
どうもはてなブログでは「パンくず」でも <script type="application/ld+json"> が使われているようです。セレクタに <head> 配下という指定を追加したのはこういう事情があります。
取得した JSON-LD から作成日時と更新日時を抽出しています。ちなみに、取得した日付文字列は 2021-01-27T05:26:39+09:00 のような形式になっています。
「更新日要素」を作成
「更新日」を <span> タグとして作成しています。前述の通り、このタグは <time> にしてもOK。
// 「更新日要素」を作成 const modifiedElm = document.createElement('span'); modifiedElm.innerText = dateModified.substr(0, 10); // 先頭10文字で年月日を取得 modifiedElm.className = 'modified-date'; // CSS のために class を付けておく
同日でなければ日付表示領域に「更新日要素」を追加
「作成日文字列」の年月日と、「更新日文字列」の年月日が合致した場合は表示させない仕様にしています。
同日でなかったなら、日付を表示する領域の中に「更新日要素」を追加します。
const entryDate = document.querySelector('header.entry-header .entry-date'); // 日付表示領域 // ... // 日付が違った場合は「更新日要素」を追加 if (datePublished.substr(0, 10) !== dateModified.substr(0, 10)) { entryDate.appendChild(modifiedElm); // ちょうど作成日の後ろに入ります。 }
出力結果
ということで、上記スクリプトにより、以下のような HTML が生成されます。
<div class="date entry-date first"> <a href="https://multimineral-tech.com/archive/2021/02/05" rel="nofollow"> <time datetime="2021-02-04T16:23:37Z" title="2021-02-04T16:23:37Z"> <span class="date-year">2021</span><span class="hyphen">-</span ><span class="date-month">02</span><span class="hyphen">-</span ><span class="date-day">05</span> </time> </a> <span class="modified-date">2021-02-05</span><!-- 追加される！！！ --> </div>
以下のように表示されます。
こういう HTML になることを前提として、コイツを装飾していきます。
CSS の実装
疑似要素で前にアイコン、後ろに文言を追加
CSS の疑似要素 ::before と ::after で、アイコンと文言をそれぞれ追加します。
/* 作成日の前 */ .entry-header .entry-date a time::before { font-family: blogicon; content: "\f03a"; /* blogicon-calendar */ } /* 作成日の後 */ .entry-header .entry-date a time::after { content: "作成"; } /* 更新日の前 */ .entry-header .entry-date .modified-date::before { font-family: blogicon; content: "\f02b"; /* blogicon-repeat */ } /* 更新日の後 */ .entry-header .entry-date .modified-date::after { content: "更新"; }
はてなブログのアイコンはコードを指定して使います。先にも書きましたが、利用方法は下記の記事を参考にしています。
これらにより、以下のような表示が、
以下のように変わりました。
謎のスペースの除去
さて、「作成日」だけ謎のスペースが存在することに気が付きましたか？ カレンダーアイコンと日付文字列の間です。分かりますか？
HTML 中の改行やスペースが出力されてしまっているのが原因です。
「更新日」は HTML 中に無駄な改行やスペースがないので、謎のスペースが現れません。
「作成日」と「更新日」でズレがあると装飾がしにくいです。ですので、この謎のスペースを取り除いてから装飾を行います。今回は、一旦 font-size: 0; にして謎のスペースを非表示にする TIPS を利用します。
この TIPS の詳しい内容は以下の記事を参照ください。
その TIPS を追加した CSS が以下です。文字サイズを 0 にして非表示にしてから、「作成日」と「更新日」とそれぞれの前後のアイコン＆文言の計6ヶ所の font-size を上書き指定しています。
.entry-header .entry-date a time { font-size: 0; /* スペースもろとも配下の文字を消してしまう */ } .entry-header .entry-date a time > span { font-size: .9rem; /* 表示したいのでサイズを上書き */ } .entry-header .entry-date a time::before { font-family: blogicon; content: "\f03a"; font-size: .9rem; /* 表示したいのでサイズを上書き */ } .entry-header .entry-date a time::after { content: "作成"; font-size: .9rem; /* 表示したいのでサイズを上書き */ } .entry-header .entry-date .modified-date { font-size: .9rem; /* 表示したいのでサイズを上書き */ } .entry-header .entry-date .modified-date::before { font-family: blogicon; content: "\f02b"; font-size: .9rem; /* 表示したいのでサイズを上書き */ } .entry-header .entry-date .modified-date::after { content: "更新"; font-size: .9rem; /* 表示したいのでサイズを上書き */ }
これらにより、以下のような表示が、
以下のように変わりました。
地味ですが、謎のスペースが取り除かれ、「作成日」と「更新日」が（文字色以外は）同じ表示となりました。
余白と文字色の調整
ここまで来たらあとは簡単。文字色と余白を調整するだけです。以下のコード中のコメント部分を追加しました。
.entry-header .entry-date { color: #6f8383; /* 色変更 */ } .entry-header .entry-date a time { font-size: 0; } .entry-header .entry-date a time > span { font-size: .9rem; } .entry-header .entry-date a time::before { font-family: blogicon; content: "\f03a"; font-size: .9rem; margin-right: 3px; /* 余白追加 */ } .entry-header .entry-date a time::after { content: "作成"; font-size: .9rem; margin-left: 3px; /* 余白追加 */ } .entry-header .entry-date .modified-date { font-size: .9rem; margin-left: 10px; /* 余白追加 */ } .entry-header .entry-date .modified-date::before { font-family: blogicon; content: "\f02b"; font-size: .9rem; margin-right: 3px; /* 余白追加 */ } .entry-header .entry-date .modified-date::after { content: "更新"; font-size: .9rem; margin-left: 3px; /* 余白追加 */ }
これらにより、以下のような表示が、
以下のように変わりました。
めでてぇ。
あとがき
なんやかんやでオジリナルな実装を書いてみました。 JavaScript と CSS 、思ったより長くない実装になりました。
多分、はてなブログであれば動くと思います。あと、スマートフォン用の対応は別途必要になるかも知れません。レスポンシブにしていればこの記事の内容のみで行けると思います。
ということで、当記事が参考になったなら幸いでございます。
HTML 内のスペースや改行による「ズレ」を除去する TIPS
HTML 内のスペースや改行により「ズレ」が発生することがあります。これを除去する TIPS の紹介です。
この記事は、私が遭遇した問題と解決策の共有です。数ある「ズレ」の要因の一つであり、一つの解決方法の紹介になります。この文章を読んでいただいている方の症状と合致したなら幸いです。
現象
以下、「カレンダーアイコン」（ time::before ）と「2021」の部分（ span.date-year ）の間に謎のスペースがあるのがおわかりいただけるだろうか？（ちょっと分かりにくいけど。）
どちらにも、 margin も padding もありません。ブラウザがもつ初期スタイルでもありません。（もしこれが原因だったら）
原因 : HTML中のスペース
HTML 文章中にスペースがあったためです。
HTML 文章中の、半角スペース、改行、タブ文字は、いくら連続していても一つの半角スペースとして表示される仕様になっています。謎のスキマの原因はコイツです。
HTML の関連する部分を抜き出し、ついでに擬似要素の ::before も追記すると、だいたい以下のようになっています。
<time datetime="2021-02-04T16:23:37Z" title="2021-02-04T16:23:37Z"> ::before<!-- CSSによって追加された疑似要素 --> <span class="date-year">2021</span><span class="hyphen">-</span><!-- 以下略 --> </time>
::before と <span class="date-year"> の間の改行と複数の半角スペースがあります。コイツらが一つの半角スペースとして表示されていたのです。
こいつがデザイン上の悪さをするので削除したいという訳です。
対策 : 親要素を font-size: 0 にする
親要素を font-size: 0 にするというのが今回の解決策です。
どういうことかというと、表示された一つの半角スペースを font-size: 0 にすることで非表示にするという手法です。
✕ : 表示されるのを抑制する。
◯ : 表示されるけどサイズを 0 にして見えなくする。
表示したい子要素はそれぞれ font-size を指定します。それにより、親要素で非表示にされた設定が上書きされます。これにより、スペースは非表示のままで、表示したい要素のみ表示されます。
CSS の対応例
今回の場合は下記の CSS で対応できます。
time { font-size: 0; /* 親要素。配下はスペース含めて見えなくする */ } time > span { font-size: .9rem; /* 子要素。サイズを上書きして見えるようにする */ } time::before { font-size: .9rem; /* 子要素。サイズを上書きして見えるようにする */ }
先程の HTML を簡略化して再掲載します。上記の CSS の設定は、下記のコメントの通りに効きます。
<time> <!-- 親要素。配下の文字はサイズ 0 にしているので見えない --> ::before <!-- 子要素。 ::before をサイズ指定したので見える --> <span>2021</span> <!-- 子要素。 span をサイズ指定したので見える --> <span>-</span> <!-- 子要素。 span をサイズ指定したので見える --> <!-- 中略 --> </time>
結果、以下のようになりました。見事スペースは消え去りました。
その他の案（そもそも、、、）
原因は HTML 内のスペースですから、そもそも HTML から改行やスペースを消せば解決します。これが可能であればそれでもOKです。（いや、むしろこれができれば苦労しないんですよね、大抵の場合。。。）
この後は、、、
この後は、 CSS で margin や padding などを使ってデザインを整えていくとよいでしょう。以上でした！
目次と見出しに入れ子の連番を振る（はてなブログ改造計画）
目次と見出しに入れ子の連番を追加する方法です。
見出しに「1-1」や「2-3-1」といった章や節にあたるような番号を付加し、読んでいる位置を分かりやすくすることが目的です。
変更内容
記事内の目次、見出しが下記のようなデザインになりました。
目次の変更
目次だけを切り出すと以下のようになります。これで番号の振られ方のイメージが湧いたでしょうか。こんな感じです。
見出しの変更
先程の目次に対応した記事中の見出しはこんな感じになります。
補足）はてなブログは通常 h3, h4, h5 が使われるようです
下記の記事でも書きましたが、、、
設定の「編集モード」を「見たままモード」か「はてな記法モード」にしている場合は、 <h3> , <h4> , <h5> の3つが使われることになります。
なのですが、設定の「編集モード」を「Markdownモード」にしていると <h1> から <h6> まで自由に使えます。
以降では、これらそれぞれに対応した CSS を掲載しています。真似をされる場合はこの点を注意して取り込んでください。
変更方法
変更手順
管理画面から以下のようにたどります。
デザイン ＞ レンチマーク ＞ デザインCSS
ここに追記をします。
追加CSS
通常（大見出し、中見出し、小見出し）の3つのみを使っている人はこちら。
/* 記事内の目次への連番付与 */ .entry-content ul.table-of-contents, .entry-content ul.table-of-contents ul { counter-reset: cnt; list-style: none; } .entry-content ul.table-of-contents li:before { content: counters(cnt, '-'); counter-increment: cnt; font-size: 0.9em; margin-right: 5px; } /* 記事内の見出しへの連番付与 */ .entry-content { counter-reset: cnt-h3; } .entry-content h3 { counter-reset: cnt-h4; } .entry-content h3::before { counter-increment: cnt-h3; content: counter(cnt-h3); } .entry-content h4 { counter-reset: cnt-h5; } .entry-content h4::before { counter-increment: cnt-h4; content: counter(cnt-h3) '-' counter(cnt-h4); } .entry-content h5::before { counter-increment: cnt-h5; content: counter(cnt-h3) '-' counter(cnt-h4) '-' counter(cnt-h5); } .entry-content h3::before, .entry-content h4::before, .entry-content h5::before { margin: 0 0.3em; }
うちみたいに <h2> から <h6> を使っているひとはこちら。
/* 記事内の目次への連番付与 */ .entry-content ul.table-of-contents, .entry-content ul.table-of-contents ul { counter-reset: cnt; list-style: none; } .entry-content ul.table-of-contents li:before { content: counters(cnt, '-'); counter-increment: cnt; font-size: 0.9em; margin-right: 5px; } /* 記事内の見出しへの連番付与 */ .entry-content { counter-reset: cnt-h2; } .entry-content h2 { counter-reset: cnt-h3; } .entry-content h2::before { counter-increment: cnt-h2; content: counter(cnt-h2); } .entry-content h3 { counter-reset: cnt-h4; } .entry-content h3::before { counter-increment: cnt-h3; content: counter(cnt-h2) '-' counter(cnt-h3); } .entry-content h4 { counter-reset: cnt-h5; } .entry-content h4::before { counter-increment: cnt-h4; content: counter(cnt-h2) '-' counter(cnt-h3) '-' counter(cnt-h4); } .entry-content h5 { counter-reset: cnt-h6; } .entry-content h5::before { counter-increment: cnt-h5; content: counter(cnt-h2) '-' counter(cnt-h3) '-' counter(cnt-h4) '-' counter(cnt-h5); } .entry-content h6::before { counter-increment: cnt-h6; content: counter(cnt-h2) '-' counter(cnt-h3) '-' counter(cnt-h4) '-' counter(cnt-h5) '-' counter(cnt-h6); } .entry-content h2::before, .entry-content h3::before, .entry-content h4::before, .entry-content h5::before, .entry-content h6::before { margin: 0 0.3em; }
説明
以降、設定した CSS の説明です。
最初に、目次と見出しではそれぞれ別の方法で番号を振っています。 CSS をうまいことやってどちらも同じ数字が振られるように実装しています。ということで、別物であるという前提で読んでいただければと思います。
記事内の目次への連番付与
目次の <ul> に対する装飾と、 <li> の :before 疑似要素に対する装飾の2つを記載しています。
.entry-content ul.table-of-contents, .entry-content ul.table-of-contents ul { counter-reset: cnt; /* 1 */ list-style: none; } .entry-content ul.table-of-contents li:before { content: counters(cnt, '-'); /* 3 */ counter-increment: cnt; /* 2 */ font-size: 0.9em; margin-right: 5px; }
疑似要素 :before
<li> の :before 疑似要素は、 <li> タグの直前に表示する文言を後付けできる機能です。 content: プロパティで指定した内容が画面上の <li> の前に表示されます。
カウンター
次に表示する内容です。
今回は CSS のカウンターを利用しました。
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters
使ったのは3つです。
- 1
counter-reset: 変数: カウンター変数の用意と初期化 - 2
counter-increment: 変数: カウンターの値のカウントアップ - 3
counters(変数, つなぎ文字): カウンターを使った文字列を生成
カウンター変数の用意と初期化
1 では、 <ul> タグが出現するたびに cnt という変数が初期値ゼロで用意されることを意味します。分かりにくいですが、 <ul> タグの数だけカウンターが用意されるということです。
<ul> <!-- 1つ目の変数発生 => A --> <li>大見出しⅰ</li> <ul><!-- 2つ目の変数発生 => B --> <li>中見出しⅰ-ⅰ</li> <li>中見出しⅰ-ⅱ</li> </ul> <li>大見出しⅱ</li> <ul><!-- 3つ目の変数発生 => C --> <li>中見出しⅱ-ⅰ</li> <li>中見出しⅱ-ⅱ</li> </ul> </ul>
<ul> の数だけ発生するので、合計3つのカウンターが発生します。CSS 上は cnt という変数名ですが、3つの別々の変数として動きますので注意してください。いや、言い方もヤヤコシイ。。。上記の HTML のコメントに書きましたが、便宜上 A, B, C という3つの変数（という言い方も変だが説明上。。。）に別々の値がキープされるイメージとなります。
カウンターの値のカウントアップ
2 では、カウンターがカウントアップされます。2 は <li> で定義されていますから <li> が出現するたびにカウントアップです。
<ul> <!-- A用意 --> <li>大見出しⅰ</li> <!-- A をカウントアップ => 1 --> <ul><!-- B用意 --> <li>中見出しⅰ-ⅰ</li> <!-- B をカウントアップ => 1 --> <li>中見出しⅰ-ⅱ</li> <!-- B をカウントアップ => 2 --> </ul> <li>大見出しⅱ</li> <!-- A をカウントアップ => 2 --> <ul><!-- C用意 --> <li>中見出しⅱ-ⅰ</li> <!-- C をカウントアップ => 1 --> <li>中見出しⅱ-ⅱ</li> <!-- C をカウントアップ => 2 --> </ul> </ul>
カウンターを使った文字列を生成
3 はカウンターを表示するための文字列を作る関数です。（後で説明する counter(変数) とは別物なので注意。） counters(変数, つなぎ文字) で、内側にも存在するすべてのカウンターをつなぎ文字で繋げた文字にします。
<ul> <!-- A用意 --> <li>大見出しⅰ</li> <!-- A => 1 --> <!-- Aしかない => 1 --> <ul><!-- B用意 --> <li>中見出しⅰ-ⅰ</li> <!-- B => 1 --> <!-- AとBがある => A + "-" + B) => 1-1 --> <li>中見出しⅰ-ⅱ</li> <!-- B => 2 --> <!-- AとBがある => A + "-" + B) => 1-2 --> </ul> <li>大見出しⅱ</li> <!-- A => 2 --> <ul><!-- C用意 --> <li>中見出しⅱ-ⅰ</li> <!-- C => 1 --> <!-- AとCがある => A + "-" + C) => 2-1 --> <li>中見出しⅱ-ⅱ</li> <!-- C => 2 --> <!-- AとCがある => A + "-" + C) => 2-2 --> </ul> </ul>
<li>中見出しⅱ-ⅰ</li> , <li>中見出しⅱ-ⅱ</li> の部分では、内側に B がないので A と C だけをくっつけた文字になります。
こんな感じの理屈でブラウザでは以下のような表示になります。
- 1 大見出しⅰ - 1-1 中見出しⅰ- - 1-2 中見出しⅰ-ⅱ - 2 大見出しⅱ - 2-1 中見出しⅱ-ⅰ - 2-2 中見出しⅱ-ⅱ
記事内の見出しへの連番付与
記事中にある <h2> から <h6> に振る連番です。
/* 記事内の見出しへの連番付与 */ .entry-content { counter-reset: cnt-h2; } .entry-content h2 { counter-reset: cnt-h3; } .entry-content h2::before { counter-increment: cnt-h2; content: counter(cnt-h2); } .entry-content h3 { counter-reset: cnt-h4; } .entry-content h3::before { counter-increment: cnt-h3; content: counter(cnt-h2) '-' counter(cnt-h3); } /* 中略 */ .entry-content h2::before, .entry-content h3::before, .entry-content h4::before, .entry-content h5::before, .entry-content h6::before { margin: 0 0.3em; }
カウンター
目次と同様に CSS のカウンターを利用しました。
記述量が多いだけで、目次よりも単純な仕組みですので、目次との違いだけ解説します。
使ったのは3つです。
- 1
counter-reset: 変数: カウンター変数の用意と初期化 - 2
counter-increment: 変数: カウンターの値のカウントアップ - 3
counter(変数): カウンターを使った文字列を生成
目次と違うのは 3 の部分が counters(変数, つなぎ文字) ではなく counter(変数) であることです。
それと、 1 と 2 の定義が <h2> から <h6> までそれぞれでなされていることです。
カウンター変数の用意と初期化とカウントアップ
cnt-h2 , cnt-h3 のようにタグ毎に変数を用意しています。
初期化のタイミングは親にあたるタグにしています。具体的には、 <h3> であれば <h2> が、 <h4> であれば <h3> が登場するタイミングです。（ <h2> は記事の最初で初期化した。）
.entry-content { /* 親に当たるタグで初期化。 cnt-h2 は記事の最初 */ counter-reset: cnt-h2; } .entry-content h2 { /* 親に当たるタグで初期化。 cnt-h3 は h2 */ counter-reset: cnt-h3; } .entry-content h3 { /* 親に当たるタグで初期化。 cnt-h4 は h3 */ counter-reset: cnt-h4; }
カウントアップは単純に cnt-h2 は <h2> が登場したらカウントアップします。
.entry-content h2::before { counter-increment: cnt-h2; /* cnt-h2 は h2 でカウントアップ */ content: counter(cnt-h2); } .entry-content h3::before { counter-increment: cnt-h3; /* cnt-h3 は h3 でカウントアップ */ content: counter(cnt-h2) '-' counter(cnt-h3); }
HTML 上では下記のような動きになります。
<div class="entry-content"><!-- cnt-h2 初期化 => 0 --> <h2>大見出しⅰ</h2> <!-- cnt-h3 初期化 => 0 --><!-- cnt-h2 増加 => 1 --> <h3>中見出しⅰ-ⅰ</h3> <!-- cnt-h3 増加 => 1 --> <h3>中見出しⅰ-ⅱ</h3> <!-- cnt-h3 増加 => 2 --> <h2>大見出しⅱ</h2> <!-- cnt-h3 初期化 => 0 --><!-- cnt-h2 増加 => 2 --> <h3>中見出しⅱ-ⅰ</h3> <!-- cnt-h3 増加 => 1 --> <h3>中見出しⅱ-ⅱ</h3> <!-- cnt-h3 増加 => 2 --> </div>
カウンターを使った文字列を生成
counter(変数) は単に 変数 をそのまま表示するだけの機能です。 counters(変数, つなぎ文字) のような複雑な機能ではありません。counter(cnt-h2) '-' counter(cnt-h3); とあるように、タグごとの変数をくっつけた文字列を書いています。
目次では、 <ul> が入れ子になり、「内側にも存在するすべてのカウンターをつなぎ文字で繋げた文字」を作る方法は有効でした。ですが <h2> から <h6> までのタグは入れ子にはなりません。
ですので、 counters(変数, つなぎ文字) が使えず、 counter(変数) を駆使して表示したい文字列を作った、という訳です。
<div class="entry-content"> <h2>大見出しⅰ</h2> <!-- cnt-h2 を表示 => 1 --> <h3>中見出しⅰ-ⅰ</h3> <!-- cnt-h2 + "-" + cnt-h3 を表示 => 1-1 --> <h3>中見出しⅰ-ⅱ</h3> <!-- cnt-h2 + "-" + cnt-h3 を表示 => 1-2 --> <h2>大見出しⅱ</h2> <!-- cnt-h2 を表示 => 2 --> <h3>中見出しⅱ-ⅰ</h3> <!-- cnt-h2 + "-" + cnt-h3 を表示 => 2-1 --> <h3>中見出しⅱ-ⅱ</h3> <!-- cnt-h2 + "-" + cnt-h3 を表示 => 2-2 --> </div>
見出し（header）のデザインを変更（はてなブログ改造計画）
見出しのデザインを変更する方法です。ここで言う見出しとは <h3>...</h3> などのタグを指します。まあ、 CSS をちょい足ししただけですけど。
変更内容
記事内の見出しが下記のようなデザインになりました。
補足）はてなブログは通常 h3, h4, h5 が使われるようです
以下、蛇足ではありますが、、、
設定の「編集モード」を「見たままモード」か「はてな記法モード」にしている場合は、 h3 , h4 , h5 の3つが使われることになります。エディタ上で選択できる「大見出し」「中見出し」「小見出し」がそれぞれ対応しています。
なのですが、設定の「編集モード」を「Markdownモード」にしていると h1 から h6 まで自由に使えます。
うちのブログでは h2 から h6 を使って書くようにしています。 h1 は使わないルールにしています。 h6 は使うことはないでしょうけど、一応設定は追加しました。
変更方法
変更手順
管理画面から以下のようにたどります。
デザイン ＞ レンチマーク ＞ デザインCSS
ここに追記をします。
追加CSS
/* 記事内のヘッダーの装飾 */ .entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6 { margin: 1.5em 0 0.8em; line-height: 1.3; padding: 0; color: #333; border: none; } .entry-content h2 { font-size: 165%; line-height: 1.8; color: #fff; background-color: #fff; background: #444; } .entry-content h3 { font-size: 140%; padding: 5px 0; background-color: #e9f0f2; border-top: 2px solid #444; border-bottom: 2px solid #444; } .entry-content h4 { font-size: 130%; border-bottom: 1px solid #444; } .entry-content h5 { font-size: 120%; } .entry-content h6 { font-size: 100%; }
説明
以降、設定した CSS の説明です。
h2 から h6 までのすべての設定しておきます。これがデフォルト設定。
/* デフォルト設定 */ .entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6 { margin: 1.5em 0 0.8em; line-height: 1.3; border: none; padding: 0; }
その上で h2 から h6 それぞれで変更した設定を上書きします。 font-size だけは必ず設定するようにしているので先のデフォルト設定には入れてません。 h2 を例に取ると下記のコメントにあるような感じです。
.entry-content h2 { font-size: 165%; /* これは常に設定 */ line-height: 1.8; /* デフォルト設定の上書き */ background-color: #fff; /* デフォルト設定の上書き */ background: #444; /* デフォルト設定の上書き */ }
レスポンシブに対応する（はてなブログ改造計画）
レスポンシブに対応する方法です。
とは言え、ゼロからレスポンシブ対応は大変ですので、レスポンシブのテーマを利用することを前提に、そのレスポンシブの機能を利用する設定を追加する方法について書いています。
ですので、今回行うレスポンシブは、スマートフォン用の設定（はてなブログでは用意されている）は行わず、PC用の設定がスマートフォンにも適用されるよう設定することです。特に何も設定をしていないと、レスポンシブの対応がなされないことがあるので注意です。（私がそうでした。。。）
変更内容
スマートフォンでの表示時に、PC用の HTML と CSS が適用されます。下記の画像で言いますと、ヘッダのメニュー部分・パンくずの表示部分・カテゴリーのデザインは、PC用に追加した HTML と CSS が効いています。
変更方法
（前提）テーマの選択
ゼロからレスポンシブ対応は大変ですので、レスポンシブのテーマを利用することを前提にします。
テーマは公式のテーマストアから設定できます。ここで好みのテーマを探します。
ほとんどのテーマは、テーマストアのページ内で、レスポンシブ対応しているか書かれています。（書かれていないテーマは利用しないのが無難？）
もしくは、公式テーマであれば、管理画面から以下のようにたどってもテーマの選択ができます。
デザイン ＞ デザインテーママーク
選択中のテーマの確認方法
選択中のテーマが対応しているか確認方法の一例をあげておきます。
テーマの選択画面（管理画面 ＞ デザイン ＞ デザインテーママーク）から、選択してるテーマの情報マークをクリックします。
テーマの説明欄に、レスポンシブに対応しているか記載されていました。
とまあ、こんな感じでだいたい判断できると思います。
変更手順
選択したレスポンシブ対応のテーマが、ちゃんとレスポンシブするよう設定をします。
管理画面から以下のようにたどります。
デザイン ＞ スマートフォンマーク
ここから各項目に対してPC用の設定がスマートフォンにも適用されるように設定変更します。
設定内容
ヘッダ
- タイトル画像 : PCと同じ画像を表示する
- タイトル下 : PCと同じHTMLを表示する
記事
- 記事上下のカスタマイズ : PCと同じHTMLを表示する
- 記事ページにパンくずリストを表示する : チェックを入れる
#### フッタ
- フッタ : PCと同じHTMLを表示する
詳細設定
- レスポンシブデザイン : チェックを入れる
あとがき
とまあ、ここまで PC とスマートフォンを同じにする前提で設定を行ってきました。もちろんスマートフォンは独自の設定にしてもいいと思いますので、その辺りはお好みでどうぞ。
上部にカテゴリーのリンクを含んだグローバルメニューを追加（はてなブログ改造計画）
ページの上部にグローバルメニューを追加する方法です。別の記事で実施方法を書きましたが、当ブログはカテゴリーを3段まで使っています。グローバルメニューでは2段まで表示させています。
カテゴリーの記事はこちらでした。
こちらを使いました
こちらを利用させていただきました。
この内容をカスタマイズした内容を掲載されているこちらも参考になりました。
これらをベースに少しカスタマイズしています。
変更内容
ページの上部にグローバルメニューを追加しました。
こんな風に動きます。
階層がある場合はマウスカーソルを乗せると下位の階層が表示されます。
モバイルのような横幅の狭い端末ではメニューボタンに変わります。
メニューボタンをクリック（タップ？）すると、メニューが表示されます。
変更方法
HTML, JavaScript の変更手順
管理画面から以下のようにたどります。
デザイン ＞ レンチマーク ＞ サイドバー ＞ ヘッダ
ここに次項にある「追加 HTML, JavaScript」の内容を追記します。
追加 HTML, JavaScript
追記する HTML, JavaScript コードは先に紹介したこちらの記事を参照ください。（ほぼそのまま利用させていただきましたので、当該記事にて全ソースを掲載するのは控えておきます。）
当ブログではこの内容を更に編集しています。変更した点をピックアップします。
jQuery の読み込みを削除（他で読み込んでるから...）
jQuery の読み込みを削除しました。
<!-- 前略 --> <div style="clear:both"></div> <!-- ↓↓↓ここ↓↓↓ --> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <!-- ↑↑↑ここ↑↑↑ --> <script> $(function(){ // 後略
私の場合は、ですが、既に jQuery の別バージョンを読み込んでいるのでゴッチャゴッチャにならぬよう削除しました。
あと、使う場合でも HTTPS にした方が良い（ http://... を https://... に書き換えるのが良い）と思います。（元サイトさんが記事を作成した当時から世の中変わりましたからね。）
スクリプトを書き換える
スクリプトを書き換えました。以下は書き換え後です。ポイントは3つです。
document.addEventListener('DOMContentLoaded', function () { // (1) var menuBtn = $('#menu-btn'); var menuContent = $('#menu-content'); menuBtn.click(function () { menuContent.slideToggle(); }); $(window).resize(function () { var win = window.innerWidth; // (2) var p = 768; // (3) if (win > p) { menuContent.show(); } else { menuContent.hide(); } }); });
- Ready 関数を脱 jQuery
- 横幅の取得関数を
innerWidthに変更 - ブレークポイント（表示を切り替える横幅）を変更
順番に行きます。
(1) Ready 関数を脱 jQuery
$(function(){ を Ready 関数と呼んだりします。（画面読み込み後すぐに動く機能を書きます。）これを document.addEventListener('DOMContentLoaded', function () { に変更しています。後者が jQuery を使わない書き方になります。
この Ready 関数の動きのみがどうも調子良くありませんでした。画面初期描画時にはうまく jQuery を読み込めた状態になっていないのでしょう。（理由は不明だし、調べてすぐ諦めました。私の作った処理じゃないですし、他にもパーツが複数ありますし、紐解く意義もないでしょう。）なので、一旦ココだけ脱 jQuery をしています。
(2) 横幅の取得関数を innerWidth に変更
$(window).width() を window.innerWidth に変更しています。
これは画面の横幅のサイズを取得する関数（後者はプロパティ）です。前者はスクロールバーの幅を含みません。すると、 CSS で指定する幅とズレるんですね。これを避けるための変更になります。
(3) ブレークポイント（表示を切り替える横幅）を変更
うちのブログではちょうど 768px でサイドバーが表示されなくなります。このタイミングに合わせました。それだけですね。。。
CSS の変更手順
管理画面から以下のようにたどります。
デザイン ＞ レンチマーク ＞ デザインCSS
ここに次項にある「追加 CSS」の内容を追記します。
追加 CSS
追記する CSS コードは（HTML, JavaScript の時と同様に）先に紹介したこちらの記事を参照ください。そして、こちらも先に紹介した、追加変更について記載されたの記事を参照ください。（ほぼそのまま利用させていただきましたので、当該記事にて全ソースを掲載するのは控えておきます。）
当ブログではこの2つの記事の内容から更に編集しています。変更した点をピックアップします。
横幅を固定サイズにして中央揃え
元のデザインは「横幅いっぱいを分割して、各リンクに横幅を均等に割り当てよう」という考え方でした。
それを、(1)リンクの幅は固定幅にして、(2)全体を中央揃えにするよう変更しました。
#menu-content { padding-left: 0; margin: 0 auto; /* (2)ここ */ width: 600px; /* (1)ここ */ height: 100%; list-style-type: none; } #menu-content > li { position: relative; float: left; height: 100%; text-align: center; width: 200px; /* (1)ここ */ }
リンクの幅を 200px にしました。3つのリンクがあるので合わせて 600px です。んで、それを中央揃えするのに margin: 0 auto; としています。（ margin: 0 auto; で中央揃えになる理由は長くなるのでここでは説明を省きます。）
その他デザインの変更
あとはこのブログに合わせてデザインの変更をしています。
- 色の変更（背景色、文字色）
- 文字サイズの変更
- ブレークポイントを
768pxに変更（@media screen and (max-width: 768px)の部分です）
くらいですね。
あとがき
カテゴリーは3階層にしているので、グローバルメニューも3階層にしたいな、とは思ってます。ちょっとうるさい感じはするかもですけどね。
サイドバーのカテゴリーを階層化してパンくずを設置する（はてなブログ改造計画）
カテゴリーを階層化する方法です。以下の2点が変わります。
- サイドバーのカテゴリー欄が階層構造になる。
- 記事上部にパンくずリストが追加される。
尚、カテゴリー欄が階層構造だけ対応し、パンくずリストは追加しないことも可能です。
こちらを使いました
こちらのスクリプトを利用させていただきました。
なお、親カテゴリーを入力せずに済むという以下のサイトさんのスクリプトも利用者が多いようです。ただ、こちらのスクリプトは2層までの対応で、うちのように「親-子-孫」という3層には対応していなかったため、利用を断念しました。（自分でコードを書いてもいいけどそこまではしなかった。。。）
変更内容
サイドバーのカテゴリーが階層構造になり、三角マークのクリックで開閉します。
記事の上部にカテゴリー階層に応じたパンくずが追加されます。各カテゴリーはクリック可能です。
そのカテゴリーをクリックすると、カテゴリー内の記事の一覧が表示されます。
変更方法
JavaScript の変更手順
管理画面から以下のようにたどります。
デザイン ＞ レンチマーク ＞ サイドバー ＞ フッタ
ここに次項にある「追加 JavaScript」の内容を追記します。
追加 JavaScript
本来は HTML を書く部分です。 <script> タグを追加して JavaScript を直接書いています。
追記する JavaScript コードは先に紹介したこちらの記事を参照ください。 jQuery も含まれています。
CSS の変更手順 (2021/01/28 追記)
管理画面から以下のようにたどります。
デザイン ＞ レンチマーク ＞ デザインCSS
ここに追記をします。
追加CSS (2021/01/28 追記)
span.hatena-breadcrumb-plus-toggle-button { cursor: pointer; } span.hatena-breadcrumb-plus-toggle-button:hover { color: #005999 }
cursor: pointer で、マウスカーソルを当てたときに指マーク等になるように変更しました。また、カーソルを当てたときにより一層押せそうな感を高めるために擬似クラス :hover で色を変更しています。
尚、先に紹介したこちらの本家様では CSS が外部ファイルとして提供されています。リスト（ <li> ）の先頭のマークを除去したりとしておりました。が、当サイトでは独自形式にしてしまってます。特にこだわりがなければ本家様の CSS を利用される方がよいかと思います。
カテゴリーの作成ルール
「カテゴリー」は以下のルールで編集します。
親-子や親-子-孫という命名に変更する。親だけのカテゴリーを登録する。- 記事には
親カテゴリーも登録する。
カテゴリーの変更手順
今までのカテゴリーの変更は、管理画面の「カテゴリー」で行います。
カテゴリーの追加は記事の編集画面でしか行えません。過去記事のカテゴリーを見直すついでに追加すると良いと思います。
カテゴリー自体の変更
管理画面の「カテゴリー」より変更します。すべてのカテゴリーを以下のルールで編集します。
- カテゴリー名 :
親-子や親-子-孫という命名に変更する。 - 見出し : 最下層の命名に設定する。（
親-子なら子、親-子-孫なら孫）
「見出し」はカテゴリー一覧（パンくずリストのカテゴリーをクリックしたときなどで遷移する画面）の上部に表示されるタイトル文言です。「親-子」のような表示ではなく「子」を表示させたい場合は対応を行います。「親-子」という表示で良ければ対応不要です。
記事毎のカテゴリーの対応とカテゴリーの追加
管理画面の「記事の管理」から過去記事の「編集」を行います。カテゴリーを以下のように見直します。（面倒くさいですよ。。。）
親だけのカテゴリーを追加する。（親-子-孫なら親と親-子を追加する。）カデコリの並び順が
親→親-子となるように登録する。（親-子-孫なら親-子→親-子-孫）
以下の画像のように対応します。この例では、 プログラミング 、 プログラミング-ツール 、 プログラミング-ライブラリ 、 プログラミング-言語 を追加し、その上で並び替えを行っています。
パンくずリストの追加手順
管理画面から以下のようにたどります。
デザイン ＞ レンチマーク ＞ 記事 ＞ パンくずリスト
ここの「記事ページにパンくずリストを表示する」にチェックをします。
