【初心者向け】「はてなブログ」の目次デザインのカスタマイズ方法！

はてなブログの目次というのは、ブログに見出しを設置している場合に表示するとよい見出しの項目リストを指します。

はてなブログの目次を設置するメリットとしてはいくつかあります。ブログの内容を伝えるための手段としても有用ですので、そちらのメリットも含めて説明していきます。

アンカーリンクとは別名ページ内リンクとも言います。ホームページを見ていて、同じページ内で移動してその文章を読むことが出来るというものを経験した人もいるのではないでしょうか。

それがアンカーリンクです。はてなブログの目次では、そのアンカーリンクでその記事の中の特定の見出しへ移動することができるため、長い記事でも目的の内容へ移動することが容易にできるようになります。

検索エンジンで検索した際、はてなブログで目次を設定しておくと設定していない場合と比べて検索結果に表示されやすくなります。そのため検索結果からサイトを訪れるため、利用者にとって探しやすくなるという利点があります。

目次の表示でサイトの内容の概要を理解することもできるため、はてなブログで目次を設置することは利用者の利便性を向上させるという利点もあります。

ブログを閲覧する際、読者が一番気にするのは自分が見たい情報がそこにあるのかどうか、ということです。

そのサイト内すべてに目を通すと時間がかかるために分かりやすいサイトへ移動する人も少なくないため、そういう方のために目次を作成して誘導することでその手間を省くようにすることもできます。

さて、はてなブログで目次を設置しようとする際、どのような方法を用いて作成するのか、目次の追加方法を初心者向けに分かりやすく説明していきましょう。

はてなブログの目次の作成方法ですが、はてなブログの目次の作成には見出しの作成が必要です。そのため、目次を挿入するための設定を行うことで可能となります。見出しには大見出し、中見出し、小見出しとがあります。

大見出しというのはそのサイトの内容を大きく細分化した見出しにあたります。大まかな内容を分類するために追加していくこととなります。大見出しの内容の追加をを行いましょう。

はてなブログの記事編集画面で、見出しにしたい部分を選択し、ブログ作成の機能メニューで「見出し」ボタンをクリックしましょう。

はてなブログの機能メニューの「見出し」から設定したい見出しを選択します。

はてなブログの見出しとして大見出しが作成されます。見たままモードでは完全にそのままのプレビューとはいきませんが、目安として見出しの大きさが分かります。なお、はてなブログの大見出しのタグは<h3>で自動挿入されます。

中見出しは大見出しの下に挿入し、大見出しの内容をさらに細分化する見出しとなります。

はてなブログでの中見出しの挿入も大見出しと同様に「見出し」から中見出しを選択しましょう。

なお、はてなブログの中見出しのタグは<h4>で自動挿入されます。

小見出しは中見出しの下に挿入し、中見出しの内容をさらに細分化する見出しとなります。

はてなブログの小見出しの挿入も「見出し」から小見出しを選択して行います。

はてなブログの小見出しのタグは<h5>で自動挿入されます。

見出しの追加が完了したら、次は目次の追加です。はてなブログの目次はブログの機能メニューにそれ専用のボタンがありますので、メニューの「目次」ボタンをクリックしてください。

[:contents]と挿入されます。これがはてなブログの目次となります。目次内容の編集を行う必要ありませんので、特に触ることなくこれ一つで十分です。（ただし、Pro版のHTML編集を利用している場合は自分で行う必要があります）

さて、はてなブログ目次の追加を行うことができたら、次は目次部分のカスタマイズです。

はてなブログの目次はCSSでカスタマイズすることとなりますが、初心者の方にその部分のカスタマイズを最初からやるのは難しいですので、それぞれ変更やカスタマイズ内容の追加の方法について説明していきます。

ちなみに、テンプレートにもよりますが、はてなブログ作成時デフォルトで設定されているテンプレートでのカスタマイズ前の目次は上記のような感じで表示されることとなります。

はてなブログの目次部分のHTMLタグは下記のようになっています。

