ブログテーマを新しくしました。8 月に方向性を決めてから、気になる部分をちょこちょこ更新していたのですが、一区切り付きました。ワンカラムのレスポンシブテーマとなります。

各デバイスでの見た目はこんな感じ

PC

SmartPhone

実装する上で取り入れたもの

記事サムネイル

実装する上でいちばん拘ったのは、記事サムネイルの実装です。普通ならば、img タグに画像のソースを突っ込むのですが、その方法では画面サイズが変わった時の自由度が低くなるのがネックでした。

このブログテーマでは、画像を CSS の background-image で描画させて、background-size: cover することで、サイズ可変に強くしています。実装はこんな感じです：

<div class="thumbnail">
  <a
    href="http://rakuishi.com/archives/6811"
    style="background-image: url(http://rakuishi.com/wp-content/uploads/2014/09/jquery.gif)"
  ></a>
</div>

a {
  width: 100%;
  height: 125px;
  display: block;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  @media (min-width: 468px) {
    width: 200px;
  }
}

実装のヒントは Feedly から得ましたが、Feedly 自体はレスポンシブ対応していないという。ちなみに、このブログの登録者数は、1,000 超えてるんですね。ありがとうございます。 → Feedly | rakuishi.com

タイポグラフィ

Google Fonts Open Sans とヒラギノ角ゴ、メイリオにしました。ヒラギノ角ゴの半角英語の間延びしてる感を Open Sans が補っていて、いい感じです。

<link
  rel="stylesheet"
  href="http://fonts.googleapis.com/css?family=Open+Sans:400,700"
/>

その他

外部リンクに飛ばす時 target="_blank" は「↗」を付けるようにしてみました。最近観ているアニメのアルドノアゼロのヘッダを参考にしました。機種依存文字ですが、手持ちのデバイスでは文字化けしていませんでした。→ ALDNOAH.ZERO