WordPressのテーマ「Diver」を使用してWordPressサイトをカスタマイズします。本稿では、WordPressのカスタマイズメニューから「カラー設定」を変更します。
記事の目次
テーマカラー
デフォルトでカスタマイズになっています。少しずつ変えてみて、サイトのイメージを作っていきましょう。以下は、メインカラーは「青」、サブカラーは「緑」でサイトのカラーを調整してみました。
ヘッダー背景
ミニヘッダーやヘッダーテキストが目立つように明るめの色を設定します。
- 色の設定：#b5e2ff
ミニヘッダー背景
キャッチフレーズが目立つように、濃いめの配色にしてみました。
- 色の設定：#1f50c4
固定ヘッダー背景
スクロールダウンした時に表示される「固定ヘッダー」ですが、ヘッダー背景に合わせて背景色を設定します。透明色に設定しましょう。
- 色の設定：rgba(68,150,226,0.7)
ビッグフッター背景
引き締まったイメージのサイトを目指したく、本サイトでは薄めのグレーにしています。
- 色の設定：#c1c1c1
フッター背景
引き締まったイメージのサイトを目指したく、本サイトでは濃いグレーにしています。
- 色の設定：#353535
フッタリンク
本サイトでは、サイトカラーに合わせて、濃いグレーに対して目立つような色にしています。
- 色の設定：#6bb7ff
フッタリンク（マウスオン時）
本サイトでは、フッターリンクに対して、マウスオンしたことが分かるように明るい色にしています。
- 色の設定：#6bffff
ページネーションボタン背景(現在)
本サイトでは、サブカラーの緑を使用してみました。
- 色の設定：#5d8763
補足
「カラー設定」の画面で変更できない、他の配色は、以下で設定します。
- スクロールボタン：デザイン設定①
- ウィジェット：デザイン設定②
- TOC+（Table Of Content Plus）：Diverオプション（投稿設定）
- 【標準】検索ボタン：追加CSS
- 【Diver】絞り込み検索：追加CSS
おわりに
カラー設定は、細かく色の設定ができるので、配色をよく考えて設定する必要があり、ある程度サイトデザインが決まってから設定してもよいでしょう。
関連記事