FOCUS

はてなブログテーマ"Focus"のカスタマイズやあれこれ

Focusで使用している主なカラーコード一覧

Focusカラーコード一覧について

テーマ紹介にありがちなカラーコード一覧を記載しておきます。

これらのカラーコードを変更することでFocusを使用しつつも自分らしいデザインに変えることができます。

本文などに使用するメインカラー "#454545"

#454545は黒より少しグレーに近づけたカラーです。白地の背景に完全な黒の本文だとコントラストが強すぎて目に負担がかかることがあるため、それを避けるために視認性を確保できる範囲でグレー寄りにしました。好みによってはもう少しグレー寄りにカスタマイズしても良いかもしれません。

f:id:ganapati55:20171121141843p:plain

リンク色に使用しているカラー"#4f96f6"

#4f96f6は主にURLリンクが貼ってある場所つまり a タグのある場所で使われています。リンク色はサイト毎の特色カラーの一つともいえるので、自分の好みの色に変更しても良いかと思います。ただ、おすすめはやはり青系統のカラーです。リンク=青系統のカラーというのがスタンダードな認識なので読み手が理解しやすいのです。

f:id:ganapati55:20171121142230p:plain

訪問済みのリンクに使用しているカラー"#92c6f3"

#92c6f3は訪問済みのリンクに対して使用しています。紫系統のカラーやグレー系統のカラーもポピュラーですが、一度訪問済みのページはあまり重要ではないだろうという意図で薄い青にしました。ただ、訪問済みでも何度も見て欲しいときなどは視認性が悪いというデメリットを考えると、逆に青系統でより濃いめのカラーに変更したほうが良いかもしれません。

f:id:ganapati55:20171121142622p:plain

アクセントカラー1"#977d3b"

#977d3bはテーマを象徴するアクセントカラーです。大きな部位に使わずに小さな部位に使うことで「ゴールド」っぽい雰囲気が出るようになっています。このカラーコードが使用されている部位をCSSから検索して別のカラーに置き換えるだけでサイト全体の雰囲気がガラッと変わるはずです。

f:id:ganapati55:20171121142934p:plain

アクセントカラー2"#4eacd1"

#4eacd1は「はてなブログ」にはおなじみのアクセントカラーです。管理画面などでよく見かけます。落ち着いた雰囲気があるのでお勧めのカラー。文章の中にアクセントを入れたいときに使いやすいです。

f:id:ganapati55:20171121143221p:plain

アクセントカラー3"#999"

#999に限らずFocusではグレー系のカラーを多用しています。グレー系のカラーはコンテンツを妨げず、かつ他のカラーとも合わせやすい特徴があります。薄いグレー系カラーとしては#f0f0f0も良く使用しています。

f:id:ganapati55:20171121143540p:plain

見出しカラー "#111111"

見出しに関してはビシッと表示させたいのでほぼまっ黒な#11111を使用しています。このあたりのカラーも入れ替えることでサイト全体の雰囲気を大きく変えることができます。

f:id:ganapati55:20171121143823p:plain

カラーを並べてみる