超初心者向け:目次の作成方法と簡単カスタマイズ4種類【はてなブログ】

はてなブログ初心者あるある、はてなブログって記事作成中に色んなカスタマイズが簡単にできる機能がたくさん付いているみたいなんだけど、使い方が分からない。

これが始めた当初の私でした。

 

目次一つ作れない…みたいな。

 

この記事では、はてなブログを継続する過程で覚えた目次の作成から、初心者でも簡単にできるちょっとしたカスタマイズの方法を分かりやすく解説したいと思います。

この記事が「週間はてなブログ」に掲載されました。

 
超初心者向け:目次の作成方法と簡単カスタマイズ4種類【はてなブログ】
 
 

f:id:lifeishappy_right:20201211122322j:image

 

目次:基本

私が目次の作成をしたいと思ったのは、毎回つらつら長い文章を書きながら、ふと読む側に立ったときに、これ終わりが見えなくて読む気が失せる…と思ったのがきっかけでした。

 

はてなブログで目次を作成するにはまず「見出し」を作ります。

見出しって何?の方、これになります☟

f:id:lifeishappy_right:20201211095002p:plain

 

本文毎の題名のような役割を持つものです。

 

はてなブログの「目次」って?の方、これになります☟

f:id:lifeishappy_right:20201211095118p:plain


何か疑問を持って訪れたサイトで長文がツラツラと書かれていたら、答えを見つける前に離脱しませんか?

でも、そんな時に目次があれば自分の探している答えに簡単に行き着くことができます。

 

読者さんのためにとても重要な役割を担うのが目次なのです。

 

作成方法

目次の基本的な作成方法は本当に単純ですので一瞬でできます。

 

 STEP1:通常通り文章を書く

 STEP2:見出しの作成

 STEP3:目次の作成

 

STEP1:通常通り文章を書く
 

これは私のやり方ですが、私はまず文章を全て先に書いてから目次を作ったり文字に色をつけたり、写真を挿入したりという作業をしています。

f:id:lifeishappy_right:20201211100959p:plain

そのため、文章を書いている途中に目次に入れたい部分には分かりやすく■や☑などでマークをしています。

これは人それぞれやりやすい方法で良いと思うので自己流を後々見つけていただければと思います。

 

STEP2:見出しの作成
 

文章の作成ができたら「見出し」を作成します。

見出しにしたい部分を選択して、「見出し」を選択します。

f:id:lifeishappy_right:20201211101248p:plain

 

見出しの種類は以下になります。

 
大見出し その文章の主題を表すための見出し
中見出し その文章の要約を表すための見出し
小見出し その文章の索引を表すための見出し
最初のうちは、見出しの持つ意味を深く理解しなくても使用していくうちに何となく使い方も分かってくると思いますので、上記の種類については深く考えなくても大丈夫です。

ただ、一つ気をつけるべきことは、見出しは「大見出し→中見出し→小見出し」の順番を守るようにはしましょう。

 

例えば大見出しの次に突然小見出しを持ってきたりするのではなく、大見出しの中でカテゴリー分けをするなら、まず中見出しを使うようにしましょう。

MEMO

見出しはSEOの観点でもとても重要となりますが、この記事は初心者向けということでSEOをあまり意識せず解説しています。

目次作りに慣れて必要であれば、SEOの部分もお勉強してみてください。

 

STEP3:目次の作成
 

全ての見出しができたら、目次を入れたい場所にカーソルをもっていき、「目次」をクリックしたら、目次の完成になります。

f:id:lifeishappy_right:20201211102001p:plain

目次の作成はこれだけで完了となります。

プレビューで確認すると、こんな感じで目次ができています☟

f:id:lifeishappy_right:20201211102200p:plain


はてなブログが用意してくれているデフォルトの目次では少々味気ないなという方は、初心者でもできるカスタマイズ方法を次の項目で解説していますので、やってみたいカスタマイズがあれば挑戦してみてください。

 

目次:カスタマイズ

 

 ◆ カスタマイズ:背景色

 ◆ カスタマイズ:タイトル

 ◆ カスタマイズ:目次の枠

 ◆ カスタマイズ:リストスタイル

 

それぞれカスタマイズしたい部分があれば下記のCSSをコピペしてカスタマイズしましょう。

 

また、CSSを貼り付ける場所は全て「{}デザインCSS」になります。

< ダッシュボード → デザイン → カスタマイズ → {}デザインCSS >

f:id:lifeishappy_right:20201211102409p:plain


コードを貼り付けたら「変更を保存する」をクリックして完了です。

保存してプレビューを確認したらカスタマイズした部分が変更されているので確認してみてください。

注意

「{}デザインCSS」にデフォルトで設置されているCSSは削除しないようにしてください。

 

カスタマイズ:背景色

f:id:lifeishappy_right:20201211102725p:plain

 