<ul class="table-of-contents">
    <li><a href="#大見出し1">大見出し1</a>
    <ul>
            <li><a href="#中見出し1-1">中見出し1-1</a></li>
            <li><a href="#中見出し1-2">中見出し1-2</a>
        <ul>
                    <li><a href="#小見出し1-2-1">小見出し1-2-1</a></li>
                </ul>
            </li>
            <li><a href="#中見出し1-3">中見出し1-3</a></li>
            <li><a href="#中見出し1-4">中見出し1-4</a></li>
        <ul>
                    <li><a href="#小見出し1-4-1">小見出し1-4-1</a></li>
        　　<li><a href="#小見出し1-4-2">小見出し1-4-2</a></li>
                </ul>
        </ul>
    </li>
</ul>

初心者向けの説明＝無料版の説明を前提としています。上記タグをカスタマイズする（＝HTML編集。Pro版で利用可能）はできませんので、それらを踏まえたうえで、目次部分のCSSの変更やデザインの変更を行っていきましょう。

CSSの追加内容の話の前に、注意点も含めはてなブログのCSSを貼り付ける場所についての説明をしておきます。

CSSを貼り付ける際の注意点として、追加場所やカスタマイズを行う際に必要な部分を消してしまうと、ブログの表示がうまく動かなくなりますので、初心者の方は特に貼り付け方法等には注意してください。

貼り付け場所ですが、サイドメニューの「デザイン」を開いてください。

レンチマークをクリックしましょう。

「デザインCSS」を開きましょう。

入力欄の外枠が広がってCSSの入力場所が開きますので、そこの最後に追加する形で貼り付けましょう。

前述したとおり、上部分に表示されている「@import～」は現在のはてなブログのデザインCSSそのものとなり、それを消すとCSSのないサイトとなってかなり不格好かつエラーが起きます。この注意点をちゃんと理解の上で貼り付けを行ってください。

はてなブログの目次に「目次」や「見出し一覧」など目次の一覧の前にタイトルを入れたい場合は疑似要素である「:before」を利用します。

追加するCSSは下記のとおりです。

.table-of-contents:before{
    content: "目次";/*目次タイトルの名称*/
    font-size: 120%;/*目次タイトルの大きさ*/
    font-weight: bold;/*目次タイトルを太字にする*/
}

カスタマイズ後のプレビューは上記の画像のとおりとなります。

なお、目次へ見出しを入れるのははてなブログでは（Pro版のHTML編集でない限り）自動で挿入されます。入れたい見出しはすべてブログの文章作成画面で挿入しましょう。

見出しの頭がただの点のままだと分かりづらい、と感じる人もいると思います。はてなブログの目次に数字で番号を付けたい場合、ulタグの表示方法を数字表示へカスタマイズしていきます（数字の種類もいろいろ存在します）。

追加するCSSは下記のとおりです。

ul.table-of-contents{
    list-style-type: decimal;/*リスト先頭（大見出し）のリストマークを数字へ変更*/
}

リストマークを数字でカスタマイズした場合のプレビュー画面は上記の感じになります。

なお、はてなブログの見出しの中見出しや小見出しなどすべての項目に数字のリストマークを付けるようカスタマイズしたい場合は、さらに目次のリストマークを数字にするようの設定を追加します。

下記のCSSで中見出し・小見出しそれぞれにも数字でのリストマークを付けることができます。追加するCSSは次の通りです。

.table-of-contents ul{
    list-style-type: decimal;/*目次（中見出し、小見出し）のリストマークを数字へ変更*/
}

中見出し・小見出しにも数字でのリストマークが反映されました

リストマークは数字以外にも別のものでカスタマイズすることもできます。

一度CSSの「list-style-type」でリストマークのスタイルそのものを数字のものから変更する方法の他、一度リストマークを非表示にして別のものを:beforeを利用し自由にカスタマイズすることもできます。

例えば目次のリストマークを「◆」に変更したい場合に追加するCSSは下記の通りになります。

ul.table-of-contents{
    position: relative;
}
ul.table-of-contents li {
    list-style-type: none;/*リストマークを一度なしにする*/
}
ul.table-of-contents li:before {
    content: "◆"; /*好きな記号等へ変更可能*/
    position: absolute;
    left: 1.7em;/*左端からの距離*/
    color: blue;/*色*/
}

上記のCSSでカスタマイズした場合、上記のようなプレビューとなります。ただ、この状態だとリストマークが大見出しの位置になっているので、中見出し・小見出しに相当する目次に対してカスタマイズしたい場合はさらにCSSを追加することとなります。

