やりたいこと、できていますか?

読者です 読者をやめる 読者になる 読者になる

やりたいこと、できてる?

努力、忍耐、継続、自己否定の苦しい世界から、ゆるっと楽しく生きる毎日へ。頑張り屋さんを卒業して、あなたの心に従って生きる方法を一緒に探すブログです。

コピペOK!はてなブログの目次を論理的にデザインする。

パソコンのあれこれ

スポンサーリンク

こんにちは!
自分の「やりたい!」を究めるブロガー、おやすみ星人です!

私はデザインセンスがゼロなのでデザインを論理的に勉強し、行間やフォント、画像などをカスタマイズして来ました。

今回は目次をカスタマイズしたいと思います。
目次のデフォルトのデザインが以前から気になっていたので、読みやすくしていきます。

目次を設置する方法

はてなブログの目次の設定方法はとっても簡単です!

目次を入れたいところに[:contents]と書くだけ。
このとき前後には文字空白を入れないようにしてください。

f:id:oyasumin-seijin:20161209220911j:plain

するとプレビューで目次が表示されます。

f:id:oyasumin-seijin:20161209220934j:plain

後は見出しを入れるたびに勝手に項目が増えていきます。

ちなみに目次のデフォルトはこんな感じ。
何となくパッとしないので、これからデザインしていきますね!

f:id:oyasumin-seijin:20161209221740j:plain

理想的な目次のデザインは?

はてなブログの目次は、囲い見出しの箇条書きで構成されています。

そして見やすい目次をデザインするためには、次の点に注意する必要があります。
①箇条書きを適切にそろえる
②箇条書きと囲いの余白を適切に空ける

まずはこの2点について説明します。

●理想的な箇条書きとは?

理想的な箇条書きに必要な条件はこんな感じです。

  1. 箇条書きの先頭をそろえる
  2. 項目ごとにすき間を空け、項目をはっきりさせる
  3. 頭の「・」を目立たせる

実際にやってみるとこんな感じです。
左上と右上では大分印象が違うと思います。

f:id:oyasumin-seijin:20161209035048j:plain

箇条書きを作るときはこの点を意識するときれいにできます。

●箇条書きと囲いの余白

理想的な余白を作るには、上下左右に1文字分以上空ける必要があります。
文章が長い場合は2文字分空けると見やすいです。

f:id:oyasumin-seijin:20161209040212j:plain
目次は文が短いので、1文字分空ければきれいにできるかと思います。

目次をカスタマイズする

以上の点をふまえて、目次を次の画像のようにカスタマイズしようと思いました。
目次のイメージ図がこちら▽

f:id:oyasumin-seijin:20161209210324j:plain

そこでCSSコードを次のように指定しました。

●パソコンの場合

デザイン>工具マーク>デザインCSS

目次のタイトルを指定しています▽
私は[目次]と表示していますが、赤字の所を好きな目次タイトルに変更してください。

/* 目次のタイトル */
ul.table-of-contents:before {
content: "[目次]";
font-size: 150%;
font-weight: bold;
color: #d78114;
font-family: "メイリオ", Meiryo, san-serif;
}

続いて目次の背景大見出しの指定をしています▽
大見出しは太字で、先頭に番号が表示されるようになっています。
私のブログは横幅が

/* 目次の背景と大見出し */
ul.table-of-contents {
background: #eeeeee;
max-width: 720px;
margin: 0px 0px 40px 0px;
padding: 18px 18px;
list-style-type: decimal;
list-style-position: inside;
font-size: 18px;
line-height: 2.1;
font-weight: bold;
}

見出しの詳しいカスタママイズ▽

このコードでは見出しの文字をに指定し、ポインターをかざすとオレンジに変わるようにしています。
文字の下に線があると見づらいので、線は表示していません。

/* 大見出しの詳細 */
ul.table-of-contents a:link,
ul.table-of-contents a:visited {
color: #000000;
text-decoration: none;
}
ul.table-of-contents a:hover {
color: #d78114;
}

こちらは中見出しの表示をしています▽

/* 中見出し */
ul.table-of-contents ul {
list-style-type: none;
font-size: 100%;
font-weight: normal;
line-height: 1.7;
margin-left: 20px;
}

私は中見出しをあえて箇条書きにしませんでした。
どうしても「・」と文字の間に余分な空白ができてしまい、見づらかったためです。

f:id:oyasumin-seijin:20161209224122j:plain

なので毎回中見出しの先頭に●を付けることでやり過ごしています(;ω;)
中見出しを箇条書きにしたい方は、赤字のnonediscに変更してください。

ちなみに完成した目次がこちら!▽

f:id:oyasumin-seijin:20161209224242j:plain

●スマホの場合

スマホのカスタマイズの場合、コードをデザイン>スマートフォン>記事上に貼りつけてください。

<style>
<!-- 目次タイトル -->
ul.table-of-contents:before {
content: "[目次]";
font-size: 140%;
font-weight: bold;
color: #d78114;
}

<!-- 背景と大見出し -->
ul.table-of-contents {
background: #eeeeee;
max-width: 720px;
margin: 0px 0px 30px 0px;
padding: 20px 28px;
list-style-type: decimal;
list-style-position: inside;
font-size: 100%;
line-height: 2.0;
font-weight: bold;
}

<!-- 大見出しの詳細 -->
ul.table-of-contents a:link,
ul.table-of-contents a:visited {
color: #000000;
text-decoration: none;
}

<!-- 中見出し -->
ul.table-of-contents ul {
list-style-type: none;
font-size: 100%;
font-weight: normal;
line-height: 1.7;
margin-left: 20px;
}
</style>

ここでいくつか捕捉があります。

コードはPC版とほぼ同じですが、薄いグレーの部分だけPC版と異なります。
スマホで目次のリンクを押しても文字色が変化しないので、ボタンを押したときの文字色のコードは指定していません。

またこちらも中見出しの箇条書き設定をしていないので、nonediscに書き換えてください。

目次のカスタマイズ記事

他のブロガーさんも目次のカスタマイズをたくさんやっていらっしゃいます。
一覧表を作りましたので良ければどうぞ。

●目次の設定方法

てつさんが目次の設定方法をわかりやすく書いてくださっています▽
この記事には大変お世話になりました。

●初心者向けカスタム

ありんこさんがわかりやすくブログのカスタマイズ方法を説明してくださっています。
ブログを始めたばかりの方にはとってもおすすめ!

●中級カスタム

はてなブログのカスタマイズと言えば、yukihiさんが有名ですね。
さらに踏み込んだカスタマイズ方法が紹介されています。

コードの意味が分からなくてもコピペするだけでOK!

最後に

以上目次のカスタマイズでした!
コピペするだけですので、良ければ使ってみてください^^

それからブログをカスタマイズしたいけれど、デザインセンスがなくて悩んでいる方!
デザイン方法を論理的に書いている本がありまして、ブログをカスタマイズする上でとても参考になりました。

びっくりするくらいの良書です▽

 

この本を参考にして書いた人気記事がこちら▽

記事の引用元:「伝わるデザインの基本」p52-54