こんにちは。gooです。
前回、100記事達成しました。
その記念ではないですが、長い間実現したいと思っていた、新たな機能を追加してみることにしました。
機能を追加仕様と思ったわけ
機能を追加仕様と思ったわけ、それが、
「目次の表示」
です。
gooが拝見させてもらっている、各ブログの方々の半数以上のページに、目次がついていました。
goo自身は当初、
「自分のブログには、必要ないかな。」
「下手に導入したら、見にくくなるかもしれないし。」
と思っていましたが、ブログを見ているととき、急いでいたり、必要な情報だけを取り出したいときに、この目次機能があると便利だということに気が付きました。
ここから、自分へのメモとして書いていきます。
”Blogger”や”Vaster2”に目次を追加する方法
”Blogger”や”Vaster2”に、目次を追加する方法は、調べてみると、次のWEBページで紹介されていました。
トーマスイッチ「Bloggerで記事中に目次を表示させるカスタマイズ方法（http://toumaswitch.com/blogger-table-of-content/）」
Photo of the Life「Google Bloggerのカスタマイズ備忘録－4 （https://photoofthelife.blogspot.jp/2017/11/google-blogger4.html）」
上で紹介した”トーマスイッチ”さんと、”Photo of the Life”さんのページで、HTMLを編集するやり方が書いてありました。
そのHTMLコードを、ほぼそのまま利用させてもらう形で、今回実現させてもらいました。
目次を追加するための変更点
目次を追加するための変更点は、次のとおりとなります。
変更点
「HTMLコードを、ほぼそのまま利用させてもらう形」としましたが、紹介したWEBページのやり方のままだと、うまく表示できなかったので、以下の点を変更しました。
- 「jQuery関数ライブラリの読み込み」は、”Photo of the Life”さんのコードを利用
- 「h1～h6を抽出する関数」は、”トーマスイッチ”さんのコードを利用
- 「CSSの目次デザイン」は、”トーマスイッチ”さんのコードを利用
- 「目次を表示するコード」は、”Photo of the Life”さんのコードを利用
記事ごとに目次を表示させる手順
目次を表示させるためには、”Photo of the Life”さんのやり方であれば、次の手順となっています。
記事を投稿する画面⇩
HTML投稿の表示に変える
⇩
目次を追加したいところに、コードを記述する
当初は、記事を書くたびに、上のような手順で、目次のコードを追加していくつもりでした。
しかし、よくよく考えてみると、昔の記事に反映させていくのが、とても大変なことに気が付きました。
約100記事分……
いや、無理ではないけど、気が遠くなる…
一括表示させるためにやったこと
すこーし考えてみることにしました。
そして、考えを整理した後、あれこれ試行錯誤して、”テーマの編集”から、次の位置にコードを追加することとしました。
これで、すべての記事に、目次が表示されます。
気になること
すべての記事に、目次が表示されるようになりましたが、次の2点が、気に入っていません。
- タイトルの真下に目次が入る
- 見出しがない記事（日記など）にも、目次とだけ表示されてしまう
gooとしては、目次の位置は、
タイトル⇩前書き⇩
目次
⇩最初の見出し
がベストだと思っています。
しかし、コードの挿入位置を変えると、目次の場所が、記事の一番下に行ってしまうので、それではあまり意味がないかと…
今のところ、どうしようもなさそうなので、このままいくことにします。
自分の知識のなさが、悔しい！
まとめ
今回、長い間実現したいと思っていた機能、「目次の表示」に成功しました。
成功はしましたが、少々不満の残る状態です。
もし、ブログを始めた当初に、この目次機能を追加しておけば、記事を投稿するたびにコードを追加していくことに慣れて、不満はなかったかもしれません。
いちいち、めんどくさいなあとは思うかもしれませんが…
でも、表示できるようになったということは、良いことなので、一歩前進できてうれしいです。
そして、さらにもう少し、ブログ関係でやりたいことがあるので、そっちが進めることができたらまた記事にしたいと思います。
今回はこの辺で失礼します。
ありがとうございました。
|
|
|
投稿
0 件のコメント :
コメントを投稿