【はてなブログ初心者必見】目次を綺麗に見やすくする方法
この記事を読むと「ブログ初心者」でも、簡単に目次を綺麗に見やすくすることが出来ます！
「ブログ初心者は、まず１００記事書くことに集中して、見栄えは後でいいです。」と良く言われますが、少しでも見やすく綺麗に作りたいですよね。
モチベーションも上がるし。それって継続に大切だし。
このページでは【ブログ初心者】が「はてなブログ」などで、かんたんに目次を綺麗に見やすくできる方法について記載します。
↑これを作ります！
まず「目次」を作って入れる！
デフォルトの機能なのですが、意外と知られていない？気がするので、念のため記載しておきます。
記事を書く状態で、「編集 見たまま」の下に記事の表題があり、その下にいくつかアイコンがありますが、右から二番目のアイコンにカーソルを持っていくと吹き出しに「目次」と出ます。
これを押すだけです！
これで「編集 見たまま」画面で「[:contents]」という表示がされます。
「プレビュー」で見ても記事が出てますね！？(^^)
この目次を、以下でさらに見やすくしましょう！
「目次」という文字をいれる
目次の枠内に「目次」って文字が入ってる方が分かりやすい。
これには「ダッシュボード」画面で左「デザイン」→左の上の方「スパナの絵」（カーソルを持っていくと、吹き出しで「カスタマイズ」とでるやつ）をクリック→左の一番下「｛｝デザインCSS」をクリック。
すると大きめの四角枠が出るので、その一番下にカーソル中に以下を入れます。
.table-of-contents:before{
content: "目次";
font-size: 120%;
font-weight: bold;
}
目次の各項目の前に番号を入れる
目次の各項目の前に番号が振ってあった方が、見やすくないですか？
これは好みがあるとは思いますので、あっても無くてもいいと思います。
「ダッシュボード」画面で左「デザイン」→左の上の方「スパナの絵」（カーソルを持っていくと、吹き出しで「カスタマイズ」とでるやつ）をクリック→左の一番下「｛｝デザインCSS」をクリック。
大きめの四角枠が出るので、その一番下にカーソル中に以下を入れます。
.table-of-contents li,
.table-of-contents ul{
list-style-type: decimal;
}
→今、このブログは数字を入れてません。皆さんはどうでしょう！？
目次の背景色を変える
デフォルトのままでも良いんですが、私はちょっと変えたくて。
これも好みがあるとは思いますので、自由でいいと思います。
「ダッシュボード」画面で左「デザイン」→左の上の方「スパナの絵」（カーソルを持っていくと、吹き出しで「カスタマイズ」とでるやつ）をクリック→左の一番下「｛｝デザインCSS」をクリック。
大きめの四角枠が出るので、その一番下にカーソル中に以下を入れます。.table-of-
contents{
padding: 20px 10px 20px 40px;
border-radius: 5px;
background: #f0ffff;
}
HTMLコードで「background: #f0ffff;」という記述が背景色を指定している部分です。省略すると黒線になります。「HTMLカラーコード」で色番号を変更します。
まとめ
目次がしっかりしてると、「おっ、このブログはしっかりしてるのかな」って感が、まあ出たりしますので、やっぱり綺麗に置いておきたいですよね。
では、また！
■登録まだの方のために念のため：
↓誰もが推奨、まずは最大手のA8.net
↓Amazon、楽天とか直アフィリより簡単お得、もしもアフィリエイト
↓その他アフィリエイト老舗の２社
↓モバイルアプリのアフィリエイトなら！
もし未登録でしたらぜひ登録を！
