はてなブログの目次と見出しをカスタマイズ

本ページにはプロモーションが含まれます。

はてなブログの目次と見出しのカスタマイズをご紹介します。

ご自由にコピペしていただき構いません。

カスタマイズ目次と見出し

カスタマイズ目次と見出し

大見出しの上に区切り線が付くようになっています。

引用元

↓こちらのサイトで紹介されているコードを元に作成しました。

Joujilog

はてなブログの見出しカスタマイズ法【シンプルイズベスト】 | Joujilog

やさしんぷるデザイン

はてなブログの目次カスタマイズ！シンプル・おしゃれ・コピペOK | やさしんぷるデザイン

使用デザインテーマ・設定

・デザインテーマはSmooth（デフォルト）

・レスポンシブデザイン

目次のコード

【デザインCSS】に貼るコード↓

.entry-content .table-of-contents {
border:1px solid #B0D9BC;
border-radius: 12px;
background:none;
margin:24px 0px;
padding-bottom:12px;

padding-left:12px !important;

padding-right:6px !important;
}
.entry-content .table-of-contents::before {
display:block;
content: "Index";
letter-spacing:0.3pt;
font-family: 'Lucida Grande', 'segoe UI', Verdana, Arial, sans-serif;
font-size: 20px;
color:#B0D9BC;
font-weight: bold;

padding-top:0px;

padding-left:12px;
}
.entry-content .table-of-contents li{
list-style-type:none;
font-weight: bold;

font-size:;

margin:8px;
}
.entry-content .table-of-contents li ul li{
font-weight: bold;

font-size:90%;

margin:4px;
}
.entry-content .table-of-contents li ul li ul li{
font-weight: normal;

fonr-size:89%;

margin:2px;
}

CSS解説

.entry-content .table-of-contents {
border:枠線の太さの数値px solidは普通の線 #枠線の色（カラーコード）;
border-radius: 角の丸みの数値px;
background:背景無しはnone、もしくは色（カラーコード）を入力;
margin:枠の外側の余白の数値（縦余白　横余白）px;
padding-bottom:見出しと枠線下部の間隔を空ける数値px;

padding-left:枠の内側左の余白px !important;

padding-right:枠の内側右の余白px !important;

}
.entry-content .table-of-contents::before {
display:block;
content: "目次を表すタイトル";
letter-spacing:タイトルの文字間隔の数値pt;
font-family:タイトルの字体;
font-size: タイトル文字の大きさpx;
color:#タイトル文字色（カラーコード）;
font-weight: タイトル文字の太さ（boldで太く、normalで細く）;

padding-top:タイトルの上の余白px;

padding-left:タイトル左側の余白px;
}
.entry-content .table-of-contents li{
list-style-type:noneはリストの前にマークを付けない;
font-weight: 大見出し文字の太さ（boldで太くnormalで細く）;

font-size:大見出し文字サイズ割合%;

margin:行の余白の数値px;
}
.entry-content .table-of-contents li ul li{
font-weight:中見出し文字の太さ（boldで太くnormalで細く） ;

fonr-size:中見出し文字サイズ割合%;

margin:行の余白の数値px;
}
.entry-content .table-of-contents li ul li ul li{
font-weight: 小見出し文字の太さ（boldで太くnormalで細く）;

font-size:小見出し文字サイズ割合%;

margin:行の余白の数値px;
}

・通常、CSSは下に追加したコードの指示が優先して反映されますが「!important」を付けると順番に関係無く最優先で反映されるためスタイル崩れを防ぐことができます。
・元から記述されているコードは消さないで最後の「　}　」のすぐ下にペーストします。
・他に自分でコードを書いている場合も同様に最後の「　}　」の下に追加でペーストします。
・↓字体の設定の仕方はこちらで知ることができます。
【2023年版】font-familyの正しい指定方法・タイプ別おすすめフォント設定例
・↓カラーコードはこのサイトで調べられます。
WEB色見本原色大辞典 - HTMLカラーコード
・borderの欄をnoneにすると枠線無しの背景色のみになります。
・↓線はsolid（普通の線）やdotted（点線）など指定できます。
CSSで枠線（ボーダー）をデザインする方法：borderプロパティ | ワードプレステーマTCD
・list-style-typeの欄に何も記述しなければデフォルトのマークが出てきます。
↓リストの前にマークや数字を自動でつける方法はこちらで調べられます。
【CSS】list-style-typeの使い方：箇条書きのマーカー種類を変える

見出しのコード

【デザインCSS】に貼るコード↓

.entry-content h3 {
border: none;
background: none;
}
.entry-content h3::first-letter {
font-size: 2em;
color: #3cb371;
margin-right: 0.1em;
}
.entry-content h3 {
font-size: 139%;
padding-bottom:0px;

padding-top:24px;
padding-left:12px;
border-top:6px dotted #f4efe3;

}
.entry-content h4 {
border: none;
background: none;
}
.entry-content h4 {

font-size: 119%;
border-left: 4px solid #3cb371;
background-color: #f4efe3;
padding: 0.5em;

border-radius: 3px;

margin-bottom:18px;
}
.entry-content h5 {
border: none;
background: none;
}
.entry-content h5 {

font-size: 104%;
border-left: 4px solid #3cb371;
padding-left: 0.6em;
margin-left:12px;
}

CSS解説

.entry-content h3 {
border:none;
background: none;
}↑大見出しデフォルトデザインをリセット
.entry-content h3::first-letter {
font-size: 大見出しの1文字目を大きくする数値em;
color:#大見出し1文字目の色（カラーコード）;
margin-right: 大見出し1文字目と2文字目の間隔の数値em;
}
.entry-content h3 {
font-size: 大見出し2文字目以降の文字サイズ割合%;
padding-bottom:大見出し下の余白数値px;

padding-top:大見出し上の余白数値px;
padding-left:大見出し左の余白数値px;
border-top:点線の大きさpx dottedは点線 #点線の色(カラーコード);
}ここで大見出しのコード終わり
.entry-content h4 {
border: none;
background: none;
}↑中見出しデフォルトデザインをリセット
.entry-content h4 {