ご覧のとおり、このブログ（Stocker.jp / diary）をHTML5でリニューアルしました。
今回のテーマは「紙のように軽く、昔の雑誌のように上質で、見る人の印象に残るページ」とし、h1〜h3の文字詰めにこだわりつつ、不要なアニメーションや重いヘッダ画像などは極力排除して軽いページに仕上げました。
タイトル画像やラインなどの画像は、CSS Spriteで2枚の画像にまとめています。
マウスカーソルを乗せたときの色の変化もCSSを使用しているため非常に軽いものになっています。
トップページは3カラムのように見えますが、サイドバーはなく実質1カラムです。
このレイアウトは、jQuery Masonry という jQueryプラグインで実現しています。
タイトルのフォントは Chunkです。
トップページの場合ヘッダの上にサイトの概要を、記事ページの場合記事のタイトルとカテゴリをh1要素で配置しています。
同時に、h1がパンくずリストのように使えるようになっています。
カテゴリはサイドバーにずらずらと小さなテキストで配置するのではなく、代表的な4つのカテゴリに絞って全ページのタイトルと記事の間に配置しています。
これとh1により、ページを見た瞬間にどのようなテーマを扱っているブログであるかが分かると期待しています。
また、h1やカテゴリ一覧などは内部SEOを意識したコーディング手法をとっています。
記事の概要は両端揃えし、タイトルは FLAutoKerning.js で文字詰めしています。
FLAutoKerning.js は fladdict さんによるjQueryプラグインで、文字詰めの間隔はJSファイルを弄ることで自由に調整できます。
私はこのjQueryプラグインにこのサイトのカテゴリ名やタイトルでよく使われる文字の組み合わせをいくつか登録し、これを利用しています。
括弧のフォントが細くなっているのは自作のjQueryスクリプトです。
ソーシャルブックマークサービス はてなブックマーク で100人以上の方がブックマークしている記事の右上にはオレンジの、1000人以上の方がブックマークしている記事の右上には赤のバッジが出るようになっています。
技術系ブログでは、一般的にサイドバーに新着記事とはてブ数の多い記事を別々に表示されていることが多いですが、このブログでは記事を新着順に並べ、注目記事がはてブ数のバッジで分かるようにしました。
記事の見出しだけでなく概要のテキストの上にカーソルを乗せた時もリンクになっていますが、これはJavaScript（jQueryライブラリ）で実現しています。
記事中の画像に付いている影は、jQueryの自作関数を使って画像の直後に3つのspanを配置することで表示しています。
200px以下の場合は影は非表示で、それ以上の場合はどのようなサイズの画像にも対応できるようになっています。
コメントはWordPress標準のコメント機能ではなく、DISQUSというコメント管理サービスを利用しています。
DISQUSにした理由は、WordPressをカスタマイズしなくてもコメントとトラックバックが明確に分離されていて見やすいことや、コメントの管理が楽なこと、Twitter および Facebook と連携した Like ボタンが付いていること、コメント投稿者のアイコンが出ることなどです。
フッタにも一工夫しています。
ぜひ下までスクロールしてご覧ください。
以前、[Webデザイン] 文字組みについて本気出して考えてみた という記事を書いたとき、たくさんの方から「HTMLの文字も詰められないの？」と聞かれ、その時から「Webページでも雑誌のような表現ができないか」と漠然と考えていました。
そして先日、jQuery Masonry というdiv要素を雑誌のように並べるjQueryプラグインと、fladdict さんの FLAutoKerning.js という文字詰めができる jQuery ライブラリを見つけたことでこのデザインに至りました。
あと、私は先日からフリーランスのWebデザイナーになりましたのでポートフォリオを公開しました。
Webデザイン・コーディング・WordPressカスタマイズ・SEO等お気軽にご相談ください。
もちろん、デザインのみの案件もOKです。
※現在多忙のため受け付けておりません。