以下の内容はhttps://www.bambi.pro/entry/hatena-mokuji-customizeより取得しました。

【はてなブログ】目次のカスタマイズ おしゃれにかっこよく！（コピペで簡単＆解説付き）

はてなブログ HTML-CSS-デザイン

※当ブログ内では商品広告やPRを行っております。

「はてなブログ」は、クリックひとつで目次を挿入してくれる便利な機能がありますよね！

↓↓これです。

【はてなブログ】目次のカスタマイズ（コピペOK＆解説き）簡単です！

 

でも、この目次って少し見にくくありませんか？？？
テーマにもよりますが…

デフォルトこんなの↓

【はてなブログ】目次のカスタマイズ（コピペOK＆解説き）簡単です！

 

そこで！はてなブログの目次をかっこよく＆オシャレに＆見やすくしたいっ！！
という方にカスタマイズのコードと解説を紹介します♪♪

 

はてなブログの目次をおしゃれにカスタマイズ

はてなブログの目次のカスタマイズのコードを紹介します♪

こんな感じの目次ができます↓↓
（詳しい解説付きなので、ご自身でカスタマイズもできます）

 

シンプル１

f:id:zuboraca:20210110142244p:plain

 

シンプル２（ボーダーのみ）

f:id:zuboraca:20210110110759p:plain

 

カワイイ系♡

f:id:zuboraca:20210110111243p:plain

 

ステッチ風★

f:id:zuboraca:20210110110658p:plain

 

コードに関しては、次の章で詳しい解説をしていますので、参考にご自身で調節してみてくださいね。

テーマによっては、元々の設定などがあるのでズレてしまったりする場合もあります。
その際は、解説を元に数字などをいじってみてくださいね(^-^)
 

 

 

CSSコードをコピペする場所

 CSSコードをコピーする場所は
デザイン→カスタマイズ→{}デザインCSS

f:id:zuboraca:20181014155829j:plain

 ※注意※
元から書いてあるコードを消してはいけません！！
書いてあるコードの一番下に追加してくださいね。

 

 

シンプル１

f:id:zuboraca:20210110142244p:plain

 

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

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

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

/*===もくじ内部のカスタマイズ===*/
.table-of-contents li {
list-style-type:decimal;/*大見出しの前に数字*/
font-size:1.2rem;/*大見出しサイズ*/
line-height:1.5;padding-bottom:.5rem;}
.table-of-contents ul{padding-top:1rem;padding-bottom:.5rem;}
.table-of-contents li ul li {
font-size:1rem;/*中見出し-サイズ*/
list-style-type:disc;/*中見出しの前に黒丸*/
line-height:1.5;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;}

 

 カワイイ系♡

f:id:zuboraca:20210110111243p:plain

＊元になったコードを公開してくれていた方→ id:kimix さんですが、いつの間にかブログが非公開になってしまっていました。（私がCSSを勉強し始めたキッカケにもなっていたブログでした。また公開された場合はこちらに明記しますね！）

 

CSSコード 
/*目次の枠*/
.entry-content .table-of-contents {
position: relative;display: inline-block;
font-size: 14px;/*文字サイズ*/
border: 1px dashed #fac;/*枠の色*/
color: #999;/*文字色*/
background-color: #fff !important;/*背景色（白）*/
padding-left:30px;padding-right:30px;}

/*[contents]の文字*/
.table-of-contents:before {
content: "[ contents ]"; /*表示文字*/
background-color: #f5f5f5;/*文字背景色*/
position: relative;display: inline-block;
margin: 0 0 1rem 0;
padding: 0.2rem 1rem;
font-weight: bold;}
 

/*目次の中*/
.table-of-contents li a,
.table-of-contents li a:visited {
color: #999 !important; /* リンク文字の色 */
text-decoration: none; /* リンクの下線消す */
border-bottom: 1px dotted #fac;/*文字にドット下線*/}
.table-of-contents li a:hover {
color: #bac; /*マウスオーバーの色 */}

.table-of-contents li{list-style-type:none;}
ul.table-of-contents li:before {
font-family: "blogicon";
content: "\f048";/*目次前のアイコン*/
position: relative;
left: -0.5rem; /*左端からのアイコンまでの距離*/
font-size: 0.5rem;
color: #fac;/*アイコンの色*/
}

 

シンプル２（ボーダーのみ）

 f:id:zuboraca:20210110110759p:plain

CSSコード 
/*===目次枠===*/
.entry-content .table-of-contents{position:relative;display:inline-block;
margin-top:40px;
border-top:5px double #DB4D6D;/*上部二重線の色*/
border-bottom:5px double #DB4D6D;/*下部二重線の色*/
background-color:#fff !important;/*背景色*/
padding-top:20px;padding-right:50px;padding-left:30px;
border-left:none;border-right:none;}
.table-of-contents::before {display:block;
font-family:"blogicon";content:"\f003";/*左上のアイコン*/
color:#DB4D6D;/*アイコンの色*/
position:absolute;top:-40px;left:5px;}
.table-of-contents::after{font-size:20px;
content:"CONTENTS";/*表示文字*/
color:#DB4D6D;/*文字色*/
position:absolute;top:-40px;left: 40px;}

.table-of-contents li:before {
content: "▼";/*大見出し前のアイコン*/
position: relative;
letter-spacing: .5em;
font-size: 1rem;
color: #DB4D6D;}

/*===目次内部===*/
.table-of-contents li {
list-style-type:none;/*大見出しの前の丸はなし*/
font-size:1.2rem;/*大見出しサイズ*/
line-height:1.5;padding-bottom:.5rem;}
.table-of-contents ul{padding-top:1rem;padding-bottom:.5rem;}
.table-of-contents li ul li {
    font-size:1rem;/*中見出し-サイズ*/
    list-style-type:disc;/*中見出しの前に黒丸*/
    line-height:1.5;padding-top:0px;padding-bottom:0px;}
.table-of-contents li ul li:before{display:none;}
.table-of-contents>li:last-child {padding-bottom:0px;}
.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;color:#DB4D6D;}/*マウスオーバーで下線を表示*/
.table-of-contents ul ul{display: none;}/*見出し3階層目を表示しない*/
body{font-family: 'PT Sans Caption',sans-serif;}/*フォント*/

 

ステッチ風

f:id:zuboraca:20210110110658p:plain

 

CSSコード 
/*== 目次外枠 ==*/
.entry-content .table-of-contents{
position:relative;display:inline-block;
border:2px dashed #cd853f;/*上部バーの色*/
background-color:#fff5ee;/*背景色*/
border-radius:10px;padding-right:50px;padding-top:10px;
box-shadow: 0 0 0 8px #fff5ee;/*ステッチの外側*/}
.entry-content .table-of-contents::before{font-size:1rem;
content:"[ contents ]";/*表示文字*/
color:#cd853f;/*文字色*/
position:relative;}

/*== 目次内部 ==*/
.entry-content .table-of-contents>li:first-child {padding-top: 20px;}
.table-of-contents li::before{
font-family:"blogicon";content:"\f02d";/*はてなブログアイコン*/
color:#cd853f;/*アイコンの色*/
position:relative;left:-10px;}
.table-of-contents li ul li::before{display:none;}/*中見出しの前にアイコン表示しない*/
.table-of-contents li {list-style-type:none;font-size:1.2rem;line-height:1.5;padding-bottom:0.5rem;}
.table-of-contents ul{padding-top:1rem;padding-bottom:0.5rem;}
.table-of-contents li ul li {font-size:1rem;line-height:1.5;padding-top:0px;padding-bottom:0px;
list-style-type:disc;}/*中見出しの前は黒丸*/
.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;}/*見出し3階層目を表示しない*/

 

 

カスタマイズコードと解説

目次の内部のコード

まずは目次の内部のカスタマイズのコードとその解説です。
設定すると、こんな感じになります。

↓

【はてなブログ】目次のカスタマイズ（コピペOK＆解説き）簡単です！

特徴としては、
・大見出しに数字をつけた
・大見出しと中見出しの文字のサイズと配置を工夫
・小見出しを表示しない（表示する設定も説明あり↓）

などです。

 （テーマ：パレットをお使いの方で下線が消えない場合の対処法を追記しました！）

カスタマイズCSSコード

 

/*===もくじ内部のカスタマイズ===*/
.table-of-contents li {
list-style-type:decimal;/*大見出しの前に数字*/
font-size:1.2rem;/*大見出しサイズ*/
line-height:1.5;padding-bottom:.5rem;}
.table-of-contents ul{padding-top:1rem;padding-bottom:.5rem;}
.table-of-contents li ul li {
font-size:1rem;/*中見出し-サイズ*/
list-style-type:disc;/*中見出しの前に黒丸*/
line-height:1.5;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;}/*小見出しを表示しない*/

  

内部のCSSコード解説

簡単にコードの説明をしますので、ご自身で文字の大きさや色を変えたり好きなカスタマイズをしてみてくださいね(^-^)

 

大見出し（h3）のカスタマイズ

.table-of-contents li {
list-style-type:decimal;/*大見出しの前に数字*/
font-size:1.2rem;/*大見出しサイズ*/
line-height:1.5;padding-bottom:.5rem;}

 

list-style-type:decimal;/*大見出しの前に数字*/ 

list-style-type: decimal;　

decimal;  は前に数字を表示します。
disc →黒丸
circle →白丸
none →なし

 

font-size:1.2rem;/*大見出しサイズ*/
line-height:1.5;padding-bottom:.5rem;}

font-size: 1.2rem;

文字のサイズです。通常のサイズは「1rem」なので、1.2rem は1.2倍という意味です。
２倍の大きさにしたかったら「2rem」です。

 

中見出し（h4）のカスタマイズ

font-size:1rem;/*中見出し-サイズ*/
list-style-type:disc;/*中見出しの前に黒丸*/
line-height:1.5;padding-top:0;padding-bottom:0;} 

  

小見出し（h5）のカスタマイズ

.table-of-contents ul ul{display: none;}/*小見出しを表示しない*/

小見出しを目次に入れない場合のカスタマイズです。
小見出しも表示したい場合には、この部分を削除してください。
削除しても表示されない場合には、none の部分を block に変えてください。

 

文字の装飾などのカスタマイズ

.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 li a,
.table-of-contents li a:visited 
{color:#454545;text-decoration:none;}/*リンクの色、下線の有無*/

 色→ color:#454545;
下線なし→ text-decoration:none;　（下線を表示したい場合はこの部分を削除する）


マウスオーバーで下線を表示する

.table-of-contents li a:hover
{text-decoration:underline;}/*マウスオーバーで下線を表示*/ 
font-family:"blogicon";content:"\f003";/*左上のアイコン*/

 

パレットをお使いの方で下線が消えない場合の対処法

 

はてなブログのテーマ：Palette（パレット） をお使いの場合、元のCSSで下線のドットが表示されるように設定されています。

こんな感じ↓

f:id:zuboraca:20210315132454p:plain

この下線を消したい場合は以下のCSSを追加して下さい。

ul.table-of-contents li a,
ul.table-of-contents li a:visited {
border-bottom: none;}

シンプル1,2で目次の左側のアイコンに下線を消したい場合。

ul.table-of-contents::before {
    border-bottom: 0px;}

目次の表示が変になる場合

Paletteの着せ替えコードで他のデザインにしている場合やテーマによっては、紹介したCSSコードを入れると元の目次と重なって表示されたり、表示が変になってしまうことがあります。

その場合は、下記のように .table-of-contents { の前に ul を付けると解消されると思います。

ul.table-of-contents {

※使っているテーマやデザインによっては、全部の.table-of-contents { の前にul をつける必要があるかもです…（すみません、お手数をおかけします）

 

シンプル2の場合

/*===目次枠===*/
.entry-content ul.table-of-contents{position:relative;display:inline-block;
margin-top:40px;
border-top:5px double #DB4D6D;/*上部二重線の色*/
border-bottom:5px double #DB4D6D;/*下部二重線の色*/
background-color:#fff !important;/*背景色*/
padding-top:20px;padding-right:50px;padding-left:30px;
border-left:none;border-right:none;}
ul.table-of-contents::before {display:block;
font-family:"blogicon";content:"\f003";/*左上のアイコン*/
color:#DB4D6D;/*アイコンの色*/
position:absolute;top:-40px;left:5px;}
ul.table-of-contents::after{font-size:20px;
content:"CONTENTS";/*表示文字*/
color:#DB4D6D;/*文字色*/
position:absolute;top:-40px;left: 40px;}

ul.table-of-contents li:before {
content: "▼";/*大見出し前のアイコン*/
position: relative;
letter-spacing: .5em;
font-size: 1rem;
color: #DB4D6D;}

/*===目次内部===*/
ul.table-of-contents li {
list-style-type:none;/*大見出しの前の丸はなし*/
font-size:1.2rem;/*大見出しサイズ*/
line-height:1.5;padding-bottom:.5rem;}
ul.table-of-contents ul{padding-top:1rem;padding-bottom:.5rem;}
ul.table-of-contents li ul li {
    font-size:1rem;/*中見出し-サイズ*/
    list-style-type:disc;/*中見出しの前に黒丸*/
    line-height:1.5;padding-top:0px;padding-bottom:0px;}
ul.table-of-contents li ul li:before{display:none;}
ul.table-of-contents>li:last-child {padding-bottom:0px;}
ul.table-of-contents li a,
ul.table-of-contents li a:visited {color:#454545;text-decoration:none;}/*リンクの色、下線の有無*/
ul.table-of-contents li a:hover{text-decoration:underline;color:#DB4D6D;}/*マウスオーバーで下線を表示*/
ul.table-of-contents ul ul{display: none;}/*見出し3階層目を表示しない*/
body{font-family: 'PT Sans Caption',sans-serif;}/*フォント*/
ul.table-of-contents li a,
ul.table-of-contents li a:visited {
border-bottom: none;}

 

目次を開閉式にする方法（表示/非表示の切り替え）

目次を表示・非表示に切り替えるカスタマイズです。
コードが２種類あります。

①CSSだけで切り替える方法
②jQueryを使って切り替える方法

 

①CSSだけで切り替える方法は、HTMLに書き込む方法で記事によって切り替えを使うかどうか決められます。（いちいちHTMLを書き込まないといけない）

②jQueryを使う方法は、自動的に目次を開閉式にすることができます。

詳しくはそれぞれの記事を見てね♪
↓↓

はてなブログの目次をCSSだけで開閉式にする方法 コピペOK

 

 

はてなブログの目次を開閉式にする方法 - jQuery コピペOK

 

コードの公開についてのお願い

 

今回紹介したコードは自分で考えたものです。


・ご自身のサイトに組み込んで自由にお使い頂けます。

・もし、カスタマイズのやり方などで、記事の中でコードを紹介する場合には、参考ページとして、このページ（https://www.bambi.pro/）へのリンクを紹介してください。
（無断で何の紹介もなく掲載されているのを見つけると悲しくなってしまいますので、どうぞよろしくお願いします！）

 

 

ブログ運営やアフィリエイトにおすすめの記事★

月間20万PV越え！これまでに試したアクセスアップの方法 

 

【収益公開中】はてなブログは稼げるのか？10ヶ月間の運営報告から考察 

 

はてなブロガー必見！アドセンスよりアフィリエイトASPに登録すべき３つの理由

 

戦略的アフィリエイトのすすめ！雑記ブログを収益化して月々5万円稼ぐ方法

 



以上の内容はhttps://www.bambi.pro/entry/hatena-mokuji-customizeより取得しました。
このページはhttp://font.textar.tv/のウェブフォントを使用してます
不具合報告/要望等はこちらへお願いします。
モバイルやる夫Viewer Ver0.14