Google Bloggerのカスタマイズ備忘録ー４

2 Blogger

目次の追加 と ソースコードの掲載方法

Vaster2の導入とカスタマイズ その４

投稿記事の目次を生成

　Bloggerで記事を投稿するときに「How to 記事」の場合は文章が長くなるし、色んなことをを記載するので目次が欲しい。　でも、ちまちまとHTMLで目次を挿入するのは面倒なので、この記事を参考にして必要な時に必要な場所に目次が表示できる様にしてみました。

見出し検出スクリプト

　目次を生成するため、記事中に「見出し」や「小見出し」などが必須です。　そして「見出し」や「小見出し」や「準見出し」である、h1～h6を抽出する関数をHTML内に記述します。
Vaster2テンプレートの一番最後にある</html>の上側に以下を貼り付けましょう。

<!-- jQuery関数ライブラリの読み込み：必要な場合のみで良い -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- h1～h6を抽出する関数 -->
<script>//<![CDATA[
(function($){

    jQuery.fn.toc = function(options) {
        var defaults = {
            startLevel: 'h2',
            listType: 'ul',
            target: 'toc'
        };
        var setting = jQuery.extend(defaults, options);

        var startLevel = setting.startLevel.substr(1, 1);
        var data = '';
        var currentLevel = 0;
        var counter = 1;

        var header = [ '.entry-content h1', '.entry-content h2', '.entry-content h3',
                       '.entry-content h4', '.entry-content h5', '.entry-content h6' ];
        var tmpArray = new Array;
        for (i=startLevel-1; i<6; i++) {
            tmpArray.push( header[i] );
        }
        var headers = tmpArray.join(',');

        $( headers, this ).each(function(){
            this.id = "chapter" + counter;
            var level = this.nodeName.substr(1, 1) - ( startLevel - 1 );

            while(currentLevel < level) {
                data += '<' + setting.listType + '>';
                currentLevel++;
            }
            while(currentLevel > level) {
                data += '</' + setting.listType + '></li>';
                currentLevel--;
            }
            if ( currentLevel == level ) {
                data += '<li>';
            }
            data += '<a href="#' + this.id + '">' + $(this).html() + "</a>";
            counter++;
        });
        while (currentLevel > 0) {
            data += '</' + setting.listType + '>';
            currentLevel--;
        }
        $("#" + setting.target).html(data);
        return this;
    };
})($) //]]>
</script>

CSSに目次の体裁を記述

　目次はスクリプトにより「見出し」や「小見出し」などを検出して自動的に生成する様になっているけど、そのまま出力すると妙なリンクリスト集になっちゃうので、CSSを記述して体裁を整えます。
以下の記述をCSSに追加してください。　ただし、あなたのUIに合わせて修正が必要で、明暗モードがある場合はそれぞれに合ったCSSを別々に記述します。

/*-------------------------------
  目次のCSS　
--------------------------------*/
#toc:before {
  content: "目次";
  font-weight:700;
  padding-left: 8px;
}
#toc {
  background:#e9e9e9;
  border: 1px solid #888;
  font-size: 95%;
  display: table;
  margin-bottom: 5px;
  padding: 5px;
  width: auto;
}
#toc ol,
#toc ol li {
  margin: 5px 5px 5px 5px;
  padding: 0;
}
#toc a:hover{
  color:#ffffff;
  background-color:#008ec2;
  text-decoration:none;
}

　私のブログでは明モードならbackground:#e9e9e9;とし、暗モードならbackground:#080808;としています。

　また、Vaster2では準見出しを「h4」としていますが、明確な体裁がCSSに記述されていません。　そこで、CSSに「h4」の体裁としてオリジナルVaster2.xmlの236行目に以下の赤字部分を記述しておきます。

/*   記事のフォント
----------------------------------------------- */
.main-outer h1{
  font-size:28px;
  line-height:1.6em;
  margin-bottom:30px;
}
.entry-content h2{
  padding: .5em .75em;
  margin-bottom: 30px;
  background: #008ec2;
  color: #fff;
}
.entry-content h3{
  font-size:20px;
  padding:15px 0 15px 10px;
  border-left: 8px solid #008ec2;
  color:#008ec2;
}
.entry-content h4{
  font-size:18px;
  padding:15px 0 15px 10px;
  border-left: 8px solid #008ec2;
  color:#008ec2;
}
.main-outer p{
  font-size:16px;
  line-height:1.6em;
  padding-bottom:24px;
}

記事中に目次を生成させる

　Bloggerの投稿エディターをHTMLモードにして、記事中の目次を表示したい場所に下記コードを張り付ければ記事の表示画面で目次が生成されます。

<script>$(function(){
  $("body").toc();
});
</script>
<div align="center"><div id="toc" align="left"></div></div>

　今回の方法は、投稿記事に必ず目次が生成される方式ではないので、記事を投稿する時にひと手間必要になりますが、目次を意識して記述した投稿記事にだけ目次を生成したい場合に良い方法です。

この記事の場合は以下の様に先頭の方に張り付けています。

<div dir="ltr" style="text-align: left;" trbidi="on">
<h2 style="text-align: left;">
Vaster2の導入とカスタマイズ その４</h2>
<br />
<script>
$(function(){$("body").toc();});
</script>
<div align="center"><div align="left" id="toc"></div></div>
<br />
<!--more--><h3 style="text-align: left;">
投稿記事の目次を生成</h3>
　：
　：
　：
　：

ソースコードの掲載

　ブログの記事に各種ソースコードを掲載しようとすると、等幅フォント指定や長いソースコードを記事内で別スクロールする様にしたりとか、なかなか面倒です。　そこで、ある程度簡単にソースコードを張り付けられるように工夫してみました。

CSSに目次の体裁を記述

　記事中に掲載するソースコードの体裁をCSSに記述しておきます。　私のブログでは「source_code_box」というクラスを用意して、以下の様なCSSにしてあります。
iPhoneなどのスマホでは動作が妙ですが、ソースコードを観るのはPCが多いだろうと放置しました。

.source_code_box>pre{
font-size: 80%;
width:auto;
height:auto;
max-height:400px;
overflow:scroll;
margin:5px;
padding:0px 5px;
border:1px solid;
-webkit-overflow-scrolling: touch;
}

記事中にソースコードを貼り付ける

　投稿記事の文章中にソースコードを掲載する場合、改行やスペースや等幅フォントやらの指定が必要だし、長いソースコードの場合は記事内でスクロールする様にしたい。
これらを個別にやるのは面倒なので、ソースコードを掲載したい部分にBloggerの投稿エディターをHTMLモードにして下記のコードを張り付けます。

<div class="source_code_box">
<pre><code>
↓ここに
↑コードを記述（エンコードは必要）
</code></pre></div>

　Bloggerの投稿エディターを作成モードに切換えて掲載するソースコードを「↓ここに」と「↑コードを記述（エンコードは必要）」の間に張り付ければソースコードがエンコードされて張り付きます。　再びBloggerの投稿エディターをHTMLモードにして、「↓ここに」と「↑コードを記述（エンコードは必要）」という不要な記述を削除すればできあがりです。

おわりに

　BloggerのテンプレートVaster2を導入して、あれこれカスタマイズしてみました。　だいぶ使い易くなりましたが、ちょっと遅い動作が不満です。　HTMLやスクリプトの記述を圧縮すれば読み込み速度が若干早くなるみたいなので、これから高速化の工夫をしたいと思います。

Sponsored Link

Sponsored Link