目次の背景色を変更したい場合は、下記CSSを使用します。

 
/* 目次の背景色 */

.entry-content .table-of-contents {

background: #ffe4b5; /* 目次の背景色 */

}
 

上記CSSコードの赤文字部分のカラーコードを好みのカラーコードに変更します。

カラーコード一覧:WEB色見本 原色大辞典 - HTMLカラーコード

変更したら、上記CSSコードをはてなブログの「{}デザインCSS」に貼り付けて完了です。

 

カスタマイズ:タイトル

f:id:lifeishappy_right:20201211103113p:plain


目次のタイトルに「目次」や「INDEX」などタイトルを付けたい場合は、下記CSSを使用します。

 
/*目次のタイトル*/      

.table-of-contents:before {

    content: "目次";

    font-size: 110%;   /* 文字のサイズ */ 

    font-weight:bold;   /* 文字の太さ */    

    color:#000000;  /* 文字の色 */

}
 

上記CSSコードの赤文字部分を下記を参考にお好みで変更します。

そのままで問題なければ変更なしでCSSが使用できます。

 
content 「目次」「もくじ」「INDEX」など好みのタイトルに変更可能
font-size 文字のサイズ:100%・120%など好みのサイズに変更可能
font-weight 文字の太さ
normal:標準
bold:一般的な太字(現在設定中)
lighter:相対的に一段階細い
bolder:相対的に一段階太い
それぞれ変更可能
color タイトルの文字色:カラーコードから選択
カラーコード:WEB色見本 原色大辞典 - HTMLカラーコード
 

変更したら、上記CSSコードをはてなブログの「{}デザインCSS」に貼り付けて完了です。

 

カスタマイズ:目次の枠

f:id:lifeishappy_right:20201211103434p:plain


目次に枠を付けたい場合は、下記CSSを使用します。

 
/*目次の枠*/      

.table-of-contents {

    padding: 15px 10px 15px 35px;  /* 枠内余白(上右下左) */

    border:solid 1px #696969;  /* 線の種類・色*/

}
 

上記CSSコードの赤文字部分を下記を参考にお好みで変更します。

そのままで問題なければ変更なしでCSSが使用できます。

 
border 枠の種類
solid:1本線で表示(現在設定中)
dashed:破線で表示
dotted:点線で表示
参考:border-style-スタイルシートリファレンス
枠の色 カラーコードから選択
カラーコード:WEB色見本 原色大辞典 - HTMLカラーコード
 

変更したら、上記CSSコードをはてなブログの「{}デザインCSS」に貼り付けて完了です。

 

カスタマイズ:リストスタイル

f:id:lifeishappy_right:20201211103815p:plain


リストスタイル「●」などを数字やアルファベットにしたい場合は下記CSSを使用します。

/*目次のリストスタイル*/

/*大見出し*/

.table-of-contents li{

    font-weight:bold; /* 文字の太さ */

    list-style-type:decimal;   /* リストスタイルの種類 */

}

/*中見出し*/

.table-of-contents li ul li{

    margin-left:20px;

    font-weight:bold;    

    list-style-type:lower-latin;

}

/*小見出し*/

.table-of-contents li ul li ul li{

    list-style-type:lower-latin;

}
 

上記CSSコードの赤文字部分を下記を参考にお好みで変更します。

そのままで問題なければ変更なしでCSSが使用できます。

 
font-weight 文字の太さ
normal:標準
bold:一般的な太字(現在設定中)
lighter:相対的に一段階細い
bolder:相対的に一段階太い等それぞれ変更可能
list-style-type 「●」「○」部分
square:黒四角
decimal:算用数字
lower-latin:小文字のアルファベット
cjk-ideographic:漢数字
参考:left-スタイルシートリファレンス
 

変更したら、上記CSSコードをはてなブログの「{}デザインCSS」に貼り付けて完了です。

カスタマイズはこの4種類であれば全て同時に使用することも可能です。その場合は全てのCSSを「{}デザインCSS」に貼り付けます。

 

スマートフォン表示方法

スマホでPCと同じようにカスタマイズを表示させるには、スマホ設定画面でで「レスポンシブデザイン」に変更します。

< ダッシュボード → デザイン → スマートフォン → 詳細設定 >

f:id:lifeishappy_right:20201211122938p:plain

これでスマートフォンでもPC同様にカスタマイズされた目次が見れるようになります。

 

まとめ

いかがでしたか。

はてなブログは初心者にも比較的カスタマイズが易しいブログだと思いますが、やはり少し手を加えてあげると全然違ったものになりますよね。

ただの日記であれば目次も必要ないのかもしれませんが、やはり旅の情報系ブログを作っていきたいと思っている私としては目次って本当に重要な役割を担ってくれると思います。

是非目次マスターになって素敵なブログを作っていきましょう♡