テンプレートの色やフォントを変える方法
utsusemi
新しく作成したテンプレートは、色とフォントをCSSの変数を使用して設定していますので、編集が簡単にできます。
色を変更する
- common.cssを編集します
- 下記CSSのカラーコードをお好きな色に変更してください。
/* カラー設定 */
:root {
--color-bg: #fafafa; /* 背景色 */
--color-text: #333333; /* 文字色 */
--color-main: #cccccc; /* メインカラー */
--color-sub: #dddddd; /* サブカラー */
--color-accent: #FE0114; /* アクセントカラー */
--color-black: #292929; /* 黒 */
--color-white: #ffffff; /*白 */
}フォントを変更する
- Google Fontsから好きなフォントを選ぶ→「Get font」をクリック
- 「<>Get embed code」ボタンをクリック
- CSSファイルにコピペするコードが表示されるので、@importを選択
- 「Embed code in the <head> of your html」のエリアの、<style></style>の中の@import～の部分だけをコピーし、common.cssの2行目に張り付ける
- Google Fontsのコピペエリアの「font-family: 〇〇〇, sans-serif;」の〇〇〇の部分を、下記CSSのフォント名の部分と差し替える
/* フォント設定 */
:root {
--font-base: "Noto Serif JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
--font-title: "EB Garamond", "Noto Serif JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
}
色やフォントを変えるだけでかなり雰囲気が変わりますので、ご自身のサイトのイメージに合わせて変更してみてください☺
