はじめに

Elements of Designというサイトには、Webdesignにおける様々なパーツ(例えばblockquoteのパーツや検索ボックスのパーツなど)毎のデザインを収集して掲載されているのですが本文中のheading要素(hn要素:見出し)については収集されていませんでした(記事タイトル:typography for headingsについてはあるんですけどね。→link)。

なら自分で集めてみるか、と一念発起して海外のWeblogを見てまわり、エントリーの文中におけるhn要素のスタイルを収集してみました。以下21通りのデザインをご覧ください。

21通りのスタイル

1、erraticwisdom
http://erraticwisdom.com/
hn要素のキャプチャ01

2、jkg3.com
http://www.jkg3.com/
hn要素のキャプチャ02

3、kulturbanause blog
http://www.kulturbanause.de/
hn要素のキャプチャ03

4、Veerle's blog 2.0
http://veerle.duoh.com/
hn要素のキャプチャ04

5、EmanuelBlagonic.com
http://www.emanuelblagonic.com/
hn要素のキャプチャ05

6、NorthxEast
http://northxeast.com/
hn要素のキャプチャ06

7、Larissa Meek
http://www.larissameek.com/
hn要素のキャプチャ07

8、≫ Binary Moon ≫ The home of Ben Gillbanks
http://www.binarymoon.co.uk/
hn要素のキャプチャ08

9、Jobs and Resources - FreelanceSwitch
http://freelanceswitch.com/
hn要素のキャプチャ09

10、I love Typography (iLT)
http://ilovetypography.com/
hn要素のキャプチャ10

11、Laura Alter ≫ Blog
http://lauraalter.com/blog
hn要素のキャプチャ11

12、Web Development Blog | Ruby on Rails Web Development | Viget Extend
http://www.viget.com/extend/
hn要素のキャプチャ12

13、Design Reviver - Web Design Blog
http://designreviver.com/
hn要素のキャプチャ13

14、distortion, the blog archive ? avalonstar:distortion
http://avalonstar.com/blog/
hn要素のキャプチャ14

15、Kristin Ascoop
http://www.kristinascoop.be/blog
hn要素のキャプチャ15

16、Nimbupani Designs
http://nimbupani.com/blog/
hn要素のキャプチャ16

17、Cynosura | Ray Glover's Weblog
http://weblog.cynosura.eu/
hn要素のキャプチャ17その1

hn要素のキャプチャ17その2

18、retinart
http://retinart.net/
hn要素のキャプチャ18

19、Marchand de Trucs, magasin de magie -- Le Blog
http://www.marchanddetrucs.com/blog/
hn要素のキャプチャ19

20、Blog -- 45royale Inc.
http://www.45royale.com/blog/
hn要素のキャプチャ20

21、Rockatee Blog
http://www.rockatee.com/blog/
hn要素のキャプチャ21

おわりに

フォントサイズ、フォントカラー、フォントファミリーを変えるのが一般的な本文中のhn要素のスタイルのようですね。フォントのウェイトを太字にするのはもう必須のようです。他には背景色を設定する、背景画像を設定するなどでしょうか。国内のblogでよく見られるボーダーを設定する(border-leftやborder-bottom)スタイルは今回見てまわった範囲内ではあまり見られませんでした。個性的なものには中央寄せなどもみられます。文字の間隔(letter-spacing)を調節しているサイトもありました。記事タイトルと違って本文中の見出しはあまり出張ってもいけないのが難しいのかもしれませんね。

Tweetbacks

No Tweets Found About This Entry.

Leave Your Words




Trackback URL