• TOP
• ブログ

＜ZELOカスタマイズ記⑬＞目次を自動生成するプラグインの導入と、デザイン変更のはなし

2019-12-24T00:00:00+09:00 2019-12-29T05:44:03Z Blogger ZELO カスタマイズ ブログ

ども。とうきび。です。
自由に（安く）ブログを書きたいので、Wordpressの世界を飛び出して、Bloggerへ！

世の中の流れとは完全に逆行しておりますが、そんなの気にしないもーん。

そうこの記事は、Bloggerテーマ「ZELO」のカスタマイズ記録です。
今日は、「目次の自動表示」。

ビフォーアフター

ビフォー 

アフター

Bloggerテーマ「ZELO」で目次を自動表示させるカスタマイズ

今回参考にさせてもらったのはZELOの製作者ヒロさんの公式サイトではなく、下記のもの。

（参考）[Blogger] 目次を見出しから自動生成するプラグイン（忙しい人向け）

①HTMLを編集

※かならずバックアップをとってからカスタマイズしてください。

（１－１）HTMLをひらく

テーマ

　→　「・」がたてに３つ並んでいるメニューを選択

　→　「HTMLを編集」

（１－２）</head>をさがす

（１－３）</head>のすぐ上に、下記のコードを追加

<!-- [START] 目次作成プラグイン-->

