前回はテンプレートのベースを変更してみました。ブログの外観が変わって心機一転、今回は h1 や h2 などの見出しを装飾しようと奮起致しました！
（前回：『テンプレートを差し替える ～Blogger テンプレートを作るよ！ (10)～』）
Blogger での見出しの使われ方
html の見出し要素は h1 から h6 までの６種類がありますが、 Blogger のエディターで選択できる見出しは３つだけです。それぞれがどれに対応しているのか、テンプレートで他にどう使われているのかを調べてみました。
 |
| 見出しの種類 |
- 見出し
- <h2> 要素。本文を章分けする時や、本題に入るときに使う。ガジェットの名前や投稿の日付は <h2> で書かれている。
- 小見出し
- <h3> 要素。見出しの内容を小分けにする時に使う。投稿のタイトルも <h3> で書かれている。ちなみに読みは「こみだし」らしいです。今まで「しょうみだし」だと思ってた！
- 準見出し
- <h4> 要素。小見出しの内容をさらに小分けにする時に使う。
ちなみに、 <h1> は一般的に 「大見出し」 と呼ばれていて、Blogger のデフォルトテンプレートではヘッダーのブログ名に使用されています。
気になるのが、ブログ名は投稿の内容に関係した見出しではないので、少なくとも投稿のページを開いているときは記事のタイトルが <h1> の方が良いと思いますし、ガジェットの名前も同様の理由で見出しとして使わない方が良いように思うのですが……。
まあこれは素人考えですので、プロの方に言わせると何か理由があるのかもしれません。ご存知の方は是非教えてください。
ちなみに、執筆途中の現在の見出しの外観は以下の通り。
 |
| 変更前の見出しのデザイン。文字の大きさや行間で区別しているだけ |
では、早速デザインを考えてみましょう！
css のリファレンスを片手に色々考えてみた
とりあえず、誰かのデザインを参考にするでもなく css のリファレンス片手に試行錯誤すること三日間。途中から面白くなってしまって、もうブログそっちのけで色々作ってました。
 |
| 三日間 css で遊んだ成果（一部） |
おかげで css のことを色々知ることができました！
特に border-radius とか、何も考えずに値を入れてプレビューしてみると色んな形になって面白かったです。あとは、 :before や :after っていう擬似要素セレクタが便利だとか。
後々調べてみると、ネット上ではいろんなデザインが公開されていて、なかなか参考になります。ブログを始めてから、今まで何気なく見ていたサイトでもデザインに注目するようになりました。
結局見出しのデザインを決めるところまでいけませんでしたが、とりあえずできることとできないことの判断がある程度付くようになりました。
それだけでもこの三日間の収穫は十分だと思うことにして、次回はどんな見出しを選べばいいかを考えてみます！
0 件のコメント :
コメントを投稿