ブログに使用する色、フォントサイズ、フォントなどを調整しました。

 以前、外見周りのカスタマイズについての記事を書きました。で、あちらに適宜変更を加えてもいいのですが、そもそもあちらは長すぎることもあり、分割して書くことにしました。

広告

現在のカラーパレット/配色スキーム

 Verbosaの色設定オプション準拠で列挙していきます。設定理由は一覧の後に述べます。

  • Site Background(サイトの背景色): #eeeeee
  • Site Text(サイトテキストの色): #2b2b2b
  • Content Background(コンテンツの背景色): #fcfcfb
  • Sidebar Background(サイドバーの背景色): #fcfcfb
  • Menu Text(メニューのテキスト色): #2b2b2b
  • Menu Text on Hover(ホバリングしたときのメニューのテキスト色): #a60606
  • Footer Widgets Background(フッター・ウィジェットの背景色): #fcfcfb
  • Post/Page Titles(投稿やページにおけるタイトルテキストの色): #2b2b2b
  • Post metas(投稿メタ(更新日時とかカテゴリ表示)のテキスト色): #727171
  • Primary Accent(第一アクセントの色): #1c1c1c
  • Secondary Accent(第二アクセントの色): #a60606

 色の選定理由は、第二アクセントの色以外の謎のコードはだいたい日本の伝統色に関するサイトを参照して決めました。あと#2b2b2bは色にいい感じ名前(蝋色)があったこともありますが、このサイトの名前がにびいろとも読めることから、2bで…まあシャレです。
 主に参照したサイトは以下2つ:



 特に下のサイトが綺麗で、こっそり伝統色織り込んでみるか、という気分にさせてくれました。アクセントカラーを猩猩緋にしようか迷ったのですが、ワンポイントにするにはきついな、と思ってやめておいております。

 第二アクセントは、今までの#8e0404だと暗いかなと思ったので、以下のサイトを参考にして、明るめの色に変更しました。

メイリオの適用

 以下のようなCSSコードを使って、body等にメイリオを適用しました。サイトタイトルは明朝体のほうがいいかな、と思ったのでこのCSSコードの下部でserif指定をかけています。”Merriweather”は英字フォントで、このサイトの英字にだけ適用したかったので、そのために入れ込んでいます。なお、Merriweather自体はGoogleフォントからWebフォントとして利用することが可能だそうです。

適用対象部分{
font-family: -apple-system, BlinkMacSystemFont, “Merriweather”, Mairyo, “M+ 1p”, sans-serif;
}

#site-title a{
font-family: serif;
}

 なおMacなどの指定に関しては


を参考にしました。

その他コメントなど

 なお、メイリオからのフォントの変更は未定です。
 一応、


 あたりを参考に游ゴシック指定にチャレンジしたんですが、まああれです、なんていうか、難しくて挫折しました。
 次は時間を作って、Noto Sans JPでしたっけ、あのあたりの読みやすいものをWebフォントで指定しようかなと思っています。

広告

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA