目次自動表示テンプレート「Smart（スマート）」に乗り換えた
2023/11/02
blogger で、テーマを「Smart（スマート）」に乗り換えました。
Materiapollo 日付の表示での問題
Materiapollo は、とても気に入っていたのですが、ただ、日付の表示が、日本人にはどうしてもなじめないものでした。
例えば、10月 27, 2023 のようになります。
いろいろ調べたり、やってみたりしたのですが、結局、何ともならなくて、しっかり日本語対応の 「Smart（スマート）」 に乗り換えました。
今、ご覧になっているように、「2023/11/02」 という具合に。日本人には、分かりやすいですね。
Smart では更新日も表示される
さらに、すごいことに、更新日も自動で表示されます。
更新日の表示についても、前のテーマで、いろいろやってみたのですが、何ともならずに、 「↺ 10月 27, 2023」 のように、冒頭に書くようにしたものでした。
10年前に書いたものが、いくら書き直しても、10年前の日付のままでは、読んでいる人も、がっかりしますよね。
目次が自動作成される
これが、大変良いオマケです。目次表示については、
で、苦労を披瀝しましたが、この Smart では、h2，h3，h4 の３階層まで表示してくれます。うれしいですね。
スッキリしたデザイン、カスタマイズも簡単
テーマのHTMLは、コメントが日本語で書かれているので、分かりやすく、カスタマイズも簡単になります。
ダウンロードなどについての説明は、
に、あります。うれしいので、紹介しました。
扱いは少し難しい面もあり
多分、普通に指示通り使っていれば、問題ないと思います。が、私の場合は、過去の目次表示も、そのまま残しておきたいと、思いました。今までの目次表示がない、新しい記事で、Smart の目次表示が動作するようにしたい、というわけです。
そのためか、どうも「<!--more-->」による、目次の位置決めが、うまく働かないようなのでした。目次が現れたり、隠れたり、末尾に出たり、といった現象がおきました。
テーマHTMLを加工
備忘のためと、この記事を読んでいる方で、同じような困った現象にあっている方の参考になればと、書いておきます。
<!-- 記事中に目次・アドセンスを配置する -->
の下の所を、少し書き換えました。
var parent = document.getElementsByClassName('post-content')[0];
var ad = document.getElementById('ad1');
var more = document.getElementsByName('more')[0];
var toc = document.getElementById('Table-of-Content');
var h2 = document.getElementsByTagName('h2')[0];
// 目次の読み込み（h2とmoreがあるときのみ）
if (typeof h2 !== 'undefined' && typeof more !== 'undefined') {
parent.insertBefore(toc, more);
} else {
toc.hidden = true;
となっていた箇所を、次のように変更しました。（青の太字部分が変更箇所です）
var parent = document.getElementsByClassName('post-content')[0];
var ad = document.getElementById('ad1');
var more = document.
getElementById('midasibasho');
//getElementsByName('more')[0];から変更した
var toc = document.getElementById('Table-of-Content');
var h2 = document.getElementsByTagName('h2')[0];
//目次の読み込み（h2とmoreがあるときのみ）
toc.hidden = true;//追加した
parent.insertBefore(toc, more);//追加した
if
( more !== null)
{
//typeof h2 !== 'undefined' && typeof more !== undefined)から上に変更した
toc.hidden = false;
} else {
toc.hidden = true;
目次の場所は <div id="midasibasho"></div> で指定
本来は、 <!--more--> で指定することになっています。しかし、これが原因なのか、投稿の文法ミスか、うまく動作したり、ダメだったり、ということになりました。
で、 <!--more--> は、場所指定としては、いろいろ使いにくそうなので、 id で指定することにしました。
それで、 <div id="midasibasho"></div> を投稿の HTML の希望の位置に挿入します。その代わり、「追記 <!--more--> 」は、自由に設定できます。
getElementById は、そのid のタグが見つからないと、null を返すようです。
ここは、何か無理をして、変なコードになっていますが、目次は問題なく表示されますので、しばらく、これで行きます。
h2 がなくても、とにかく目次を表示するようにした
本来は、 目次を表示の条件式が、h2 があることと、 <!--more--> があることの2つでした。どちらが問題で、うまく表示されないのか、分かりにくいので、とにかく目次の場所がつかめれば、目次がうまく作られているかどうかは別にして、表示されることにしました。
目次の内容が正しいかどうかは、また後で考えよう、ということで。
投稿の文法ミスがないこと
投稿の HTML でも、文法ミスがあると、目次が現れなかったりします。javascript は、そのことを言ってはくれません。黙って、動かないだけです。
場所を指定していて、目次が現れなければ、投稿の文法ミスを点検する必要があります。私は、何度も、これで泣きました。しかし、これを再現することはできません。文法ミスは、作成ビューに戻す時、Bloggerがやってくれることなので、まず、それをすり抜けてしまうことはありません。HTMLを貼り付けした投稿だったので、そこで何か、想定外のことがおきたのだと、思われます。