サイトの色とデザインを変更する

ココルーチェではサイト全体のカラー設定記事内のデザイン設定の2つの項目があります。

このページではサイト全体のサイトカラーの変更の方法をお伝えします。
記事内のカラー設定のしかたはこちらからどうぞ。

1.サイト全体の色を設定する

サイトカラーの変更では、以下のカラー設定ができるようになっています。

  • テーマカラー
  • 背景色
  • ブログタイトルの色
  • グローバルメニューの色
  • リンクにマウスを合わせたときの色

では実際に変更してみましょう。

サイトにログインをして管理画面のトップページに進みます。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-06-23-39-37

管理画面の「デザイン設定>「カスタマイズ」をクリックします。

次に項目の中の、「カラー設定」を選択します。
すると下図のような画面になります。
ここで各項目を好きな色に変更できます。

※ロゴを設定している場合は「ブログタイトルの色」は変更されません。

バランス良い配色にするポイントは

  • 背景色は薄めにする
  • できるだけ色を統一する

この2点を守ればキレイになります。
どんどん変更して好きな配色をさがしましょう。

変更例をご紹介します。
是非参考にしてみてください!

【ピンク系】

配色例1

【カジュアルフェミニン系】

配色例2

【クール系】

配色例3

2.記事内のカラーとデザインを設定をする

テーマカラーを設定したら次は記事内のデザインを決めていきましょう。
記事内のカラー設定では以下の部分のデザイン設定ができます。

  • 本文の文字サイズの変更
  • 記事内のリンク文字の色
  • 文字装飾【マーカー】の色
  • 文字装飾【カスタムボタン】の色
  • 文字装飾【色付き枠】の色

また、記事にインストール時には標準で表示される項目を好みに応じてOFFにできるようにしています。
このあたりは好みに合わせて選択するといいですね。

  • 記事の最初に表示されるアイキャッチ画像
  • 記事の下に表示される関連記事
  • 記事の下に表示されるFacebookコメント欄

それでは実際に変更してみましょう。

文字サイズを変更する

文字サイズはわかりやすいように5つのサイズがあり、標準ではMサイズになっています。
下の動画を見てもらうとわかりますが、記事内の全ての文字がバランスを保ってサイズ変更されます。【動画①】

フォントサイズ変更のイメージ

ここでお好きな文字サイズに設定してください。

記事内のカラーデザインを変更する

次に記事内で使うボタンやマーカーなどの装飾部分のカラー変更をしてみます。【動画②】

ボタンカラー変更イメージ

ここでもあまりいろんな色を使わないほうがキレイにまとまります。
テーマカラーと合わせて色を調整してみてください。

次の設定「広告を掲載する」に進む

アフィリエイターのための最高のワードプレステーマ【ATLAS】ができました

アフィリエイトに特化したWordPressテーマ「ATLAS(アトラス)」が完成しました。

操作も簡単で超使いやすいです。

ランキング機能やボタン作成、記事下CTAの設置など、サイト作成の高速化&収益性を高めるための工夫を随所に備えています。

― 主な特徴 ―

  • プロ目線で見たアフィリエイトサイトに必要な機能をすべて搭載
  • 直感的に操作でき、スピーディーに収益サイトを構築できる
  • シンプルで美しいテーマデザイン

WordPress初心者でも簡単に使えるように複雑な設定を可能な限り取りのぞきました。

また、レイアウトも自由自在にアレンジできるのでWordPressでスッキリとしたデザインのブログにも使えます。

ぜひデモサイトで確かめてみてください。

※テーマインストール後、HTMLやCSS等をカスタマイズすることなくデモサイト通りに構築できる仕様にしています。

テーマの詳細を見る デモサイトを見る