初心者ですが、「目次」「見出し」「箇条書きリスト」などをカスタマイズしました！【はてなブログ】【Brooklyn】
こんにちは。ハレバレです。
以前の記事で、ブログのカスタマイズについてご紹介しました。
その後も色々なサイトを拝見しながら、少しずつカスタマイズを重ねましたので、ご紹介できればと思います。
※以前の記事はこちら
- まず、見出しのカスタマイズです。
- サイドバーの見出しもカスタマイズしました。
- 次に、目次のカスタマイズです
- さらに、箇条書きのカスタマイズです。
- 最後に、画面下に複合メニューバーを設置しました！
- おわりに
まず、見出しのカスタマイズです。
Brooklynを使っている方のサイトで、背景黒に白文字の吹き出しデザインになっている方を何度かお見かけしました。
- デフォルトにないデザインだったこと
- 本文と見出しの区切りがより際立っていたこと
などが気に入り、私も同じようにカスタマイズをしました。
お世話になったサイトはこちらです。
サイドバーの見出しもカスタマイズしました。
本文の見出しと同様に、サイドバーの見出しも、背景黒の白文字にしようと試みました。
結果、サイドバーやグローバルナビはグレー枠にすることで、本文をより際立たせるバランスになりました。
なお、Brooklynをテーマにしている方でも、見出しやデザインを通常の四角枠にするなど、吹き出し表示をやめる方が多いみたいですね。
私は、見出しに語りかけるような言葉を入れたいので、吹き出しデザインがお気に入りです。
お世話になったサイトはこちらです。
次に、目次のカスタマイズです
目次は記事全体の流れを見せる部分なので、とっても大事だと思っています。
まだまだ未熟ですが、見出しをうまく表現して、「目次を読めば記事の概要やポイントがわかる！」ような表現を目指したいと思っています。
Brooklynのデフォルト目次は、クールで好きなデザインだったのですが、もう少し、はっきりと目立つデザインに変更しました。
お世話になったサイトはこちらです。
さらに、箇条書きのカスタマイズです。
こちらも「ひげしげノートさん」の記事にお世話になりました。
箇条書きを目立たせることで、記事の表現方法に広がりを持てそうです。
私は囲い枠は作らず、 背景色のみ設定しました。あまり囲い枠が多くなると、ごちゃごちゃしそうなので……という理由です。
- こんな感じです。
- 控えめな背景色にしました。
お世話になったサイトはこちらです。
最後に、画面下に複合メニューバーを設置しました！
すでにグローバルナビをタイトル下に設置していますが、もっと選べるメニュー数を増やしたいと思っていました。
ちなみに、Brooklyn開発者のシロマティさんの記事では、グローバルナビのメニュー数は５つまでとされています。試しに６つにしてみたら、見事に形が崩れてしまいました。
PC画面であれば、５つの項目の下にサブカテゴリを設置する方法があるようですが、スマホには反映されないとのこと。
『う～ん、スマホでも、もっと多くのボタンや詳細なカテゴリー分けをしたいなぁ…』と悩んでいましたが、色々と調べる中でこちらのサイトにたどり着きました。
おかげさまで、画面下に複合メニューバーを設置することができ、グローバルメニューバーと上下で使用する形となりました。
読者の皆様にとって分かりやすいデザインになっていれば嬉しいのですが……
おわりに
本日はカスタマイズ第２弾として、初心者の私なりの取り組みをご紹介しました。
Brooklynのモノトーンカラーデザインがとても好きなので、それは崩さずに、より見やすい、使いやすいサイトを作りたいと思っています。
何か１つでも、あなたの参考なれば幸いです。(#^.^#)
本日もありがとうございました。
