はてなブログのテーマカラーを変更する方法
の続きです。
前回ははてなブログのレスポンシブ対応について書きましたが、今回はテーマの色の変更とスマホ向けの見た目の調整について書きます。
まずは
色の調整
です。
手順としては
- 色の決定
- 色を適用する要素を探す
- CSSを修正
の3段階で実施です。
（普通にHTMLを書ける人はこの手順だと思います）
詳しく内容を書いていくと、
色の決定
ですが、ブログのテーマカラーを決め、併せてリンクにカーソルを重ねた時（hover）の色を決めます。
このブログではなんとなくで決めましたが、テーマカラーは
としました。
hover時の色は反対色の
としました。
※反対色といっても元々選んだ色がグレーなので結局グレーですが・・・
色を適用する要素を探す
は対象となる要素のhtml上のclassやidを探します。
単純にHTMLを眺めても時間がかかるだけなので、ツールを使って探しました。
ブラウザについているツールなどいろいろあると思いますが、私が使っているのは
です。
WEB系の技術者の人は大抵FireFoxにインストールしていると思います。
画面に表示されている要素をクリックするだけで、その要素にかかっているスタイルを階層構造も併せて表示する機能があるので大変便利です。
CSSを修正
は対象となる要素に合わせたCSSを書きます。
いきなり書き換えると公開しているブログが崩れてしまうので、こちらもFirebugを使って、表示している要素のスタイルを直接書き変えて確認しながらCSSを完成しました。
「スタイルを階層構造も併せて表示する機能」のスタイルを書き変えるとその場で見た目に反映され、修正後のイメージを直感的に確認できます。
後は反映ですが
設定 → 詳細設定 → headに要素を追加の欄に作成したCSSを貼り付ける → 反映するをクリック
で反映されます。
だいぶ長くなったので、最後の微調整を行った内容についてはまた今度書きます。
