QUATRE(キャトル)の庭

アシュタンガヨガをしているヨギーニのQUATRE(キャトル)です。生活のヒントになるような情報を発信しています。

はてなブログの目次をコピペでシンプルなデザインにカスタマイズしてみる

f:id:QUATRE:20200107083010j:plain


こんにちは、QUATRE(キャトル)です。

はてなブログのカスタマイズ初心者編のシリーズも4回目になりました。今日は、目次のカスタマイズをご紹介します。

過去のはてなブログのカスタマイズシリーズはこちら

はてなブログ目次のメリット

はてなブログを書き始めた頃は、1000文字書くのが精一杯。

目次などなくてもするっと読める記事でしたが、

記事が長くなってくると、目次がないと、

読むのに気合がいることはないでしょうか。

い記事や情報量が多い記事は、目次があると読みやすいです。

たとえば最近書いたこちら記事。

「桜の開花が待ち遠しくて桜あんぱんを焼いてみました 桜の塩漬け料理レシピ集」

f:id:QUATRE:20200312145205p:plain

ページを下まで見ないと、どれだけ書いてあるか分かりません。。。 

目次メリットは、

  • 記事の全体像がつかみやすい
  • 知りたい情報にすぐにアクセスできる

など、があります。

ここでは、2種類の目次の作り方をご紹介します。

はてなブログ公式の目次では、すぐに使える目次機能を、

はてなブログの目次をコピペでカスタマイズでは、私が使っているものをご紹介します。

私が使っている目次を設定する場合は、はてなブログ公式の目次は、飛ばしてOKです。

はてなブログ公式の目次

はてなブログにはすでに目次ボタンがついています。

はてなブログ既存の機能を使うと、こんな目次になります。

どんなレシピがどれくらい載っているか

わかりやすくなったと思います。

f:id:QUATRE:20200312142203p:plain

これは、記事の編集画面から一瞬にして目次を作ることができます。 

目次の下準備|見出しの設定

まず、下準備として、目次にする見出しを設定していきます。

f:id:QUATRE:20200312152201p:plain

step1 見出しにしたい文字を選択します。

step2 見出しの横の▼をクリックして、大見出し、中見出し、小見出し、から選びます。 

f:id:QUATRE:20200312150801p:plain

目次の設定

step1 目次を入れたいところを決める

目次を入れたい記事の編集画面を開いて、

目次を入れたい箇所にカーソルを合わせます。

カーソルを合わせたら、|(たての棒)がでてきます。

step2 目次ボタンをクリック

記事編集画面のタイトルの下にあるボタンのなかから、

目次のボタンをクリックします。

 

f:id:QUATRE:20200312141358p:plain

step3 目次コードの挿入

             [:contents]というコードが入っていれば、OKです。

f:id:QUATRE:20200312141826p:plain

プレビューで、自分が希望している箇所に目次が出ていたらOKです。

変更を保存して、記事を公開してみましょう!

staff.hatenablog.com

目次のカスタマイズ|タイトルを追加する

はてな既存の目次でも十分わかりますが、

せっかくなので、目次のボックスの中に

「目次」というタイトルを入れてみましょう。 

ダッシュボード → デザイン → カスタマイズ → デザインCSS

.table-of-contents:before{
content: “目次”;
font-size: 120%;
color:black;
font-weight: bold;
} 

赤字部分は、「もくじ」や「index」など、自分の好みのタイトルに変更できますよ。

目次のカスタマイズ|背景色を設定する

.entry-content .table-of-contents {
background: #色のコード; /* 目次の背景色 */
}

赤字部分は、自分の設定した色のコードを入れます。

色のコードは、こちらを参考にしてみてくださいね。

WEB色見本 原色大辞典 - HTMLカラーコード 

はてなブログの目次をコピペでカスタマイズ

この項では、私が設定している目次のCSSの設定の仕方についてご紹介します。
これは、見出しを2つ以上設定したら、自動的に記事の上に目次が表示されるのでとてもラクちんなのでオススメです。
 
f:id:QUATRE:20200312143942p:plain

CSSとは

Cascading Style Sheets(カスケーディングスタイルシート)の略です。単にスタイルシートと呼ばれることもあります。

主にデザインやレイアウトなどの見た目を、

  • どこに(セレクタ)
  • こういうスタイルを(プロパティ)
  • この大きさ(値)で、

表示してください、と指定するコードを、CSSコードといいます。

よく使うCSSコードのプロパティには、こんなものがあります。

color 文字色

background 背景の色

font-family フォントの種類

font-weight フォントの太さ

詳しくは、「CSS リファレンス」で検索するとたくさん出てきますよ。

step1  目次に番号をつける設定

ダッシュボード → デザイン → カスタマイズ → デザインCSS

デザインCSSをクリックすると入力する枠が開きます。

その空いたスペースに下のCSSコードをコピペします。

最後に、変更を保存するをクリックして完成です。 

/* 目次 */
.entry-content .sectionList {
  background: #色のコード;
  margin: 20px 0;
  padding: 10px 15px;
  border: 1px solid #CCC;
}
.entry-content .sectionList h5 {
  font-size: 110%;
  margin: -5px 0px;
  border-bottom: 1px dotted #999;
}
.entry-content .sectionList ol {
  counter-reset: section;
  list-style-type: none;
}
.entry-content .sectionList > ol {
  margin-top: 10px;
  margin-left: 0;
}
.entry-content .sectionList li:before{
  counter-increment: section;
  content: counters(section, ".") " ";
}

色のコードは、WEB色見本 原色大辞典 - HTMLカラーコードを参考にしてみてくださいね。

step2 記事の上に目次を表示させる設定

CSSで設定した目次をいつも記事の上に表示させる設定をします。

 ダッシュボード → デザイン → カスタマイズ → 記事 → 記事上

次のコードをコピペします。

最後に、変更を保存するをクリックして完成です。

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(function() {
  var win = $(window);
  var list = [];
  var currentLevel = 0;
  var entryContentLen = 0;

  // 見出しを検索
  $('.entry-content h2,.entry-content h3,.entry-content h4').each(function(i){
    var self = this;
    var idName = 'section' + i;
    var level = 0;

    $(self).attr('id', idName);
    list.push('<li><a href="#' + idName + '">' + $(self).text() + '</a>');
    if (self.nodeName.toLowerCase() == 'h3') {
      level = 1;
    } else if (self.nodeName.toLowerCase() == 'h4') {
      level = 2;
    }
    while (currentLevel < level) {
      list[i] = '<ol class="chapter">' + list[i];
      currentLevel++;
    }
    while (currentLevel > level) {
      list[i] = '</ol></li>' + list[i];
      currentLevel--;
    }
    entryContentLen++;
  });
  // 見出しが2つ以上あったら目次を表示する
  if (entryContentLen >= 2) {
    $('<div class="sectionList"><h5>目次</h5><ol>' + list.join('') + '</ol></div>').prependTo('.entry-content');
  }
  // スクロールを滑らかにする
  $('.sectionList a').on('click', function() {
    $('html,body').animate({scrollTop: $(this.hash).offset().top}, 300);
    return false;
  });
});
</script> 

スマホ表示の確認|レスポンシブデザイン

f:id:QUATRE:20200312231850p:plain

ダッシュボード → デザイン → カスタマイズ → デザインCSS

詳細設定のにあるレスポンシブデザインにチェックが入っていれば、スマホと同じ目次が表示されます。

まとめ

いかがでしたか。簡単に設定できると思います。

私が分かる範囲で書いているので、説明不足な部分が多いと思うので、随時、修正していきます!