Cocoonのテーマでサイト全体の色をカスタマイズする手順【WordPress】

Cocoonのテーマでサイト全体の色を調整する手順【WordPress】 ブログ運営

こんにちは、ベーやんです。

当ブログは、WordPressのCocoonのテーマを使っています。

無料のテーマでありながら、豊富な機能が最初から備わっており、カスタマイズもしやすく、非常に使い勝手が良いので愛用しています。

今回は、このCocoonのテーマでサイト全体の色をカスタマイズする手順を紹介したいと思います。

Cocoonのテーマをダウンロードしたい方は前回の記事を先にご覧ください。

スポンサーリンク

完成イメージ

Cocoonをインストールした状態では次の画像のように、白色とグレーをベースにした味気ない色味になっています。

今回目指す完成イメージはこちらです。

青色をベースにしたサイトにしていきたいと思います。

色などは好みに合わせて変更できるのがCocoonの良いところです。

サイト全体の色をカスタマイズする手順

それでは色の変更の手順を説明していきます。

まずはじめにWordPressの管理画面から「Cocoon設定」を選択します。

Cocoon設定の画面が表示されますので「全体」をクリックします。

下にスクロールすると「キーカラー」という項目がありますので、こちらを編集していいきます。

サイトキーカラーの下の「色を選択」をクリックすると色を選択することができます。

ここに好きな色を入れましょう。

今回は青色ベースの「#3399cc」を適用したいと思います。

次にサイトキーテキストカラー下の「色を選択」をクリックします。

こちらではテキストの色を選択することができます。

今回は白色の「#ffffff」を適用したいと思います。

サイトカラーとサイトテキストカラーの選択が終わったら一番下までスクロールしましょう。

変更をまとめて保存」を選択すると色がサイトに反映されます。

これでサイトを確認してみると、最初にご覧いただいたイメージになっているかと思います。

赤枠で囲んだところが色の変わったところです。

ヘッダーやフッター、サイドバーの見出しなどが選択した色に変わっていると思います。

さらに個別の記事を見てみると、記事内の見出しも選択した色に変わっていると思います。

細かい設定も必要ないので簡単ですね。

ぜひ好みの色に変更してみてください。

color-sample.comというサイトで好みの色を見つけて、カラーコードをコピペすると好きな色を設定できます。

色見本と配色サイト - color-sample.com
More than 16 million colors



Cocoonのテーマでサイト全体の色をカスタマイズする手順は以上です。

最後までご覧いただきありがとうございました。

それでは。

当ブログはエックスサーバー を使用しています。

ブログ運営
スポンサーリンク
ベーやんをフォローする
当ブログはエックスサーバーで運営中です!
エックスサーバー

エックスサーバーは安心と快適さを兼備した高性能レンタルサーバー。
高い品質を誇るレンタルサーバーサービスを、手ごろな料金で利用することが可能。

・月額900円(税抜)から、大容量200GBからの高コストパフォーマンス!
・マルチドメイン・メールアドレス無制限!
・独自SSLを無料で利用可能!
・データの消失を防ぐ、自動バックアップ機能を標準提供!
・初心者でも安心の24時間365日メールサポート!

当ブログはエックスサーバーで運営中です。

TACLIMB

コメント

タイトルとURLをコピーしました