Wedges.bin

はてなブログでWEBデザイン

記事のタイトルは、【見え方も重要】と考えています。

テーマ製作日記 2

記事のタイトル(エントリータイトル)は、SEO的に非常に重要だといわれています。

しかし、それは検索された時のことで、サーチエンジンから飛んできた後のことまでは言われていないように思います。私は、そこ(飛んできた後)も重要ではと考えています。

なぜなら、検索結果からクリックされた「記事のタイトル」は、飛んだ先の目印なのですから。その目印の下に、ほしい情報があると信じてクリックされるわけですから。

その目印的な意味合いを重視した結果、こんなデザインにしてみました。

f:id:wedges:20150122152133j:plain

目印といっても、それは「文字」であるので、基本は黒の方が認識されやすい。
黒の文字の下地は、白である方がコントラストが最大になって認識しやすい。

そして、その上下にスペースを広く取ることによって(青丸の部分)、
認識がスムーズになるように設計しました。

その時、邪魔になるブログ更新日とカテゴリータグを下にし、目立ち過ぎないようにしました。


カテゴリータグは、もともと下ですが、更新日を下にするのにちょっと苦労しました。
はてなブログでは、下記のような順番で表示されます。

<header class="entry-header">
<div class="date first">...</div><!--更新日-->
<h1 class="entry-title">...</h1><!--タイトル-->
<div class="categories">...</div><!--カテゴリー-->
<div class="entry-header-menu">...</div><!--編集-->
</header>


通常CSSで上下入れ替えをする場合は、positionプロパティで対応しますが、
タイトルの高さが固定でないため(2行、3行になったりするので)使えません。

そこで、今回使ったのが、displayプロパティのtableです。
table要素を与えて、上下を入れ替えます。

.entry-header {
     display: table; /* 親要素をtableとする */
}
.date {
     display: table-cell; /* 更新日は単なるセルとする */
}
.entry-title {
     display: table-header-group; /* タイトルはヘッダ行とする */
}


このdisplayプロパティのtableは、上下の入れ替えだけでなく、
左右にレイアウトにも使えるので(下記サイト参照)、
次に設計するときは積極的に使ってみようと思う。