AirLife Blog

人生の活動記録。ヘリコプターを始め航空関連を中心に日常で感じた事や健康・書評・音楽・映画・食レポなどの情報発信。調べごとや思考したことをOUTPUTしていきます。役立つ情報を共有できることが喜び。

はてなブログで目次の作り方(ブログ投稿前に準備)

※2019年11月15日に公開した記事ですが、背景色・文字色の追加とスマホ版の見た目の改善を行いました。ユーザに適した柔軟なカスタマイズが可能となっております。

色々な手法がある中で選択に悩まず、短時間で効果的な方法を至ってシンプルに解説。

今回は、はてなブログで見栄えの良い目次の作り方を紹介する。

標準で用意されている目次をそのまま使うと大見出し・中見出し・小見出し毎に箇条書きの段落が出来る程度で至ってシンプル。パッと見た目に目次かどうかも分かりにくい。

そこで、デザインCSS機能を利用して、目次の「タイトル」、「番号付きリスト」、「文字の大きさ」、「太字」、「背景色」への対応手順を説明する。

目次の表示方法を意識して、見出しに番号等を付ける工夫をする前に、ブログ開始時のDNS設定等と併せて準備しておくことが理想である。

目次のカスタマイズ手順

  1. ダッシュボードの「デザイン」をクリック

WEB版

  1. 「スパナマークのカスタマイズアイコン」をクリック
  2. 「{}デザインCSS」をクリック
  3. ボックス内をクリック
  4. 下記のコード(WEB版)をメモ帳等のテキストエディタにコピー&ペーストしてからデザインCSSにコピー&ペースト
  5. 「設定を保存する」をクリック 

スマホ版

  1. 「スマホマークのスマートフォンアイコン」をクリック
  2. 「ヘッダ」をクリック
  3. タイトル下のボックスをクリック
  4. 下記のコード(スマホ版)をメモ帳等のテキストエディタにコピー&ペーストしてからデザインCSSにコピー&ペースト
  5. 「設定を保存する」をクリック 

コード(WEB版)

.table-of-contents:before{
content: "<目次>"; /* タイトル */
font-size: 100%; /* 文字の大きさ */
font-weight:bold; /* 文字の太さ 通常はnormal */
color:#000; /* 文字の色 */
}
.table-of-contents li,
.table-of-contents ul{
list-style-type: decimal;
}
.entry-content .table-of-contents {
background: #f7f7f7 ; /* 目次の背景色 */
border-radius: 3px;
padding: 10px 10px 10px 25px; /* 枠内の余白(上右下左) */
margin: 0;
}

コード(スマホ版)

<style type="text/css">
.table-of-contents:before{
content: "<目次>"; /* タイトル */
font-size: 100%; /* 文字の大きさ */
font-weight:bold; /* 文字の太さ 通常はnormal */
color:#000; /* 文字の色 */
}
.table-of-contents li,
.table-of-contents ul{
list-style-type: decimal;
}
.entry-content .table-of-contents {
background: #f7f7f7 ; /* 目次の背景色 */
border-radius: 3px;
padding: 10px 10px 10px 25px; /* 枠内の余白(上右下左) */
margin: 0;
}
</style>

記事の編集内容(サンプル)

f:id:r246toshi:20191114234638p:plain

 

デザインCSS対応前(標準の目次)

f:id:r246toshi:20191115005454p:plain

デザインCSS対応後

f:id:r246toshi:20191114234748p:plain

 参考情報

 ブログの始め方(独自ドメイン取得~ブログ開設)

www.alj24.com