THE LITTLE ESCAPE

イラストレーターkimixのヨーロッパ旅行記、写真、日々のエッセイ

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

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

f:id:kimix:20170929073519j:plain


この記事では

  • はてなブログの目次(もくじ)をカスタマイズする方法
  • コピペで簡単にデザイン変更できるサンプルCSS

この2点をお届けします。




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

はてなブログ「目次機能」をご存知ない方もいるかもしれませんが、みなさん一度は見かけたことがあるのではないでしょうか。

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

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

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

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




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

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

[:contents]

△この文字を本文に書くだけでOK!

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

アプリには目次挿入ボタンがありません

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

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

[:contents]

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


テーマ「女性が使いやすいデザイン」

さてさて、見出しの通りですが、はてなブログの目次カスタマイズを行いました。

テーマは「女性が使いやすいシンプル&おしゃれな目次」です!

制作背景

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

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

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

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

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

カスタマイズ詳細

今回変更した点

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


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

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

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

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

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

この目次のCSS

もし使いたい方がいましたら、CSS」のボタンを押したら表示されるコードをコピペしてお使いください。

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


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

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

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

こちらも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をお伝えしていきたいなあと考えています。


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


はてなブログのデザインテンプレートを無料公開中

f:id:kimix:20190905003527j:plain

女性向けのはてなブログのデザインテーマ「JOURNAL.」をつくりました。

はてな公式サイトより無料でインストールすることができます。

ぜひご利用くださいませ〜!

>>詳しくはこちら




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