フロントページのメインビジュアルに、プラグイン「grayish MV add」を使用中!詳しくはここをClick!
PR

テーマカスタマイザーでカラー変更(使い方とカラーの適用箇所まとめ)

カスタマイズ
記事内に広告が含まれています。

grayishのスキン独自テーマカスタマイザーでカラー変更を行うことができます。
カラー変更の手順と、適用される箇所について、まとめました。

スポンサーリンク

テーマカスタマイザー立ち上げ手順

まず、テーマカスタマイザーの立ち上げ手順がご不明の場合は以下をご覧ください。

テーマカスタマイザー手順

テーマカスタマイザー立ち上げの手順
  • STEP1
    管理画面 > 外観 > カスタマイズ を選択

    テーマカスタマイザーが立ち上がります。

  • STEP2
    左側の一番下にある、「skin-grayish: カスタマイズ」をクリック

    スキン独自のカスタマイズ項目が表示されます。

スキン独自のカスタマイズ項目の一覧は以下になります。

スキン独自のカスタマイズ項目の一覧 (v1.0.4より変更)
  • 全体:英字フォント設定
    • サイトタイトルなどに反映される英字フォントを選択
  • 全体:カラー設定
    • テキストカラー、アクセントカラーのカラー選択
  • 全体:テキスト変更
    • フロントページの「New Post」などを任意のテキストに設定
  • フロントページ設定:ヘッダー
    • フロントページのヘッダーに関するカスタマイズ
  • フロントページ以外の設定:ヘッダー
    • フロントページ以外のページのヘッダーに関するカスタマイズ
  • コンテンツ下部ウィジェット:プロフィールBOX
    • プロフィールボックスをフッター上に表示する時、背景の画像について設定
  • モバイル設定
    • タブレット・スマホでのヘッダーの設定など

スキン独自のカスタマイズ項目の全体:カラー設定を開いて、カラー変更を行っていきます。

スキン独自のカスタマイズ項目:全体:カラー設定を開いた画面

カラー変更の手順

変更したいカラーの「色を選択」をクリックします。

例として、テキストカラーを変更してみます。

カラーピッカーが立ち上げるので、変更したい色を選択します。

テキストカラーを変えてみる
ハート
ハート

変化が分かりやすいように、紫のあたりを適当にクリックしました。

テーマカスタマイザーでプレビューが表示されるので、他のページの様子やタブレット・スマホサイズの場合の見え方を確認します。

元のスキン設定値に戻す場合は、デフォルトボタンを押すと戻ります。

デフォルトでスキン登録色に戻る

変更後の色が決まったら、画面上の「公開」ボタンをクリックします。

各カラーの変更される箇所

この章では、カスタマイザーで変更可能なカラー項目ごとに変更される箇所を画像中心で載せています。

全てのケースでは無いので、カラー変更の際はよくご確認ください。

テキストカラー

サイトのテキストほぼ全てに適用されます。

ブロックエディタでテキスト色変更が可能な部分はエディタの設定が優先されます。

例:フロントページ

サイトタイトル・キャッチフレーズ

グローバルナビのテキスト

最近の記事などの見出し、記事カードのタイトル、スニペット、ボタンテキスト(More)など

投稿・固定ページ、各種一覧ページについても同様(図解は省略)。

メインアクセント 一番明るい青色

メインアクセントカラーです。テキストリンクのホバー色にもなります。

テキストリンクのホバー色

例としてサイトタイトルをホバーした時、メインアクセントカラーに変化します。
メニューや一覧ページの記事タイトルなどもホバー時同様に変化します。

サイトタイトルのホバー時のカラーになる
テキストリンクホバー時も同じ色
フロントページの見出し装飾

NewPostやCategoryなどのテキスト、見出しの下線などもメインアクセントカラーです。

フロントページの見出し装飾

トップに戻るボタンの線もメインアクセントカラーです。

Categoryの上の飾り線、トップへ戻るボタンも
ウィジェットタイトルの下線・記事内見出しH2・H3のアクセント色
目次のH3見出しの点

ウィジェットのタイトル下線は、サイドバーに限らずメインカラムやフッターに設置した場合も同様にメインアクセントカラーになります。

