Diverの初期カスタマイズ(カラー設定)

B!

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

おわりに

カラー設定は、細かく色の設定ができるので、配色をよく考えて設定する必要があり、ある程度サイトデザインが決まってから設定してもよいでしょう。

関連記事

 

最新の記事はこちらから