リデザイン!

約 1 年半ぶりにサイトをリデザインした。細かいところはまだいろいろといじると思うけど、とりあえずおもな変更点をまとめておきたい。

レイアウト

ページ全体は 768px の固定幅、左寄せ。本文部分の左側 4 分の 1 を余白にして、画像やソースコードなどをはみ出させるレイアウトを試しに採用。Jason Santa Maria や maratz.com あたりをパクってる。

タイポグラフィ

リデザインしたかった最大の理由が、ヘッダ。以前は Helvetica/Arial をかなり大きめに配置してたけど、さすがに邪魔に感じてきて、スッキリさせたかった。そこで、ロゴとグローバル・ナビゲーション、および見出しの一部に @font-face で The League of Movable Type の League Gothic を採用。フォントファイル一式は、以前このブログでも紹介した Font Squirrel から入手した。ちなみに CSS はこんな感じ:

@font-face {
  font-family:
    "League Gothic";
  src:
    url("/fonts/League_Gothic.eot");
  src:
    local("League Gothic Regular"),
    local("LeagueGothic"),
    url("/fonts/League_Gothic.woff") format("woff"),
    url("/fonts/League_Gothic.otf") format("opentype"),
    url("/fonts/League_Gothic.svg#LeagueGothic") format("svg");
}

.page-header .logo,
.page-header .nav.global {
  font-family: "League Gothic", "Arial Narrow", sans-serif;
}

なお、@font-face は読み込まれる際にスタイルの適用されていない状態が一瞬見えてしまう場合がある。この現象を FOUT (Flash of Unstyled Text) と呼ぶらしい。

対策のひとつとして、@font-face で指定したフォントに似ていて、かつインストール率の高いフォントをフォールバックとして指定するという手がある。そうすれば、@font-face フォントに切り替わったときに違和感が少ない、という考え。というわけでとりあえずここでは Arial Narrow を指定してみたけど、League Gothic と似ているとは言いがたいので、FOUT 対策としてはかなり微妙。

そのほかの部分は今までと変わらず Helvetica/Arial、等幅は Menlo/Consolas。和文フォントは指定せず、ブラウザの設定に依存。基本の CSS は以下の通り:

body {
  font: 15px/1.67 "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}
code, kbd, samp {
  font-family: "Menlo", "Consolas", "Courier New", monospace;
}

カラー

今までは背景色 white (#ffffff) に前景色 black (#000000)、そしてリンクは #0080ff という、かなりざっくりした配色だったんだけど、このサイトは横幅がせまくて画像やボーダーなどが少ないこともあり、かなりまぶしく感じることがあった。そこで今回は、背景をごく薄いオフホワイトの #fcfcf8、前景はブラックに近いブルーの #002040 にしてみた。イメージとしては、最近愛用のツバメノートにブルーブラックのインクで書いた感じを狙っている。

そのほか、今までざっくりしていた反動で、#f0f0e0 や #e0e0c0 などのベージュ系、#8090a0 のブルーグレイなど、僕にしては微妙な色も使ってるけど、微調整がめんどうなのでざっくりに戻すかも。

コメントフォームを廃止して、かわりに Twitter とはてなブックマークでの言及を収集して表示させることにした。はじめての試みなので、上手くいくかどうかやや不安。JavaScript から各種 API を利用してるんだけど、長くなるので詳しくは稿を改めて書きたい。