THE LITTLE ESCAPE

とあるイラストレーターのイギリスワーホリと留学についてのブログ

はてなブログの目次をシンプル&おしゃれにカスタマイズ / サンプルCSS付き!

はてなブログの目次をカスタマイズしてみました

f:id:kimix:20170929073519j:plain

こんにちは、イギリス暮らしのクリエイターkimixです。

今回は、はてなブログの目次(もくじ)をカスタマイズした話と、コピペで簡単にデザイン変更できるサンプルCSSをお届けします。




目次(もくじ)機能について

目次機能…。

ご存知ない方もいるかもしれませんが、みなさん一度は見かけたことがあるのではないでしょうか。

▽ちなみにこの記事の目次はこちら

はてなブログでは、ブログの記事本文中にコードを1行書くだけで、大見出し・中見出し・小見出しに沿った目次を記載することができます。

目次内のリンクを押すと、その文言が書かれている場所までひとっ飛び。(これをアンカーリンクといいます)

記事内で読みたい!と思う箇所まですぐ移動できるのはとても便利ですよね。




豆知識:もくじを表示させる方法

もしやはてなブログの目次機能を知らない人もいるのでは…?と思ったので表示させる方法もご紹介しますね。

[:contents]

△このコードを本文に書くだけでOK!

記事内の見出しを読み込んで目次が自動的に生成されます。

アプリには目次挿入ボタンがない!

確認してみたところ、はてなブログのiPhoneアプリには目次挿入機能が搭載されてないようです。

ということで、スマホユーザーさんにはあまり知られてないかもしれません。

[:contents]

↑このコードはコピペできるので、これを機にぜひぜひお試しください(^^)


わたしが行ったカスタマイズ詳細

公式のもくじが使いづらかった

前述した通り、目次があると読みたい項目にジャンプできるのでとっても便利。

…ですが「大見出し」「中見出し」「小見出し」が多い記事だと目次がずら〜〜っと長くなってしまいとっても見難いことに…。

はてなブログの目次はコード( [:contents] )を本文内に書くだけ自動生成されてしまうので、見出しが多い記事だと見栄えも悪いし「使いにくいなあ」と思っていました。

と、いうことで!じゃあ目次をもっとシンプルに、使いやすくしようじゃないか!と一念発起してみました。

今回変更した点

  • 大見出しだけを表示
  • リストマークを変更
  • 文字サイズの変更
  • 文字色の変更
  • 枠の装飾

▽以上を変更して完成したのがこちら。

目次には「大見出し」のみを表示し、リストマークは「▼」に変更。

また、目次はおまけ要素だと思っているので文字色は薄く、文字は小さくしてみました。

個人的にはまあまあいい感じになったのでは…?と満足しています(^^)

この目次のデザインCSS

もし使いたい方がいましたら、CSSを置いておきますので、ぜひコピペしてお使いください⋆*✩

See the Pen もくじ:00 by kimix (@_kmx) on CodePen.

コピペで完成するサンプルCSS

今回はコピペで完成するサンプルCSSをつくってみました。

サンプルCSSは「万人受けするシンプル&おしゃれ」をテーマに作成。

リンク色やアイコンをちょこっと変えるだけで可愛くなったり、クールになったり、雰囲気がガラリと変わるのでカスタマイズしやすいようにしています。

ぜひ参考にしてみてくださいね。

目次サンプル1

See the Pen もくじ:01 by kimix (@_kmx) on CodePen.


目次サンプル2

See the Pen もくじ:02 by kimix (@_kmx) on CodePen.

目次サンプル3

See the Pen もくじ:03 by kimix (@_kmx) on CodePen.

目次サンプル4

See the Pen もくじ:04 by kimix (@_kmx) on CodePen.

目次サンプル5

See the Pen もくじ:05 by kimix (@_kmx) on CodePen.

目次サンプル6

See the Pen もくじ:06 by kimix (@_kmx) on CodePen.

おわりに

はてなブログのカスタマイズってクールだったり、スタイリッシュな男性向けデザインが多いような気がします。

ピンクをはじめとした淡い色合いのものとか、あまり見かけないですよね。

女性向けとはいってもブリブリしすぎず、現代のミニマリズムに合ったシンプルさで、女性が使いやすいデザインやカスタマイズ。

そんなTIPSをお伝えしていきたいなあと考えています。


お役に立てれば幸いです!

それでは〜⋆*✩

イギリスからの小さなプレゼントキャンペーンを開催中!

読者登録400人突破を記念して、「ありがとうございますキャンペーン」を開催しています。

応募フォームからご連絡先を送信していただいた方の中から抽選で、イギリス現地から小さなプレゼントをあなたのもとにお届けします!

ぜひご応募ください。

▽詳細はこちら〜!


\ 読者登録・フォローお待ちしております /