ストーク(STORK)|サイトカラーの変更方法と変更箇所を徹底解説

ストーク(STORK)|サイトカラーの変更方法と変更箇所を徹底解説

ストーク(STORK)の画像設定が完了したら、次はサイトカラーを変更しましょう。

ストークでは、カスタマイズページで簡単にサイトカラーを変更することができます。
変更できる項目も非常に多いので、それぞれきちんと設定して自分好みのサイトを作り上げましょう。
 
 


ストーク カスタマイズページにアクセス

WordPressの管理画面を開きます。
サイドメニューから『外観カスタマイズ』という順にクリックして進みましょう。

サイドメニューから『外観→カスタマイズ』という順にクリックして進む

サイドメニューから『外観→カスタマイズ』という順にクリックして進む

 
 
ストークのカスタマイズページが開きます。

ストークのカスタマイズページ

ストークのカスタマイズページ

 
 

サイトカラーの設定

サイドメニューの『サイトカラー設定』をクリックします。

サイドメニューの『サイトカラー設定』をクリック

サイドメニューの『サイトカラー設定』をクリック

 
 
以下のような画面に切り替わります。

ストーク サイトカラー設定画面

ストーク サイトカラー設定画面

 
 
ここでは、以下の21箇所のカラーを設定することができます。
  • 背景色
  • メインテキスト
  • リンク
  • リンク(マウスオン時)
  • ヘッダー背景(メインカラー)
  • ヘッダーテキスト
  • ヘッダーロゴ
  • ヘッダーリンク
  • ヘッダーリンク(マウスオン時)
  • メインコンテンツ背景
  • ラベル背景
  • ラベルテキスト
  • 入力フォーム背景
  • 記事ページ見出し(H2)背景
  • 記事ページ見出し(H2)文字色
  • サイドバーテキスト
  • サイドバーリンク
  • サイドバーリンク(マウスオン時)
  • フッター背景
  • フッターテキスト
  • フッターリンク
 
 
基本的なテキストの色からマウスオン時の色の設定まで、様々な項目のカラー設定が可能です。

リンゴ
21箇所もあるなんてビックリですよね。
 
 

スポンサーリンク

サイトカラーの変更方法

サイトカラーの変更方法はとっても簡単です。
まず、色を変更したい箇所の『色を選択』をクリックします。

『色を選択』をクリック

『色を選択』をクリック

 
 
すると、以下のようにカラーピッカーが開きます。
カーソルをドラッグ&ドロップして好きな色を選択しましょう。

カーソルをドラッグ&ドロップして色を選択

カーソルをドラッグ&ドロップして色を選択

 
 
リンゴ
マウス操作で直感的に色を変更できます。
 
 
入力欄に直接カラーコードを入力してカラーを設定することもできます。

カラーコードを入力して色を設定することも可能

カラーコードを入力して色を設定することも可能

 
 
サイトカラーに使う配色は以下の記事を参考に探してみてください。

もう配色で迷わない!カラーパレットサービス「Color Hunt」の使い方

2018.02.13
 
 
色を選択すると、ページ右側のプレビュー画面で該当箇所の色が変わります。
こちらで確認しながらカラーを変更しましょう。

プレビュー画面でカラーを確認

プレビュー画面でカラーを確認

 
 
カラーを初期状態に戻したい場合は、『デフォルト』ボタンをクリックします。

カラーを元に戻したい場合は、『デフォルト』ボタンをクリック

カラーを元に戻したい場合は、『デフォルト』ボタンをクリック

 
 
全てのカラー設定が完了したら、『公開』ボタンをクリックして設定を反映させましょう。

『公開』ボタンをクリック

『公開』ボタンをクリック

メモ
『公開』ボタンクリックするまで実際のサイトには反映されないので、好きなだけ色々なカラーを試してみましょう。
 
 
サイトカラーの変更方法も分かったところで、次は実際にどの部分の色が変更されるのかそれぞれ解説します。
 
 

背景色

サイトの背景色を変更できます。

サイトの背景色を変更可能

サイトの背景色を変更可能

 
 

メインテキスト

記事のタイトルや本文などのメインテキストの色を変更できます。

メインテキストの色を変更可能

メインテキストの色を変更可能

 
 

リンク

リンクの色を変更できます