記事作成時に使用するH2見出しの前半の線の色に使用されます。(グレーはテーマカスタマイザーで変更できません)

ウィジェットタイトル下線・記事のH2見出し

記事作成時のH3見出しの線にも使用されます。(背景色はメイン一番薄い青で変更可能)

目次(表示しないを選択時)のH3見出しの点にも使用されます。

記事のH3見出し
記事本文下の関連記事、ページ送りナビ、コメントのタイトル下線

投稿ページの本文下に表示される関連記事の見出しの下線、
ページ送りナビの上下点線、
コメントの見出しの下線に使用されます。

フッター内アクセント線の色

フッター内ウィジェットのタイトル下の線の色や、フッターメニュー上の線の色もメインアクセントカラーです。

メイン 薄い青色

メインアクセントカラーよりも薄い同系色の色を想定したカラーです。
同系色でなくても薄い色なら組み合わせ可能です。

フロントページのMoreボタン、次のページへボタンのホバー時背景色見出し

フロントページ・一覧ページで表示されるボタンをホバーしたときの背景色に使用します。

グローバルナビの3階層目の背景色
通知エリアの背景色

PC時のグローバルメニューにサブメニュー3階層目がある場合に、その背景色に使用します。
通知エリアの背景色に使用します。(スキン制御)

目次の H2の区切り線

ページ送りナビをホバーしたときの背景色に使用します。(v1.0.5より背景色なしに仕様変更)
目次のH2毎の区切り線にも使用します。

タグクラウドウィジェットのホバー時背景色


メイン 一番薄い青

メインアクセントカラー、メイン 薄い青色よりも更に薄い同系色の色を想定したカラーです。

フロントページのカテゴリー2つ目のエリアの背景色

フロントページのフロントページタイプでカテゴリーごとを選択時、2つ目のカテゴリーエリアの背景色に使用します。

フロントページのカテゴリー2つ目の背景色
一覧ページのページネーション

一覧ページで複数ページがある場合に表示される、ページネーションボタンの背景色に使用します。
※現在表示中ではない他のページのボタンの背景色

一覧ページの現在表示してない他ページのボタン
投稿の目次のストライプ背景と、SNSボトムシェア・フォローボタンのストライプ背景

投稿ページで表示する目次の見出し背景の斜めストライプに使用します。
SNSボトムシェアボタン・フォローボタンの同様な背景にも使用します。

目次のストライプ背景色
SNSボタンのストライプ背景色
投稿の記事内見出しH3の背景色

記事作成時の見出しH3の背景色に使用します。

記事作成時の見出しH3の背景色

サブ 濃い青

サブカラーとして、メインアクセントカラーの濃い同系色の色を想定しています。
主にアイコンカラーに使用しています。

アイコン・ページ送りナビ

グローバルメニューのSNSアイコン、
投稿のボトムシェアボタン・フォローボタン、
ページ送りナビのPrev/Nextの背景色に使用します。

各アイコン、ページ送りナビ
記事の投稿日・更新日、プロフィールボックス

パンくずリストのアイコン、記事の投稿日などの日付、
プロフィールの名前、SNSアイコンに使用します。

パンくずリスト・日付・プロフィールボックス
目次

目次のテキストカラーに使用します。
また、目次を数字(デフォルト)選択時のH2見出しの数字背景色に使用します。

目次
アピールエリアのボタンカラー

アピールエリアのボタンを使用した場合の背景色になります。(スキン制御)

アピールエリアのボタンカラー
ボックスメニューのアイコンカラー

FontAwesome5のアイコンに使用します。

デフォルト

カラー変更後

サブ もっと濃い青

サブカラーとして、メインアクセントカラーの最も濃い同系色の色を想定しています。

カテゴリーラベル背景色・記事内タグの枠線とアイコンの色見出し

一覧ページの記事カードに付くカテゴリラベルや、
投稿ページのカテゴリ・タグラベルに使用します。

記事カードにつくカテゴリラベル
投稿ページのカテゴリラベル
投稿ページ 本文下に表示されるカテゴリ・タグラベル
ウィジェット

CTAボックスのボタンのホバー色、
facebookウィジェットの背景色にも使用します。

CTAボックス、facebook

この記事は以上になります。

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