こんにちは、QUATRE（キャトル）です。
はてなブログのカスタマイズ初心者編のシリーズも４回目になりました。今日は、目次のカスタマイズをご紹介します。
過去のはてなブログのカスタマイズシリーズはこちら
はてなブログ目次のメリット
はてなブログを書き始めた頃は、1000文字書くのが精一杯。
目次などなくてもするっと読める記事でしたが、
記事が長くなってくると、目次がないと、
読むのに気合がいることはないでしょうか。
長い記事や情報量が多い記事は、目次があると読みやすいです。
たとえば最近書いたこちら記事。
「桜の開花が待ち遠しくて桜あんぱんを焼いてみました 桜の塩漬け料理レシピ集」
ページを下まで見ないと、何がどれだけ書いてあるか分かりません。。。
目次のメリットは、
- 記事の全体像がつかみやすい
- 知りたい情報にすぐにアクセスできる
など、があります。
ここでは、２種類の目次の作り方をご紹介します。
はてなブログ公式の目次では、すぐに使える目次機能を、
はてなブログの目次をコピペでカスタマイズでは、私が使っているものをご紹介します。
私が使っている目次を設定する場合は、はてなブログ公式の目次は、飛ばしてOKです。
はてなブログ公式の目次
はてなブログにはすでに目次ボタンがついています。
はてなブログ既存の機能を使うと、こんな目次になります。
どんなレシピがどれくらい載っているか、
わかりやすくなったと思います。
これは、記事の編集画面から一瞬にして目次を作ることができます。
目次の下準備｜見出しの設定
まず、下準備として、目次にする見出しを設定していきます。
step1 見出しにしたい文字を選択します。
step2 見出しの横の▼をクリックして、大見出し、中見出し、小見出し、から選びます。
目次の設定
step1 目次を入れたいところを決める
目次を入れたい記事の編集画面を開いて、
目次を入れたい箇所にカーソルを合わせます。
カーソルを合わせたら、｜（たての棒）がでてきます。
step2 目次ボタンをクリック
記事編集画面のタイトルの下にあるボタンのなかから、
目次のボタンをクリックします。
step3 目次コードの挿入
[:contents]というコードが入っていれば、OKです。
プレビューで、自分が希望している箇所に目次が出ていたらOKです。
変更を保存して、記事を公開してみましょう！
目次のカスタマイズ｜タイトルを追加する
はてな既存の目次でも十分わかりますが、
せっかくなので、目次のボックスの中に
「目次」というタイトルを入れてみましょう。
ダッシュボード → デザイン → カスタマイズ → デザインCSS
.table-of-contents:before{
content: “目次”;
font-size: 120%;
color:black;
font-weight: bold;
}
赤字部分は、「もくじ」や「index」など、自分の好みのタイトルに変更できますよ。
目次のカスタマイズ｜背景色を設定する
.entry-content .table-of-contents {
background: #色のコード; /* 目次の背景色 */
}
赤字部分は、自分の設定した色のコードを入れます。
色のコードは、こちらを参考にしてみてくださいね。
はてなブログの目次をコピペでカスタマイズ
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>
スマホ表示の確認｜レスポンシブデザイン
ダッシュボード → デザイン → カスタマイズ → デザインCSS
詳細設定のにあるレスポンシブデザインにチェックが入っていれば、スマホと同じ目次が表示されます。
まとめ
いかがでしたか。簡単に設定できると思います。
私が分かる範囲で書いているので、説明不足な部分が多いと思うので、随時、修正していきます！