中見出し、小見出しに相当するものに対する追加CSSは下記のとおりです。

/*中見出しの目次*/
ul.table-of-contents li li:before {
    content: "▼"; /*好きな記号等へ変更可能*/
    left: 3.2em;/*左端からの距離*/
    color: red;/*色*/
}
/*小見出しの目次*/
ul.table-of-contents li li li:before {
    content: "○"; /*好きな記号等へ変更可能*/
    left: 5em;/*左端からの距離*/
    color: violet;/*色*/
}

目次の前の記号は""の中のものを変更しましょう。また、はてなブログのデザインによってはカスタマイズされていてleftでの距離が異なりますので、emの前の数字を増減させて調整してください。（なお、emは1em＝1文字分程度です）
 

なお、カスタマイズ後のプレビューは上記のとおりです。中見出し・小見出しとも位置調整後でカスタマイズされているのが確認できます。

上記のように目次がたくさんあると逆に見にくい、長くなりすぎて見にくいということもあるでしょう。その場合、大見出しのみ表示させて中見出し・小見出しを非表示にする、ということもできます。

中見出し・小見出しを非表示にする場合のカスタマイズCSSは下記のとおりです。

/*大見出しのみ表示*/
ul.table-of-contents ul li,
ul.table-of-contents li ul {
  display: none;
}

大見出しのみを表示すると、上記のように中見出し、小見出しが表示されないようカスタマイズすることができます。

中見出しは表示させて小見出しは表示させないようにカスタマイズしたい場合は、下記のCSSへ変更してください。

/*大見出し・中見出しのみ表示*/
ul.table-of-contents li ul ul {
  display: none;
}

小見出しのみを非表示にした場合のカスタマイズ時のプレビューは上記のとおりです。

目次のテキストのスタイルを太字にしたり斜体にしたりといったカスタマイズをする場合もCSSで変更することができます。テキストのスタイルの変更はさまざまあります。

今回はカスタマイズの例示として色の変更・斜体への変更・下線変更をカスタマイズとして追加したCSSが下記になります。

.table-of-contents *{
    font-style: italic;/*テキストを斜体にする*/}
.table-of-contents a{
    color: hotpink;/*色を変更*/
    border-bottom: dotted 2px hotpink;/*下線を追加*/
}

目次のテキストスタイル変更はリンク文字の変更を行うことになります。カスタマイズプレビューは上記のとおりです。

はてなブログの目次の行間が広いもしくは狭いと感じられるようであれば、その行間をカスタマイズして調整しましょう。

文字の高さを1として、フォントサイズに応じて行の高さを計算してくれますので、確認しながら位置を調整していきましょう。行間のカスタマイズCSSは下記の通りとなります。

.table-of-contents li{
    line-height: 1.5;
}

1.5にしたことで少し行間が狭くなったことが分かるかと思います。

さて、ここまでは目次項目そのもののCSSでカスタマイズする方法の説明をしてきましたが、ここではそれ以外の部分のCSSの設定をしていきましょう。

目次の背景部分や外枠部分を今のものと異なるものでカスタマイズする場合、それぞれCSSでカスタマイズする必要があります。

目次部分の背景部分の色をカスタマイズしたい場合、backgroundを利用します。背景色のカスタマイズをするときのCSSは下記のとおりです。

ul.table-of-contents{
    background: #fffab9 !important;/*背景色*/
}

なお、「!important」は強制的にそのCSSを優先させる際に利用するものになります。

通常、CSSは後に記述するものが優先され、前に書いたものは上書きされますが、CSSの内容によってはそれが反映されない、どうしても先に記述する必要があるという場合もあると思います。

その場合は各要素の後ろに「!important」を入力して強制的に反映させます。前述したCSSでどうしても反映されないという場合、「!important」を挿入してみましょう。

背景色カスタマイズ時のプレビューは上記のとおりです。

目次の外枠を作成する場合、前述目次の背景色のCSSの「}」の前に「border: solid #2a1d96 2px;」を追加しましょう。

外枠のカスタマイズ時のプレビューは上記のとおりです。外枠は角を丸くしたり線を複数にしたりなど、CSSの設定を追加することによって変更することができます。

