ココルーチェの使い方

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

ココルーチェ設定マニュアル【サイトデザインの設定】

ココルーチェではサイト全体のカラー設定記事内のデザイン設定の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サイズになっています。
下の動画を見てもらうとわかりますが、記事内の全ての文字がバランスを保ってサイズ変更されます。【動画①】

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

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

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

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

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

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

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

ABOUT ME
赤石カズヤ
赤石カズヤ
WEBコンテンツ制作・開発をしながらのんびり活動中。常識に縛られず、ビジネスの仕組み化を常に意識。気が向いたときにWordPressのカスタマイズのことを発信してみたり。
新次元のWordPressテーマ【JIN】をリリース!

アフィリエイターで有名なひつじさん(@hituji_1234)とコラボし、史上最高とも呼べるWordPressテーマ【JIN】を開発しました!

開発期間は11ヶ月と非常に長くかかりました。
【使う人】【見る人】それぞれの立場にたって、何度も何度もブラッシュアップを重ねたためです。

その結果、デザイン性・使い勝手・SEOの3つがとてつもないレベルで融合したテーマになりました!
ひつじさんと2人で特設サイトを作りましたので詳しくはそちらでどうぞ!

JIN特設サイトデモ一覧