はじめに、cssのリファクタリング
ここしばらくでブログの css の整理をしました。
若干の変更を加えつつ、主に冗長な指定を修正し使われていない指定を外していきました。
なぜリファクタリングが必要になったかといいますと…
- スマートウォッチからフルHD向け指定まで計5パターンも！レイアウトを切り替えている、フルHD > PCとタブレット横向き > タブレット縦向き > スマホ > ウォッチ
- 印刷用CSS
- Blogger ではテンプレートが書き出した id や class をフックしてセレクタを書くので階層が把握し難い...(ここまで言い訳)
- Sass 等を利用していない
- 一つの .css ファイルにズラズラ書いている
- スマートウォッチ用では背景色が白から黒になり、文字色、特にリンク色指定の上書きでゴチャゴチャしている
相変わらず Sass に手を出していませんが css を分けてコードを見通しやすくできました。(サーバに上げる際はバッチファイルで一本化して minify しています)
満足してしばらく眺めているとイマイチ野暮ったいことに気づきました (；・`д・´)
一本化バッチファイル
@echo off
type nul > all.css
type css\*.css >> all.css
どこをどう直せばオサレになるの…？
昨夜遅く、僕は“タイポグラフィ中心のかっこいい日本語のサイト”を検索しその答えを探しました。
一番最初の画像はその時点でのスクリーンショットになります。
読者の皆さんもどこを直したらいいか？ぜひ考えて教えてください m(_ _)m
僕の答えは…
そして昨夜のうちに至った結論は次の2点なります。
施策のたびにスクリーンショットを残しています、効果をご確認アレ。
見出しの太字を辞める
ブログタイトル(<h1>)と記事の見出し(<h2>, <h3>)に太字を使っていたのをノーマルにしました。
見出しの太字については特に考えもなく、見出しなので目立てばよいとデフォルトスタイルのままでした。
この指定が野暮ったい印象の最大の元凶だったと思います。
ヘッダーの背景色を辞める
ヘッダーの黒系の背景色(#333333)が重たくのしかかっているように感じたのでメイン部分と同じ白系にしました。(完全な白では眩しいので若干グレーにしています)
替わりにボーダーをひいてアクセントとし、ブログタイトルのフォントサイズも少し小さくしました。
このようにヘッダーをすっきりとさせるデザインはしばしば見かけ憧れていました。そしてこのほどようやく取り入れることができました。
ちなみに本ブログにテーマカラーはなくこの色(#333333)に思い入れがあるわけではありません。
フルHD向けスタイルについて
最後にフルHD向けスタイルのご紹介です。この手の話をあまり聞かないようなのでどうぞこの機会に見ていってくださいな。
本ブログは自身の Web 開発時に参照するためパソコンからフルHD画面での閲覧が多くなります。
そこで画面サイズが十分に大きい場合にメインコンテンツを2カラムで表示します。
リキッドレイアウト
似た発想にリキッドレイアウト(2011頃登場？)があります。
大型化するディスプレイスペースを有効利用するため、カラム幅を表示領域に比例させます。
しかしこのレイアウト手法が登場した当時はメインカラムが広くなると一行の文字数が増えてしまい可読性が落ちる、という欠点がありました。
現在では文字サイズをベースとしたメディアクエリと columns 指定によって簡単に可読性が維持されます。
@media screen and (min-width: 96em) {
/* 2カラム */
.Pb {
-webkit-column-count : 2;
-webkit-column-gap : 2.6em;
-moz-column-count : 2;
-moz-column-gap : 2.6em;
column-count : 2;
column-gap : 2.6em;
}
/* 左カラム最初の<h3>のマージンを0にして右カラムに揃える */
.Pb>*:first-child {
margin-top : 0;
}
}
フルHD向けスタイルの調整
今回の変更ではフルHD画面では左に寄っている見出し文字を中央寄せしました。
PC（とタブレット横向き）用にはサイドナビとのバランスで見出し文字は左に寄せます。(シングルカラムのタブレット縦向き用では中央寄せします)
一方のフルHD画面では広くなったメインカラムとのバランスで中央寄せが良いと判断しました。
最後に
スマートウォッチ向けスタイル
スマートウォッチ向けスタイルにつきましては次の記事にて。
ではでは～
今年初めのブログの様子
今年の前半にブログデザインの修正に着手する前のキャプチャが出てきた。
隔世の感があります…