Re-Make/Re-Model

およそ 2 年ぶりにこのサイトを全面的にリデザインしました。印象としてはさほど大きく変化していないと思うんですが、内部的にはけっこういじってます。細かい部分は追って別の記事にするとして、とりあえずおもな変更点などをざっとまとめてみました。

レスポンシヴ!

…ってほどではないのですが、レイアウトを表示域に応じたものにしています (Fig 1)。

Fig 1: 表示域の幅 320px、768px、1024px (左から) でのスクリーンショット

body {
    font-size: 1em;
}

@media screen and (max-width: 32em) {
    body {
        font-size: 0.875em;
    }
}

[role="banner"],
[role="main"],
[role="contentinfo"] {
    margin-left: auto;
    margin-right: auto;
    max-width: 46em;
    padding-left: 1em;
    padding-right: 1em;
}

@media screen and (min-width: 64em) {
    [role="banner"],
    [role="main"],
    [role="contentinfo"] {
        padding-left: 17em;
    }
    .logo {
        left: 2em;
        position: absolute;
    }
}

CSS でレイアウトに関するおもな記述を抜き出すとこんな感じです。各コンテナの幅は指定せず最大幅のみ指定しています。

スマートフォンなど表示域の幅が狭い場合、フォントサイズがデフォルトのままだとやや大きく感じられたので、ベースをやや小さくしています (デフォルトが 16px なら 14px 相当)。この指定だと iPhone の縦で全角文字が 1 行あたりだいたい 20 文字入ります。

表示域の幅が十分に広い場合は左側に余白を作ってロゴをそちらに配置し、画面あたりの縦の情報量を増やしています。この左側の余白に記事の日付を置いたり画像をはみ出させたりとかも試してみましたが、あまり上手くいかなかったのでやめました。

なおメディアクエリをサポートしていない環境のために Respond.js を使っています。

ロゴとナビゲーション

ヘッダのロゴとナビゲーションには League Gothic を使っていましたが (Fig 2)、わりとよく見るようになったし、本来は大文字で使ったほうが活きる書体という気もするので変えることにしました。ロゴは Open Sans Condensed の Book 700、ナビゲーションは本文と同じ Open Sans の Bold 700 に (Fig 3)。Open Sans がとても気に入っているということです!

ロゴ部分にはこのブログについての簡単な説明のようなものを入れてみました。マークアップとしては h1 と h2 で、それらを hgroup でまとめて、さらに a でまるごとリンクにしています。

<a href="/">
    <hgroup class="logo">
        <h1>terkel.jp</h1>
        <h2>A blog by…</h2>
    </hgroup>
</a>

ナビゲーションのラベルはすべて大文字で、そうすると単語ごとの「かたまり感」のようなものが出せる反面、パッと見でテキストとしてやや認識しづらくなるので、文字間と単語間に余裕を持たせています。

.primaryNav {
    font-weight: bold;
    letter-spacing: 0.125em;
    text-transform: uppercase;
    word-spacing: 0.25em;
}

ロゴの装飾とナビゲーションのインジケーターに使っている「円」のイメージにはあまり意味はないのですが、全体的に堅いイメージになりがちなのが若干柔らぐのでいいかなと思ってます。

タグ、関連記事、ツイート

各記事のタグとタグクラウド、Yet Another Related Posts Plugin による「関連記事」、あと僕の Twitter から最新ツイートを表示するウィジェットをなくしました。

タグは記事を探す手がかりとして使えるだけではなく、その記事の言及している内容を端的に示すことができるということもあり採用していましたが、そういった部分はタイトルや概要をわかりやすくすることで解決したいなと考えてます。そのかわり今後は検索機能をもっと使いやすくしたいですね。

関連記事は必要に応じて記事内で言及したほうがいいという判断ですね。プラグインの精度はけっこう高くて良かったですが。

ツイートは自作 jQuery プラグインで読み込んでいたんですが、やはり前後の文脈をすっ飛ばしてそれだけ載っけてもよくわからんというか、場合によっては良くない印象を与えることもあると思ったので。ちなみに Last.fm のウィジェットは誰も必要としていないですが自分が好きなので残します。

カラー

背景色のオフホワイト #f8f8f0、前景色のブルーブラック #002040、リンク色のブルー #0080ff の 3 色を基本にして、これらを Sass の mix 関数で混ぜて色を作っています。

$white:     #f8f8f0;
$black:     #002040;
$blue:      #0080ff;

$darkgray:  mix($white, $black, 25%);
$gray:      mix($white, $black, 50%);
$lightgray: mix($white, $black, 75%);
$palegray:  mix($white, $black, 87.5%);

$darkblue:  mix($black, $blue, 50%);
$lightblue: mix($white, $blue, 75%);
$paleblue:  mix($white, $blue, 87.5%);

というわけでもちろん CSS は Sass を使って書いているわけですが、来るべき Sass 3.2 も視野に入れつつ書き方を試行錯誤しているので、現時点ではかなりぐちゃぐちゃ (「ソース見んな」って意味です)。近々プレリリース版を入れて整理して、まとまったら一式を GitHub に公開したいですね。

Re-Make/Re-Model

いままでホームページには最新の記事 1 本をまるまる載せてたんですが、直近の 8 本の抜粋を並べることにしました。でもそれだけだとちょっとさびしいのでスローガンというかキャッチコピーのようなものを置きたい、ということでロクシー・ミュージックの曲から Re-Make/Re-Model というフレーズを拝借。フォントはロゴと同じ Open Sans Condensed の Book 300 で、FixText で幅に応じてフォントサイズが変化するようになってます。

このフレーズを選んだのはもちろんそれなりに思うところがあってのことなのですが、そのあたりはこれからこのブログや仕事などで見せていければと思っております!