ブログテーマを新しくしました。v20140907
ブログテーマを新しくしました。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