blogger で、テーマを「Smart（スマート）」に乗り換えました。

テーマ　Smart

今まで私が使わせていただいていたテーマ Materiapollo は、良い所がたくさんありました。好きでしたが、日付形式の問題で、困っていました。

Materiapollo　日付の表示での問題

 
Materiapollo は、とても気に入っていたのですが、ただ、日付の表示が、日本人にはどうしてもなじめないものでした。

例えば、10月 27, 2023　のようになります。

いろいろ調べたり、やってみたりしたのですが、結局、何ともならなくて、しっかり日本語対応の　「Smart（スマート）」　に乗り換えました。

今、ご覧になっているように、「2023/11/02」 という具合に。日本人には、分かりやすいですね。


Smart では更新日も表示される


さらに、すごいことに、更新日も自動で表示されます。

更新日の表示についても、前のテーマで、いろいろやってみたのですが、何ともならずに、　「↺ 10月 27, 2023」　のように、冒頭に書くようにしたものでした。

10年前に書いたものが、いくら書き直しても、10年前の日付のままでは、読んでいる人も、がっかりしますよね。


目次が自動作成される


これが、大変良いオマケです。目次表示については、


で、苦労を披瀝しましたが、この　Smart　では、h2，h3，h4　の３階層まで表示してくれます。うれしいですね。


スッキリしたデザイン、カスタマイズも簡単


テーマのHTMLは、コメントが日本語で書かれているので、分かりやすく、カスタマイズも簡単になります。

ダウンロードなどについての説明は、


に、あります。うれしいので、紹介しました。


扱いは少し難しい面もあり


多分、普通に指示通り使っていれば、問題ないと思います。が、私の場合は、過去の目次表示も、そのまま残しておきたいと、思いました。今までの目次表示がない、新しい記事で、Smart の目次表示が動作するようにしたい、というわけです。

そのためか、どうも「<!--more-->」による、目次の位置決めが、うまく働かないようなのでした。目次が現れたり、隠れたり、末尾に出たり、といった現象がおきました。

テーマHTMLを加工


備忘のためと、この記事を読んでいる方で、同じような困った現象にあっている方の参考になればと、書いておきます。

<!-- 記事中に目次&#12539;アドセンスを配置する -->
の下の所を、少し書き換えました。

      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を貼り付けした投稿だったので、そこで何か、想定外のことがおきたのだと、思われます。