<b:if cond='data:blog.pageType == "item"'>

  <script>

    //以下のオプションを好みに合わせて変更して下さい

    //オプションの詳しい説明は、(https://www.sukerou.com/2018/10/blogger-table-of-contents-javascript.html)を参照

   var toc_options = {

     target: ["h2", "h3",],

     autoNumber: false,

     condTargetCount: 3,

     insertPosition: "firstHeadBefore",

     showToc: true,

     width: "auto",

     marginTop: "20px",

     marginBottom: "20px",

     indent:  "0px",

     postBodySelector: ".widget.Blog"

   };

    //これ以降のソースは編集しないでください

    (function(i){var j=0;document.addEventListener(&quot;DOMContentLoaded&quot;,function(){var p=document.querySelector(toc_options.postBodySelector);if(p==null||typeof p===&quot;undefined&quot;){reutrn}if(toc_options.target.length==0){return}rootContent=h(toc_options,p);if(rootContent.children.length&gt;=toc_options.condTargetCount){var q=c(rootContent);o(q)}});function h(q,p){var u=q.target.length;var t=function(E,D,w){var z=q.target[E];var x=E&lt;u-1?q.target[E+1]:&quot;&quot;;var y=&quot;toc_headline_&quot;+(++j);var F=g(z,m(D),E+1,y);w.children.push(F);D.id=y;var A=f(D);if(x==&quot;&quot;){return}while(true){if(A==null||typeof A===&quot;undefined&quot;){break}if(b(A)==z){break}if(b(A)==x){t(E+1,A,F)}else{var B=A.getElementsByTagName(x);for(var C=0;C&lt;B.length;C++){t(E+1,B[C],F)}}var A=f(A)}};var r=g(&quot;ROOT&quot;,&quot;&quot;,0);var v=p.getElementsByTagName(q.target[0]);for(var s=0;s&lt;v.length;s++){t(0,v[s],r,&quot;&quot;)}return r}function c(s){var r=document.createElement(&quot;div&quot;);r.classList.add(&quot;b-toc-container&quot;);r.style.marginTop=toc_options.marginTop;r.style.marginBottom=toc_options.marginTop;if(toc_options.width==&quot;100%&quot;){r.style.display=&quot;block&quot;}else{r.style.width=toc_options.width}var q=document.createElement(&quot;p&quot;);var w=document.createElement(&quot;span&quot;);var v=document.createElement(&quot;span&quot;);var u=document.createElement(&quot;span&quot;);v.classList.add(&quot;b-toc-show-wrap&quot;);u.classList.add(&quot;b-toc-show-wrap&quot;);var y=document.createElement(&quot;a&quot;);w.innerText=&quot;目次&quot;;v.innerText=&quot;[&quot;;u.innerText=&quot;]&quot;;y.href=&quot;javascript:void(0);&quot;;q.appendChild(w);q.appendChild(v);q.appendChild(y);q.appendChild(u);var t=function(z){var p=typeof z===&quot;boolean&quot;?z:e(r,&quot;hide&quot;);if(p){y.innerText=&quot;非表示&quot;;r.classList.remove(&quot;hide&quot;)}else{y.innerText=&quot;表示&quot;;r.classList.add(&quot;hide&quot;)}};y.addEventListener(&quot;click&quot;,t);t(toc_options.showToc);var x=document.createElement(&quot;ul&quot;);s.children.forEach(function(z,p){n(x,z,(p+1)+&quot;&quot;)});r.appendChild(q);r.appendChild(x);return r}function n(s,u,w){var p=document.createElement(&quot;li&quot;);var q=document.createElement(&quot;a&quot;);p.style.paddingLeft=toc_options.indent;q.href=&quot;#&quot;+u.id;if(toc_options.autoNumber){var t=document.createElement(&quot;span&quot;);t.classList.add(&quot;toc-number&quot;);t.innerText=w}var v=document.createElement(&quot;span&quot;);v.classList.add(&quot;toc-text&quot;);v.innerText=u.text;if(toc_options.autoNumber){q.appendChild(t)}q.appendChild(v);p.appendChild(q);s.appendChild(p);if(u.children.length&gt;0){var r=document.createElement(&quot;ul&quot;);p.appendChild(r);u.children.forEach(function(y,x){n(r,y,w+&quot;.&quot;+(x+1))})}}function o(q){var r=null;var p=document.querySelector(toc_options.postBodySelector);if(toc_options.insertPosition==&quot;firstHeadBefore&quot;||toc_options.insertPosition==&quot;firstHeadAfter&quot;){r=p.querySelector(toc_options.target[0])}else{if(toc_options.insertPosition==&quot;top&quot;){r=p}}if(r==null){return}if(toc_options.insertPosition==&quot;firstHeadBefore&quot;){k(r,q)}else{if(toc_options.insertPosition==&quot;firstHeadAfter&quot;){a(r,q)}else{if(toc_options.insertPosition==&quot;top&quot;){k(r,q)}}}}function g(q,r,p,s){return{tagName:q,text:r,children:[],nestLevel:p,id:s}}function m(p){return p.innerText}function f(p){return p.nextElementSibling}function d(p){return p.previousElementSibling}function b(p){return p.tagName.toLowerCase()}function e(p,q){return p.classList.contains(q)}function l(p){return p.parentNode}function a(q,s){var r=l(q);var p=f(q);if(r!=null&amp;&amp;p!=null){r.insertBefore(s,p)}}function k(p,r){var q=l(p);if(q!=null){q.insertBefore(r,p)}}})(window);

  </script>

  <style type="text/css">

    .b-toc-container{background:#f9f9f9;border:1px solid #aaa;padding:10px;margin-bottom:1em;width:auto;display:table;font-size:95%}.b-toc-container p{text-align:center;margin:0;padding:0}.b-toc-container ul{list-style-type:none;list-style:none;margin:0;padding:0}.b-toc-container>ul{margin:15px 0 0}.b-toc-container.hide>ul{display:none}.b-toc-container ul li{margin:0;padding:0 0 0 20px;list-style:none}.b-toc-container ul li:after,.b-toc-container ul li:before{background:0;border-radius:0;content:""}.b-toc-container ul li a{text-decoration:none;color:#008db7!important;font-weight:400}.b-toc-container ul li .toc-number{margin:0 .5em 0 0}.b-toc-container ul li .toc-text:hover{text-decoration:underline}

  </style>

</b:if>

<!-- [END] 目次作成プラグイン-->

（１－４）保存

②目次のデザインを変更

上記のコードを足しただけだと、デフォルトデザインのこの状態↓

でもそもそものね、ワードプレスで使ってた目次デザインはこんなのだったのです。

これに近づけるのがひとまずの目標！

HTMLの
<style type="text/css">…</style>
の中にいろいろ入れてデザイン変更するみたいです！！

（２－１）中央寄せと、背景と、枠線と

• 目次を記事スペースの中央寄せにして、
• 背景色をちょっとだけつけて、
• 枠線をテーマカラーにして、
• 余白を調整

するカスタマイズ！

  

<style type='text/css'>

    .b-toc-container{

    margin: 1.5em auto; 

    background:rgba(255,248,225, 0.2);

    border: 3px solid #FFD54F;

    padding:1px;

    margin-bottom:1em;

    width:auto;

    display:table;

    font-size:1em

    }

（略）

  </style>

（２－２）フォントカラーを変更

フォントカラーがちょっと青っぽいのが気になるから、本文のテキストカラーと同じ色に変更！

<style type='text/css'>

（略）

    .b-toc-container ul li a{

    text-decoration:none;

    color:#212121!important;

    font-weight:400

    }

（略）

  </style>

（２－３）「目次」の文字をちょっと大きくする

• 「目次」の文字だけ少し大きくして、
• 枠線の上との余白を持たせる

デザインを目指します！

<style type='text/css'>

（略）

    .b-toc-container p{
    text-align:center;
    margin:0;
    padding:20px 0 0 0;
    font-size:1.1em
    }

（略）

  </style>

（２－４）「目次」タイトル前にアイコンを表示

Font Awesome 5アイコンを使います。

<style type='text/css'>

（略：わたしは上記「目次」の指定の直下に置いてます）

    .b-toc-container p::before{

    font-family: &quot;Font Awesome 5 Free&quot;;

    content: &#39;\f0ca&#39;;

    font-weight: 900;

    margin-right: .5em;

    }

（略）

  </style>

③リンク先タイトルとナビゲーションバーが重ならないようにする

このままだと、「目次」のリンクを踏んで該当箇所にジャンプしたときに、

こう↑なっちゃうのです。

「ZELO」を使っていると思われるブログ、結構そのままのサイトが多かったよ。

なんと「OrangeZELO」以降の公式目次でも、ジャンプ位置の修正はされていない模様。

・・・みんなそんなに気にならないってことかな？

わたしは気になるので、ジャンプ設定の修正。

いろんな方法があるみたいですが、一番シンプルで機能したのがこれでした↓

（参考）ページ内リンクが固定ヘッダと重なって隠れる問題を解決するCSSのテクニック

<style type='text/css'>

（略）

    html {

      scroll-padding-top: 60px; /* 固定ヘッダの高さ分 */

    }

  </style>

赤字の部分を追加しただけ！で、こうなりました↓

満足満足。

「ZELO」に目次機能を追加したはなし

狙い通りのデザインとジャンプ位置の調整ができました！

でも、「OrangeZELO」「Prime ZELO」デフォルトの目次デザインもシンプルですてき・・・。

ひとまず今日はここまで～ﾉｼ