角を丸くする場合、背景色で追加したCSSの「}」の前に「border-radius: 5px;」を追加しましょう。

角を丸くした場合のカスタマイズプレビューは上記のとおりです。

外枠の線のスタイルを変更する場合は、「solid」の部分を変更することになります。点線の外枠には「dotted」、破線の外枠は「dashed」、二重の外枠は「double」（1本の外枠になる場合はpx値を増やしてみてください）にしてみましょう。

上記のプレビューは外枠を二重線でカスタマイズした場合のものになります。

目次の外枠に影を付けるカスタマイズも可能です。影は「box-shadow」を利用して作成します。

外枠の設定をしたCSSに「box-shadow: 0px 0px 10px 5px #999999;」を追加してみましょう。

それぞれ値を変更して変化を見て、影を付ける具合を変更してみましょう。上記は先ほど追加したCSSでカスタマイズした場合の影になります。

さて、ここまではてなブログの目次のデザインカスタマイズを行う方法を説明してきました。注意点は貼り付ける場所を間違えたりするとエラーで反映されなくなるという点にありますが、そこさえ注意しておけば問題ありません。

さて、目次タイトルを追加する方法ですが、前述した「:before」要素を追加した部分で変更を行っていきます。

目次の文字は、「content: "目次";」のうち"で囲った部分の中を変更することで内容を別のものにすることができます。

目次を「見出し一覧」に変更してみた場合のプレビュー画面が上記になります。

なお、前述した「目次」に「目次一覧」のように文字を追加しても差し支えありません。前後に＜＞を入れて「＜目次＞」とすることも可能です。

目次の文字スタイルは、文字の太さや色、大きさ、下線を付けるなど様々な変更方法があります。あまりカスタマイズしすぎると見にくくなりますのでほどほどの装飾にする必要があります。

下記CSSは文字を太字でサイズを110％、色を緑、下線を付けた場合の設定です。（疑似要素を利用しているため、通常のものよりカスタマイズできる範囲は狭まります）

.table-of-contents:before{
    content: "目次";
    font-size: 110%;
    font-weight: bold;
    color: green;
    text-decoration: underline;
}

先ほどのCSSでカスタマイズした場合のプレビュー画面が上記の画像になります。

目次のデザインとして見出しにはもともとリンクがされています。そのアンカーリンクをカスタマイズすることで、リンクの見た目の変更が可能となっています。

目次の見出しリンクは、各リスト項目の「a要素」のCSSを変更することで可能となります。

テキストリンクの色の変更は、前述した目次の色変更ですでに行ったものと同じになります。もう一度CSSを貼り付けておきますが、下記のようになります（リンクの色をピンクにした場合のものになります）

.table-of-contents a{
    color: hotpink;/*色を変更*/
}

はてなブログの目次デザインのカスタマイズ方法はここまででひとまず完了となります。難しく感じた場合は、コピペで試してみて、そこから調べつつ自分の好きな色などへカスタマイズしていくと良いでしょう。

ここからは、はてなブログの目次デザインをカスタマイズする際に気を付けなければならない注意点についての話をしていきます。

まず、はてなブログはPCのみならずスマホからも閲覧している人もいることを覚えておいてください。その注意点を加味していないと、スマホからは閲覧しにくい物となり、ブログを訪れる人が減ってしまう可能性も無きにしも非ずです。

はてなブログをPCとスマホどちらも問題なく閲覧できるようにしたい場合は、レスポンシブ設定という、PCとスマホ双方同じCSSを用いて、端末の画面サイズに合わせて調整できるようにする設定ができます。

一つ注意点として、その場合はレスポンシブ設定に対応している物を選択する必要があるという点でしょう。

レスポンシブ設定は、スマホマークの「詳細設定」を開くと可能となっています。対応しているデザインを利用する場合はチェックを入れておきましょう。

はてなブログのテンプレートでレスポンシブデザインに対応しているブログデザインは、「レスポンシブ対応」などと表示されていることが多いです。

特にテーマストアで探しているとそういったものも表示されますので、対応しているものを選択するようにしましょう。

現在利用しているブログでブログデザインをカスタマイズしていると、それがリアルタイムでそのブログに影響します。