リンクの色を変更可能

リンクの色を変更可能

 
 

リンク(マウスオン時)

リンクにマウスオンした時の色を変更できます。

リンクにマウスオンした時の色を変更可能

リンクにマウスオンした時の色を変更可能

 
 

ヘッダー背景(メインカラー)

ヘッダーの背景色を変更できます。

ヘッダーの背景色を変更可能

ヘッダーの背景色を変更可能

 
 

ヘッダーテキスト

ヘッダーのサイトディスクリプションの色を変更できます。

ヘッダーのサイトディスクリプションの色を変更可能

ヘッダーのサイトディスクリプションの色を変更可能

 
 

ヘッダーロゴ

ロゴ画像を設定していない場合の、ロゴテキストの色を変更できます。

ロゴテキストの色を変更可能

ロゴテキストの色を変更可能

 
 

ヘッダーリンク

メニューや検索アイコンなどのヘッダーリンクの色を変更できます。

ヘッダーリンクの色を変更可能

ヘッダーリンクの色を変更可能

 
 

ヘッダーリンク(マウスオン時)

ヘッダーリンクにマウスオンした時の色を変更できます。

ヘッダーリンクにマウスオンした時の色を変更可能

ヘッダーリンクにマウスオンした時の色を変更可能

 
 

メインコンテンツ背景

記事などのメインコンテンツの背景色を変更できます。

メインコンテンツの背景色を変更可能

メインコンテンツの背景色を変更可能

 
 

ラベル背景

カテゴリーラベルの背景色を変更できます。

カテゴリーラベルの背景色を変更可能

カテゴリーラベルの背景色を変更可能

 
 

ラベルテキスト

カテゴリーラベルのテキストの色を変更できます。

カテゴリーラベルのテキストの色を変更可能

カテゴリーラベルのテキストの色を変更可能

 
 

入力フォーム背景

テキスト入力欄や検索フォームなどといった入力フォームの背景色を変更できます。

入力フォームの背景色を変更可能

入力フォームの背景色を変更可能

 
 

記事ページ見出し(H2)背景

記事やウィジェットで使われる見出し(H2)の背景色を変更できます。

見出し(H2)の背景色を変更可能

見出し(H2)の背景色を変更可能

 
 

記事ページ見出し(H2)文字色

記事やウィジェットで使われる見出し(H2)の文字の色を変更できます。

見出し(H2)の文字の色を変更可能

見出し(H2)の文字の色を変更可能

 
 

サイドバーテキスト

サイドバーのテキストの色を変更できます。

サイドバーのテキストの色を変更可能

サイドバーのテキストの色を変更可能

 
 

サイドバーリンク

サイドバーのリンクの色を変更できます。

サイドバーのリンクの色を変更可能

サイドバーのリンクの色を変更可能

 
 

サイドバーリンク(マウスオン時)

サイドバーリンクにマウスオンした時の色を変更できます。

サイドバーリンクにマウスオンした時の色を変更可能

サイドバーリンクにマウスオンした時の色を変更可能

 
 

フッター背景

フッターの背景色を変更できます。

フッターの背景色を変更可能

フッターの背景色を変更可能

 
 

フッターテキスト

フッターのテキストの色を変更できます。

フッターのテキストの色を変更可能

フッターのテキストの色を変更可能

 
 

フッターリンク

フッターのリンクの色を変更できます。

フッターのリンクの色を変更可能

フッターのリンクの色を変更可能

 
 
サイトカラーの変更箇所は以上です。
 
 

まとめ

今回は、ストーク(STORK)でサイトカラーを変更する方法と、全てのカラー変更箇所について解説しました。

ストークでは、サイトの背景色、ヘッダー色、サイドバー色、フッター色など様々な項目の色を簡単に変更することができます。
HTMLCSSの知識も必要ないので、納得いくまで色々なカラーを試してみましょう。
 
 

ストーク完全マニュアル

ストークの魅力・使い方・カスタマイズ方法を余すことなく詰め込んだ完全マニュアルです。

ストーク完全マニュアルへ

 
STORK(ストーク)の魅力・使い方・カスタマイズ完全マニュアル

スポンサーリンク








ストーク(STORK)|サイトカラーの変更方法と変更箇所を徹底解説