読者フレンドリーの為にも長文(2000文字以上)の時には目次があった方が良いです。さらにカスタマイズした目次でオリジナリティを出しませんか。
こんにちは。超初心者、はてなブログ専門、無料、簡単、5分で出来るをコンセプトにしたBlogカスタマイズ!です。
本記事は目次の基本設定のやり方、また目次のカスタマイズについてです。
ではまず結論から
基本設定のみで ↓ こんな感じの目次が出来ます!
そして ↓ のようにカスタマイズする事も出来ます
まずは基本設定のやり方について。
いつも通りに”記事を書く”モードの”編集見たまま”でお好きな文字をテキトーに記入して下さい。
そして、目次の中に入れたい言葉を選択。
そしてそして、その言葉に見出しを設定して下さい。
(今回、私は”中見出し”を選びましたが、他がどうなるかは後で試して下さい!)
中見出しにしたので少しだけ太字になりましたね。
同じように目次にしたい言葉を全て”中見出し”にして下さい。
全て少しだけ太字になるはずです。
そしてカーソルを目次を入れたい場所に置いて下さい。
そしたら”[:contents]”という文字が自動で配置されます。
以上です!
最後に”プレビュー”で見てみて下さい!
どうです?
ちゃんと目次出来てますか?
続いて目次のカスタマイズについて。
注意:元々入っているコードを変更・削除しないで下さい。作業前には元々入っているコードのバックアップを取って下さい。
まず、下のコードをコピーして下さい。
/*===もくじの枠===*/
.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」をクリック
>>そこへ先ほどコピーしたコードをペースト(貼付け)
>>最後に上にある「変更を保存」
以上です。
基本のやり方と同じように記事を書いてプレビューで確認して下さい。
カスタマイズされた目次が出来ているはずです。
さらに上のバーの色を変えたい場合はコードを変更する事により、お好きな色に変更出来ます。
例えば、黒なら#000000、赤なら#ff0000と決まっていて好みの色コードに変えればOKです!色コードはこちらからご確認下さい。
もし、目次バーのところにある、はてな(万年筆)マークがズレてしまう場合は、下の二ヵ所の数字を変更してみて下さい。
以上です。
ではでは。