ハウリンの雑念だらけで生きている

ゆるゆると書いていきます

はてなブログ【目次の作り方】と【カスタマイズ】の方法。


スポンサーリンク

こんにちは、ハウリンです。😊

ブログをやり始めて慣れてきて、みんなのブログを見ていると「目次」が表示されていて、「何これ?」となりました。

私も「目次」を表示させたい!

目次の作り方はビックリするほど簡単でした。

作り方は簡単なので、更にカスタマイズでブログに個性を出せたら最高です。

早速やってみたいと思います。

f:id:twistinhaurin:20200531165840p:plain

 

 

見出しを作る

目次に表示されるのは「見出し」です。

簡単に作れます。

見出しはユーザーにブログの内容をわかりやすく理解してもらう為でもあり、

更に、SEOを意識するなら

見出しに検索されそうなキーワードを入れるのも大事な様です。

見出しを項目として作る

画面左上の方に表示されてる「見出し」をクリックすると、「大見出し」「中見出し」「小見出し」「標準」と出ます。

f:id:twistinhaurin:20200602143850p:plain

一番見た目に押したいのは「大見出し」。

次に「中見出し」更に作りたい時は「小見出し」となります。

 

簡単すぎる!

でも、これだけでは「目次」は出来ません。 

見出しを設定したら、次に「目次」を作ります

これまた、めちゃくちゃ簡単。 

目次を作る

目次の作り方は2通りあります。

1、「目次」ボタンを押す。

2、[ ] で :contents を囲んで入力します。

 1、のやり方が簡単なので、2のやりかたをする事はほぼないかと思います(;^ω^)

「目次」を表示したい所にカーソルを置いて、下の赤枠で囲んだ所をクリックするだけです。

見出しの右横の方に、「目次」ボタンはあります。

f:id:twistinhaurin:20200602144318p:plain

これだけ!Σ(・ω・ノ)ノ!

編集画面には 

f:id:twistinhaurin:20200602144726p:plain

としか表示されないので本当に作れているのかと思いますが、プレビュー画面にしたらちゃんと出来てます。こんな感じに⇩

f:id:twistinhaurin:20200602143515p:plain
f:id:twistinhaurin:20200602143526p:plain

小見出しがなかったですね!(;'∀')

小見出しは更に段落下がります。

 

 「目次」の作り方ののやりかたも、表示させたいところにカーソルを合わせて入力するだけです。

 

「目次」ができたけど「目次」という言葉がない!ので表示させたくなりますね。

 

「目次」と言う言葉を入れる

f:id:twistinhaurin:20200519171152j:plain

やはり、項目だけでは物足らないので上に「目次」とい言葉を入れます。

コードをコピーします。 

/*目次のデザイン変更*/      
.table-of-contents {
    padding: 15px 10px 15px 35px;  /* 枠内の余白(上右下左) */
    font-size: 100%;  /* 文字サイズ */
    border:dotted 1px #777;  /* 線の種類と色 */
    background:#f7f7f7;  /* 背景 */
}
.table-of-contents:before {
    content: "目次";
    font-size: 110%;
    font-weight:bold;   /* 文字の太さ 通常はnormal */    
    color:#000;  /* 文字の色 */
}

 

デザインCSSに貼り付けていきます。

  

「デザイン」をクリック。

f:id:twistinhaurin:20200602155233p:plain

 

「スパナマーク」「デザインCSS」をクリック。にコピーしたコードを貼り付ける

f:id:twistinhaurin:20200602154654p:plain

「目次」という言葉が表示されました。😊

f:id:twistinhaurin:20200602152208p:plain

コードcontent: "目次";の「目次」を違う言葉に変えても大丈夫です。
私は「記事の目次」とか。

border dotted(ドット)の枠を変える事も出来ます。

実線 [ solid ] 、破線 [ dashed ] 、二重線 [double ]など。

1pxは太さを変えれます。

下は⇩二重線で5pxの太さに変えたものです。

f:id:twistinhaurin:20200602163028p:plain

色を変えるにはコードの#の後の数字の部分を変えるだけです。

上記のコードで見ると「線の種類と色」「背景」「文字の色」の色が変えれます。

www.colordic.org

いろんなカラーがあるので自分の好きな配色に変えて下さいね。

 

リストのマークを変更する

リストの・や ◦ マークを数字にしたり、部分的に変えたりする事もできます。 

/*目次のデザイン変更*/
.table-of-contents {
    margin-left: 0;
    padding: 15px 10px 15px 35px;  /* 枠内の余白(上右下左) */
    font-size: 100%; /* 文字サイズ */
    border:dotted 1px #777; /* 線の種類と色 */
    background:#f7f7f7;  /* 背景 */
}
.table-of-contents:before {
    content: "目次";
    font-size: 110%;
    font-weight:bold;   /* 文字の太さ 通常はnormal */
    color:#000;  /* 文字の色 */
}
/*大見出し*/
.table-of-contents li{
    font-weight:bold; /* 通常はnormal */
    list-style-type:decimal;   /* マークの種類 */
}
/*中見出し*/
.table-of-contents li ul li{
    margin-left:20px;
    font-weight:normal;    
    list-style-type:lower-latin;
}
/*小見出し*/
.table-of-contents li ul li ul li{
    list-style-type:disc;
}

list-style-typeの後の : と ; の間を変えてマークを変更できます。

decimal(数字)、lower-latin(小文字アルファベット)、disc(黒ボッチ)、circle(白丸)、square(黒四角)などに変えれます。

 

⇩は大見出しは太文字に、大見出しのマークは数字に。

中見出しのマークは小文字アルファベットにしました。

f:id:twistinhaurin:20200602171036p:plain

次にカスタマイズしてみます。 

目次をカスタマイズしていく

パピコさんのコードを参考にさせて頂きました。

www.papico405.com

いろんなパターンのカスタマイズが載ってます。  

 

f:id:twistinhaurin:20200602134745p:plain

⇧の様な目次を作ってみます。

下のコードをコピーしてCSSに貼り付けます。

/*目次のデザイン変更*/
.entry-content .table-of-contents {
    position:relative;
    margin-left: 0;
    padding: 15px 10px 15px 35px; /* 枠内の余白(上右下左) */
    font-size: 100%; /* 文字の大きさ */
    font-weight:bold;
    list-style-type:decimal; /*数字以外が良ければ変更 */
    background:#fff;
    border-top:40px solid #f4a460; /* 「この記事の目次」周りの色 */
    border-left:2px solid #f4a460; /* 線の太さ */
    border-right:2px solid #f4a460;
    border-bottom:2px solid #f4a460;
    line-height: 200%; /* 行間 */
    border-radius: 3px; /* 角丸にしない場合は不要 */
    color:#444; /* 数字(マーク色変更) */
}
/*「この記事の目次」の周囲変更*/
.entry-content .table-of-contents::before {
    font-family: 'blogicon';
    content: "\f039  この記事の目次";
    display: block;
    font-size: 130%;
    font-weight: bold;
    position: absolute;
    top: -40px;/*上からの位置調整*/
    left: 20px; /*左からの位置調整*/
    color: #000000 !important;
}
/*リンクの色変更と下線を消す*/
.entry-content .table-of-contents li a{
    color:#444; /* 目次リスト部分のテキスト色 */
    text-decoration:none; /* リンクの下線をつけたくない場合 */
}

枠内の余白を調整したい時は、padding: 15px  10px  15px  35px; の数字を変えます。

「上右下左」の順番なので右の余白を調整したい時は 10px の数字を変えます。

あとは、上の方に記載した様に、色やマークなどはあなたの好きな感じに調節して下さい。

 

あとがき

目次が出来ると一気にブログのデザイン性が増して嬉しくなります。

いろいろ調整してみて下さい😊

最後まで読んで頂いてありがとうございました。

このブログが少しでも役立てば嬉しいです。