この記事では、基本スタイル設定について解説しています。
基本スタイル設定では、サイトのテーマカラーやフォントサイズなど、サイトのベースとなる部分の設定を行っていきます。
目次
どこで設定するの？
設定は、外観 ＞ カスタマイズ ＞ 基本設定 ＞ 基本スタイル設定 で行います。
カラーの指定方法
基本設定として、「テーマカラー」「投稿内テキストリンク」「全体の背景」のカラーを設定することができます。
- まず、「色を選択」ボタンをクリックします。
- クリックするとカラーピッカーが表示されるので、色を選択します。
サトコハ 色は、カラーコードでも指定することができるよ。「色を選択」ボタンの横にある欄（#00a568と表示があるところ）にコードを入力してね。
テーマカラーを指定
サイト全体のテーマカラーを指定します。
カラーが指定されるエリア
- ヘッダーの背景カラー
- ウィジェットの見出し背景カラー
- カテゴリー名の背景カラー
- タグ管理のボタンカラー
- アイキャッチ上のカテゴリーカラー
カテゴリー名の背景色以外は、別の設定で変更することができるよ。
ヘッダーのデザインを変更する方法
タグ管理ボタンのカラーを設定する方法
アイキャッチ上のカテゴリーカラーを変更する方法
メインカラムのウィジェットの見出しカラーを変更する方法
サイドカラムのウィジェットの見出しカラーを変更する方法
投稿内テキストリンク色を指定
投稿内にリンクを貼ったときのテキストの色を指定します。
初期設定のカラーはこんな感じです。
全体の背景色を指定
サイト全体の背景色を指定します。デフォルトは、＃f1f1f1が採用されています。
例えば、薄いきみどり（#e7f9e3）に変更するとこんなイメージです。
全体の背景画像を登録
サイト全体の背景画像を登録できます。「全体の背景色を指定」と同じ範囲に背景画像が反映されます。
背景画像の登録方法
「画像を選択」をクリックします。
メディアライブラリから登録したい画像をクリックし、「画像を選択」ボタンを押します。画像がない場合は、アップロードしてくださいね。
変更したのがこちら。
今回お借りした背景画像はこちら。 Bg-Pattrens
画像をクリックするとジャンプします。
スマホ全体のフォントサイズを選択
スマホ全体のフォントサイズ（小・中・大）を変更できます。
タイトル比較
本文比較
PC全体のフォントサイズを選択
PC全体のフォントサイズ（小・中・大）を変更できます。
記事一覧のフォントサイズ比較
投稿ページのフォントサイズ比較
全体のフォントファミリーを選択
サイト全体のフォントファミリー（種類）を変更できます。
フォントは全部で4種類。
- 游ゴシック体（デフォルト）
- ヒラギノ角ゴシック
- メイリオ
- Noto Sans JP(WEBフォント）
4種類のフォントを比較
游ゴシック体とヒラギノ角ゴシックの違いがよくわからないのは私だけ？
