*本ページにはプロモーションが含まれています
*本ページにはプロモーションが含まれています
ワードプレステーマdeerの色設定(1)
こんにちわsjiです。
この記事ではワードプレステーマdeerの色設定に関しての記事になります。
deerの色設定がわからないとお悩みの方はこの記事を最後までご覧になってスッキリしましょう
sji
- deerの色設定
- 1-A.ヘッダーの色(メインカラー)
- 1-B.ヘッダーの色
- 2.ヘッダー部分文字色
- 3.スマホ&タブレット左メニューカラー
- 4.ナビメニューの文字色(マウスオン)5.ナビメニュー背景色(マウスオン)
- 6.ナビメニュードロップダウン文字色7.ナビメニュードロップダウン背景色
- 8.メインの文字色
- 9.リンクテキスト色10.リンクテキスト色(マウスオン)
- 11.ボタン型リンク色12.ボタン型リンク色(マウスオン)
- 13.スペシャルボタン14.スペシャルボタン(マウスオン)
- 15.見出し2(h2)キーカラー16.見出し2(h2)文字色
- 17.見出し3(h3)キーカラー18.見出し3(h3)文字色
- 19.見出し4(h4)キーカラー20.見出し4(h4)文字色
deerの色設定
ダッシュボード⇒外観⇒カスタマイズ⇒サイトカラー(色)
![deerの色設定は外観からカスタマイズ](https://sji-heart.com/wp-content/uploads/2023/01/カスタマイズ.webp)
わかりやすくするため黄色と赤色で変更してみます。
1-A.ヘッダーの色(メインカラー)
1-A.ヘッダーの色(メインカラー)設定でヘッダー色変わる
![ヘッダーの色1](https://sji-heart.com/wp-content/uploads/2023/01/ヘッダー色1.webp)
1-B.ヘッダーの色
1-B.ヘッダーの色を1-A.と違う色にすればグラデーションになり、同じ色にすれば全て同じ色になります。
![ヘッダーの色2](https://sji-heart.com/wp-content/uploads/2023/01/ヘッダー色2.webp)
2.ヘッダー部分文字色
サイトタイトル・キャッチコピー・ナビメニュー・検索ボタンの色を変える場合色を変えましょう。 例(ヘッダーの色を黒など濃い色にした場合、文字色を白にするなど)
3.スマホ&タブレット左メニューカラー
スマホ画面⇒左上のハンバーガーメニュークリック⇒メニュー上部の色が変わる
![スマホ&タブレット左メニューカラー](https://sji-heart.com/wp-content/uploads/2023/01/スマホメニュー1-1.webp)
![スマホ&タブレット左メニューカラー変更](https://sji-heart.com/wp-content/uploads/2023/01/スマホメニュー2-1.webp)
4.ナビメニューの文字色(マウスオン)
5.ナビメニュー背景色(マウスオン)
4.ナビメニューの文字色はマウスオンすると指定した色に変わります。 5.ナビメニュー背景色はマウスオンすると文字の背景が指定した色に変わります。
![ナビメニューの文字色(マウスオン)
ナビメニュー背景色(マウスオン)色変更](https://sji-heart.com/wp-content/uploads/2023/01/ナビメニュー色.webp)
6.ナビメニュードロップダウン文字色
7.ナビメニュードロップダウン背景色
6.ナビメニュードロップダウン文字色 7.ナビメニュードロップダウン背景色
![ナビメニュードロップダウン文字色
ナビメニュードロップダウン背景色色変更](https://sji-heart.com/wp-content/uploads/2023/01/ドロップダウン色.webp)
子カテゴリー設定していないとドロップダウンは出ません
8.メインの文字色
記事の文字など文字色
9.リンクテキスト色
10.リンクテキスト色(マウスオン)
例)左リンクテキスト赤色 右リンクマウスオン黄色
![リンクテキスト色](https://sji-heart.com/wp-content/uploads/2023/01/リンク色-150x132.webp)
![リンクテキスト色(マウスオン)](https://sji-heart.com/wp-content/uploads/2023/01/リンクマウスオン.webp)
11.ボタン型リンク色
12.ボタン型リンク色(マウスオン)
例)左ボタン赤色 右ボタン黄色
![ボタン型リンク色変更](https://sji-heart.com/wp-content/uploads/2023/01/ボタン色.webp)
![ボタン型リンク色(マウスオン)色変更](https://sji-heart.com/wp-content/uploads/2023/01/ボタンマウスオン.webp)
13.スペシャルボタン
14.スペシャルボタン(マウスオン)
スペシャルボタン(sp)の色を変えます。マウスオンすると指定した色に一瞬なりこの色になります
![スペシャルボタン色変更](https://sji-heart.com/wp-content/uploads/2023/01/spボタン.webp)
![スペシャルボタン(マウスオン)色変更](https://sji-heart.com/wp-content/uploads/2023/01/spボタンマウスオン.webp)
15.見出し2(h2)キーカラー
16.見出し2(h2)文字色
h2の色変更
![見出し2(h2)キーカラー見出し2(h2)文字色変更](https://sji-heart.com/wp-content/uploads/2023/01/h2色.webp)
17.見出し3(h3)キーカラー
18.見出し3(h3)文字色
h3の色変更
![見出し3(h3)キーカラー・見出し3(h3)文字色変更](https://sji-heart.com/wp-content/uploads/2023/01/h3色.webp)
19.見出し4(h4)キーカラー
20.見出し4(h4)文字色
h4の色変更
![見出し4(h4)キーカラー・見出し4(h4)文字色変更](https://sji-heart.com/wp-content/uploads/2023/01/h4色.webp)
21.以降は別記事にて解説します。