FOCUS

はてなブログテーマ"Focus"のカスタマイズやあれこれ

投稿記事内で表示する目次の設定方法

投稿記事内で目次を表示する方法は2通り

投稿記事内で目次を表示する方法は簡単です。

Focusでは2通りの表示方法があります。お好きな方でどうぞ。

① 常時表示させるケース

一般的なはてなブログで見られる「常時表示させる」ケースは単純にはてなブログの目次表示のショートコードを文章中に挿入するだけです。

[:contents]

↑こんな奴(括弧は実際には半角)

デザインCSSを入れていない場合

f:id:ganapati55:20171031145057p:plain

グレー色の背景を使用した目次表示です。

これはテーマのカスタマイズ元である「SOHO」のコードがもとになっています。

/* SOHOタイプ目次 */
.table-of-contents {
  margin: 0;
  padding: 20px 20px 20px 40px;
  background-color: #f0f0f0;
  border-radius: 6px;
  font-size: .9rem;
}
.table-of-contents ul {
  padding-left: 30px;
}
@media (max-width: 767px) {
  .table-of-contents {
    font-size: 1rem;
  }
}

背景色や角丸デザインなどを修正したいときは上記コードの中の「background-color」や「border-radius」の値を変えてデザインCSSに入力してください。

デザインCSSを適用した場合

f:id:ganapati55:20171031145116p:plain

Focusで用意しているデザインCSSを適用した場合は上記のようなデザインになります。できるだけスッキリとした感じに見えるようにしてみました。

なお、上記デザインにするために使用しているCSSは以下の通りです。

/*はてな目次のデザイン*/
ul.table-of-contents {
    border: 1px solid #ccc;
    padding: 1.2em 1em 1em 2em;
    margin: 0.5em 0 2em 0;
    position: relative;
    background-color: #fff;
  border-radius: 3px;
}
ul.table-of-contents:before {
    content: "Index";
    display: inline-block;
    position: absolute;
    top: -0.6em;
    left: 0.5em;
    background: #fff;
    padding: 0 0.5em;
    font-weight: 700;
    color: #ccc;
}
.table-of-contents ul ul{
    display: none;/*3階層以降を消す*/
}
.table-of-contents li,
.table-of-contents ul{
    list-style-type: none;/*表示一時的に消す*/
}
ul.table-of-contents li:before {
  content: "▼"; /*記号に変更*/
  color: #b0d7fd;
  padding-right: 0.5em;
  font-size: 80%;
  vertical-align: text-top;
}
  }
.table-of-contents ul{
    font-size: 95%;/*h3以降小さく*/
}
.table-of-contents a{
    color:#444;
    text-decoration: none;
}
.table-of-contents a:hover {
  color: #ccc ;/* リンクにマウスを重ねた時の色 */
  text-decoration: underline;
}

前者のデザインにしたいときは該当部分を削除して(入力しないで)ください。

また、見出しの頭の部分に使用している逆三角形「▼」を別の記号に変えたいときは、当該部分を希望のものに入れ替えてください。

② 表示・非表示を切り替えさせるケース

デモサイトでは目次をデフォルトで「非表示」状態にして、クリックした際に表示されるようにしています。

見出しがどうしても多くなりやすいまとめ系の記事を多く書く人におすすめです。

f:id:ganapati55:20171031145128p:plain

上記のようにするには①の後者のタイプをベースにさらにデザインCSSとフッタHTMLに以下のコードを挿入するだけです。

■デザインCSS内に記入

/*隠れる目次のデザイン*/
.table-of-contents{
    display: none;
}
.show-area{
    display: inline-block;
    font-size:0.7em;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
    margin-bottom: 0;
    color: #4f96f6;
}

■以下はフッタHTML内に記入

<!--クリックすると表示される目次のJS-->
<script>
$(function(){
    var $Contents = $(".table-of-contents")
    $($Contents).before('<p style="font-size: 140%;color: #333;margin-bottom: 1em;">目次<span class="show-area">[表示]</span></p>');
    $(".show-area").click(function(){
        var $this = $(this);
        if($Contents.css('display') == 'none'){
            $Contents.slideDown(400),
            $this.text("[隠す]");
        }else{
            $Contents.slideUp(400),
            $this.text("[表示]")
        };
    });
});
</script>

投稿記事内目次で表示する見出しレベルの設定方法

デフォルトでは見出しは2レベルまで表示されるように設定しています。

例えば最上段の見出しがh2であればh3まで。

h3が最上段であればh4まで。

これは表示される目次が多くなりすぎないための措置です。

ただし、人によって構成の方法は全く変わってきますので、見出しを3レベルまで表示して欲しいとか、すべての階層を表示して欲しいなどといった要望もあるかと思います。

そうした場合の調整方法をご紹介します。

2レベルまでの表示としている部分

前述のデザインCSS内で以下の部分でコントロールしています。

.table-of-contents ul ul{
    display: none;/*3階層以降を消す*/
}

つまり上記の「ul」の数が2つ = 2階層(レベル)まで表示ということだと考えてください。

3レベルまで表示する方法

上記の説明でピンときたかもしれませんが ulをもう一つ増やせばよいわけです。

つまり

.table-of-contents ul ul ul{
    display: none;/*4階層以降を消す*/
}

となります。

見出しは基本的にすべて目次に表示させたいとき

全て表示させたいときは上記コードをデザインCSS内から削除してください。

目次の使い方の注意事項

目次を使う上での注意事項ですが、Focusに限らず多くのテーマのにおいて見出しのレベルが下がるたびに下層レベルが右方向にずれて目次表示されるようになっています。

しかしながら、途中で見出しレベルを飛ばした場合、表示に崩れが発生することがあります。

例えば h2⇒h3⇒h5 のように使った場合で、h3の2つ目の項目がh5の後に再度ある時などはh3がh2と同じ水準の位置に表示されます。

そこまで気にする読者は少ないとは思いますが、整然とした目次にこだわりたい人は見出しレベルの使い方にご注意ください。