以前、外見周りのカスタマイズについての記事を書きました。で、あちらに適宜変更を加えてもいいのですが、そもそもあちらは長すぎることもあり、分割して書くことにしました。
広告
現在のカラーパレット/配色スキーム
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フォントで指定しようかなと思っています。