Blogカスタマイズ!

はてなブログ初心者向けブログの使い方・カスタマイズ・ノウハウ

ブログタイトル

超初心者向け! はてなブログ専門! 全て無料! 簡単な事だけ! 5分で出来る!

目次のカスタマイズ

f:id:Masouta:20220207160455j:plain

読者フレンドリーの為にも長文(2000文字以上)の時には目次があった方が良いです。さらにカスタマイズした目次でオリジナリティを出しませんか。

 

こんにちは。超初心者、はてなブログ専門、無料、簡単、5分で出来るをコンセプトにしたBlogカスタマイズ!です。

 

本記事は目次の基本設定のやり方、また目次のカスタマイズについてです。

ではまず結論から

基本設定のみで ↓ こんな感じの目次が出来ます!

f:id:Masouta:20211207102057p:plain

 

そして ↓ のようにカスタマイズする事も出来ます

f:id:Masouta:20220207161051j:plain

 

まずは基本設定のやり方について。

 

いつも通りに”記事を書く”モードの”編集見たまま”でお好きな文字をテキトーに記入して下さい。

f:id:Masouta:20211207102347p:plain


そして、目次の中に入れたい言葉を選択。

f:id:Masouta:20211207102632p:plain


そしてそして、その言葉に見出しを設定して下さい。
(今回、私は”中見出し”を選びましたが、他がどうなるかは後で試して下さい!)

f:id:Masouta:20211207102807p:plain

 

中見出しにしたので少しだけ太字になりましたね。

f:id:Masouta:20211207103027p:plain

 

同じように目次にしたい言葉を全て”中見出し”にして下さい。
全て少しだけ太字になるはずです。

f:id:Masouta:20211207103524p:plain

 

そしてカーソルを目次を入れたい場所に置いて下さい。

f:id:Masouta:20211207103808p:plain


そしたら”[:contents]”という文字が自動で配置されます。

f:id:Masouta:20211207104020p:plain


以上です!
最後に”プレビュー”で見てみて下さい!

f:id:Masouta:20211207104146p:plain


どうです?
ちゃんと目次出来てますか?

 

続いて目次のカスタマイズについて。

注意:元々入っているコードを変更・削除しないで下さい。作業前には元々入っているコードのバックアップを取って下さい。

 

まず、下のコードをコピーして下さい。

 


/*===もくじの枠===*/
.entry-content .table-of-contents{position:relative;display:inline-block;
border-top:40px solid #696969;/*上部バーの色*/
background-color:#f5f5f5;/*背景色*/
border-radius:5px;padding-right:50px;
}

.entry-content .table-of-contents::before {display:block;
font-family:"blogicon";content:"\f000";font-size:25px;/*左上のアイコン*/
color:white;/*アイコンの色*/
position:absolute;top:-35px;left:35px;}

.entry-content .table-of-contents::after{font-size:20px;
content:"Contents";/*表示文字*/
color:white;/*文字色*/
position:absolute;top:-35px;left: 50px;}

/*===もくじ内部のカスタマイズ===*/
.table-of-contents li {
list-style-type:decimal;/*大見出しの前に数字*/
font-size:1.2rem;/*大見出しサイズ*/
line-height:1;padding-bottom:.3rem;}
.table-of-contents ul{padding-top:1rem;padding-bottom:.4rem;}
.table-of-contents li ul li {
font-size:1.1rem;/*中見出し-サイズ*/
list-style-type:disc;/*中見出しの前に黒丸*/
line-height:1.0;padding-top:0;padding-bottom:0;}
.table-of-contents li a,
.table-of-contents li a:visited 
{color:#454545;text-decoration:none;}/*リンクの色、下線の有無*/
.table-of-contents li a:hover
{text-decoration:underline;}/*マウスオーバーで下線を表示*/
.table-of-contents ul ul{display: none;}/*小見出しを表示しない*/

body{font-family: 'PT Sans Caption',sans-serif;}

@media screen and (min-width: 1000px){
.no_pc {
display: none !important;
}

 

コピーしたコードをデザインCSSに貼り付けます。

「ダッシュボード」に行き、「デザイン」をクリック

 >>「スパナマーク」をクリックして「【】デザインCSS」をクリック

  >>そこへ先ほどコピーしたコードをペースト(貼付け)

   >>最後に上にある「変更を保存」

f:id:Masouta:20220128025116p:plain

 

以上です。

基本のやり方と同じように記事を書いてプレビューで確認して下さい。

カスタマイズされた目次が出来ているはずです。

 

さらに上のバーの色を変えたい場合はコードを変更する事により、お好きな色に変更出来ます。

f:id:Masouta:20220207163626j:plain

例えば、黒なら#000000、赤なら#ff0000と決まっていて好みの色コードに変えればOKです!色コードはこちらからご確認下さい。

  合わせて読みたい 

HTMLカラーコード

 

もし、目次バーのところにある、はてな(万年筆)マークがズレてしまう場合は、下の二ヵ所の数字を変更してみて下さい。

f:id:Masouta:20220207164309j:plain

 

以上です。

ではでは。