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