papico's note

通信大学生で主婦。日常を楽しく過ごす方法を探していきます。

はてなブログ「目次」の見た目をCSSで変える(コピペOK)

 

スポンサーリンク  

 

はてなブログで「目次」を作ったときのデザインを変えるCSSを紹介しています。
リスト(箇条書き)のマークを大見出しと、中見出しで別々のマークにする方法もあります。
※2019.3.29に「目次の部分を目立たせるCSS」(このブログの目次)を追加しました。

はてなブログで「目次」を作ったときのデザインを変えるCSS

CSSの貼り付け場所と基本事項

【PC】は「カスタマイズ」→「デザインCSS」(記事上でもOK)

【スマホ】は「記事」→「記事上」に<style> ~ </style>で囲んで入れる

注意事項

  • 最初から書かれているCSSは消さないでください。
  • 必ずテキストエディタ(メモ帳)などにバックアップを取りましょう。
  • カスタマイズは基本的に自己責任でお願いします。
  • 一通りチェックしてますがテーマによっては余白の調整が必要です。

色について

各CSSで「#f7f7f7」などとしているのはカラーコードです。
同じ数字が6桁の時は省略して3桁にできるので「#000」としています。
自分のブログに合わせて調整出来ます。

余白について

枠内の余白はpadding:の数値で調整します。
例えば「padding: 15px 10px 15px 35px;」となっている場合は「上右下左」の数値です。左の余白を調整したければ35pxの数値を大きくします。

線の種類について

border:で線の種類、太さ、色を指定します。
線の種類は主に 実線(solid)ドット線(dotted)破線(dashed)二重線(double)があります。

 

「目次」という言葉を追加して外枠をつける

目次と分かりやすいようにします。

/*目次のデザイン変更*/      
.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;  /* 文字の色 */
}

content"目次"は他の言葉に変更可能です。

/**/で囲んだところはメモとして残せるので上記のように書いておくと便利です。

 

外枠を角丸にする

外枠に色をつけて角丸にするCSS。

/*目次のデザイン変更*/       
.table-of-contents {
    padding: 15px 10px 15px 35px;  /* 枠内の余白(上右下左) */
    font-size: 100%;  /* 文字サイズ */
    border:solid 2px #7DB4EC;  /* 線の種類と色 */
    background:#f7f7f7;  /* 背景 */
    border-radius:8px;/* 数字が大きいほど丸くなる */
}
.table-of-contents:before {
    content: "目次";
    font-size: 110%;
    font-weight:bold;   /* 文字の太さ 通常はnormal */    
    color:#000;  /* 文字の色 */
}

border-radius数字が大きいほど角が丸くなります。

リストマークを数字にする

数字など他のものに変えます

/*目次のデザイン変更*/
.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{
list-style-type:decimal;  /* マークの種類 */
}

list-style-typeでマークの種類を変えます。(四角)square、(小文字アルファベット)lower-latinなど様々なマークがあります。

リストマークを部分的に変える

大見出しのリストは数字と太字に、中見出しは●に、小見出しは英小文字にしました。

/*目次のデザイン変更*/
.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:disc;
}
/*小見出し*/
.table-of-contents li ul li ul li{
    list-style-type:lower-latin;
}

何もしなければ全部に同じ効果がかかりますが、中見出し、小見出しのCSSを追加したことでマーク以外の要素も個別で変更できます。

 

「目次」の部分を目立たせる

「目次」のタイトル周りを目立たせたい場合のCSS。webフォント(アイコン)もつけました。

はてなブログの目次のデザイン変える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 #90caf3; /* 「この記事の目次」周りの色 */
    border-left:2px solid #90caf3; /* 線の太さ */
    border-right:2px solid #90caf3;
    border-bottom:2px solid #90caf3;
    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: 0px; /*左からの位置調整*/
    color: #fff !important;
}
/*リンクの色変更と下線を消す*/
.entry-content .table-of-contents li a{
    color:#444; /* 目次リスト部分のテキスト色 */
    text-decoration:none; /* リンクの下線をつけたくない場合 */
}

/*「この記事の目次」の周囲変更*/の段落の3行目の\f039はwebフォント(アイコン)のようなものです。

・使用中のテーマによって「この記事の目次」の位置がズレている可能性がありますので、top,leftの数値で調整してください。Minimalismをお使いの場合はtop:-35px;left:35px;が良いです。

・一番下のcssでテキスト色を指定すればリンク色を変更とリンクの下線を消すことが出来ます。

おわりに

目次の見た目をCSSで変える方法でした。
自分の記事で大見出しと中見出しのリストで見た目を変えたら見やすくなった気がするので、今回ご紹介しました。

パンくずリストの文字を変えるCSSもあります。

最近アクセスの多い記事