wordpressの外観の色の変更~背景、ヘッダー、フッター、ナビゲーションメニュー等~

シェアする

今回は、wordpressの外観の背景色等の色の変更の話をしたいと思います。色の変更と言っても、背景色、ヘッダー色、フッター色、ナビゲーションメニューの色、リンク色、リンクホバー色と、結構様々あるので、最初は戸惑うかもしれません。

なので、外観の色の変更について、簡単に場所を示しながら説明したいと思います。なお、テーマはsimplicity2を用いています。

スポンサーリンク

■「外観」⇒「カスタマイズ」⇒「色」

冒頭で示した色の変更は、上の写真に示すように、wordpressの管理画面(ダッシュボード)の「外観」⇒「カスタマイズ」を選択して、カスタマイザーの画面になるので、そこで「色」を選択してください。

■各々の色の説明します

各々の色の説明については、wordpressの管理画面(ここではsimplicity2)で、一言説明があるものの、言葉だけでは、どこのこと言っているのかわかりづらかったりするので、各々の色について説明していきたいと思います。

※simplicity2の管理画面で、上から順番に説明していきます。

背景色

その名のごとく背景色です。PC限定のようですね。スマホ表示では、そもそも背景がないので。

リンク色

内部リンクや外部リンクの色です。多くの読者は、リンクは青と認識していることが多いので、大半の人はデフォルトのまま、青で良いと思います。

リンクホバー色

内部リンクや外部リンクにカーソルを合わせたときに出てくる色です。ここもデフォルト通り、赤で良いかと思います。

ヘッダー外側背景色

ヘッダー部分の外側の背景色です。デフォルトでは、背景色と同等の色になっています。

ヘッダー内側背景色

PCのヘッダー部分の内側の背景色です。デフォルトでは、背景色と同等の色になっています。また、ヘッダー用の画像やタイトルロゴを設定すれば、それが優先的に反映されます。

サイトタイトル色

PCのサイトタイトル色です。

サイト概要色

PCのキャッチフレーズの色です。

モバイル時ヘッダー背景色

スマホ表示のヘッダーの背景色です。ここでも、ヘッダー画像やタイトルロゴを設定していれば、それが優先的に反映されます。

モバイルサイトタイトル色

スマホ表示のサイトタイトル色です。

モバイルサイト概要色

スマホ表示のキャッチフレーズの色です。

グローバルナビ色

PCでは、トップ画面にナビゲーションメニューが表示されます(カテゴリー等)。この色です。

グローバルナビリンク色

ナビゲーションメニューの文字の色です。名称では想像しにくいですが……

グローバルナビリンクホバー色

ナビゲーションメニューにカーソルを合わせた際に出てくる色です。メニューや文字の色と被らないように注意しましょう。

メニューボタン色

スマホのメニューボタンの文字や記号の色です。

メニューボタン背景色

スマホのメニューボタンの背景色です。

※ここではメニューボタンはスライドイン表示になっています。メニュー画面の表示の変更方法については、以下をご覧ください。

トップへ戻るボタン色

一番右下にあるトップへ戻るボタンの記号の色です。

トップへ戻るボタン背景色

トップへ戻るボタンの背景色です。

フッター色

一番下の部分はフッターと言いますが、この部分の色です。人間に例えれば一番上は頭だからヘッダー、一番下は足だからフッターと覚えてください。


スポンサーリンク

シェアする

フォローする

関連コンテンツユニット
スポンサーリンク
wordpressの外観の色の変更~背景、ヘッダー、フッター、ナビゲーションメニュー等~
この記事をお届けした
解放デビューの最新ニュース情報を、
いいねしてチェックしよう!