ブログの記事内容に影響はありませんが、ブログを訪れた人を困惑させる場合がありますし、CSSカスタマイズがうまく行かない時に触っていると記事が読みにくくなる危険性があるという注意点があります。

そのため、一度別にテストブログを非公開（自分のみに公開）で作成し、そこでデバックのようなことを行って問題ないことを確認したうえで、実際に利用しているブログに反映させるようにしましょう。

また、CSSを編集する際の前段階の注意点として、CSSを編集している間に以前利用していたCSSがどんな内容か分からなくなるということです。

現在利用しているCSSの内容が簡素な場合は問題ないかもしれませんが、自分でカスタマイズしたCSSがある場合はそれを消したり増やしたりしているうちに原型が分からなくなることもあります。

そのため、CSSを追加でカスタマイズする前に、一度現在のデザインCSSのバックアップを取っておきましょう。メモ帳などに貼り付けておくと良いかもしれません。

この注意点ははてなブログの目次カスタマイズ時以外にも必要なこととなります。実際に触りすぎて元に戻そうとしてもデータがなければ戻すことは難しいですので、この注意点はしっかり頭に入れておいてください。

はてなブログの目次をカスタマイズしていてありがちなのがデザイン崩れです。プレビュー画面で見ていたものと異なり、実際のブログ画面で見て見るとカスタマイズした時よりも崩れてしまっている、ということもよくあります。

一番デザインが崩れやすいのが自分で挿入したリストマークの位置です。CSSカスタマイズ時はちゃんとできていても実際の画面ではずれているというのが実際にありますので、その注意点を踏まえて、公開する前に一度ブログそのものを確認してみてください。

前述したCSSを利用した場合、「left:～em」の値を変更して位置を調整します。広めに設定しておけば大きく崩れることを防げはしますが、PC画面で利用するのであればあまり気にはならなくてもスマホなどの画面だとずれが生じる可能性は高いです。

レスポンシブデザインで運用するつもりであれば、ずれる可能性は高いため、下記CSSへ書き換えた方がいいかもしれません。これで位置の固定が可能となります。

ul.table-of-contents li:before {
    content: "◆"; /*好きな記号等へ変更可能*/
    display: inline-block;
    padding-right: 0.5em !important;/*リストマーカーと見出しの間の空白*/
    color: blue;/*色*/
}

上記に変更するだけで中見出し、小見出しにも適用されますので、そちらを変更する必要はありません。

上記CSSでカスタマイズした場合のプレビュー画面です。先ほどのものとあまり変化はありませんが、画面の多さが小さくなりすぎると被ってしまうのを避けたい場合はこちらに変更してください。

はてなブログのカスタマイズは、CSS以外のものを利用することもできます。それがjQueryを利用する方法です。

jQuery（ジェイクエリー）とは「JavaScript（ジャバスクリプト）」というプログラムを、より扱いやすくしたファイルをいいます。

JavaScriptでは長くなってしまうプログラムの記述を短くすることもでき、プログラムを扱えない初心者にも優しい物になります。これを利用することで、CSSだけではできない動的な設定を行うことができます。

目次が常に表示されていると、どうしてもその分サイトの目次割合が増えてしまいます。PCであればまだいいですが、スマホでそれはかなり面倒と言ってしまっても過言ではないでしょう。

それを行うために、目次を開閉――普段は片づけておいてボタンを押すと広げることができるようカスタマイズすることができます。貼り付けるjQueryですが、下記リンク先のものを利用します。

jQueryの貼り付け先は「フッター」部分になります。

このjQueryはCSSを介して動くこととなりますので、CSSのコードも追加しなければなりません。先ほどのサイトからCSSコードをデザインCSSへ貼り付けてください。

目次のリンクをクリックした際、スムーズにその位置までスーッとスクロールするようにすることもjQueryで可能となります。貼り付けるのは下記リンク先のjQueryで、先ほどと同様にフッターに貼り付けてください。

なお、この目次スクロールはもともとあるタグを利用して行いますので、CSSの追加は必要ありません。

このように、jQueryやCSSを利用することで、様々なブログカスタマイズが可能となります。初心者の方はここで示したCSSを基礎として色やサイズなどを変更し、自分が作ってみたい目次欄を作成してみてください。