子テーマのCSSでカスタマイズしたい場合

子テーマのCSSで細かく自分の好みに合わせてカスタマイズしたい方に向けた内容となります。

例えば、以下のようなケースがあると思います。

• grayishでスキン制御されているフォントサイズ等について、スキン制御を編集せずにもっと手軽にカスタマイズしたい
• カスタマイザーでカラー変更したけど、特定の場所は個別でカラーを設定したい

本記事のコードは推奨するものではなく、参考用です。
各自のカスタマイズ内容によってはうまくいかない場合もありますので、予めご了承ください。

（参考）スキン制御箇所

grayishでスキン制御されている箇所についての詳細は、以下の記事をご覧ください。

スキン制御について

grayishはCocoon設定のデザイン・レイアウトに関する項目について、多数箇所スキン制御しています。 Cocoon設定の各タブ内で、以下画像にあるように「スキン制御」が表示され、ピンクの枠で囲ま...

cocoon-grayish.na2-factory.com

2024.02.06

子テーマのCSSをカスタマイズ

子テーマのCSSについて、WordPress管理画面のテーマファイルエディターで編集する手順になります。

サイトフォントのサイズ変更

サイトフォントは以下のようにスキン制御しています。

PC時のサイトフォント：16px
モバイルサイトフォント：14px

上記を任意のサイズに変更するには、子テーマのPC時の変更内容と画面幅480px以下（SP）の部分に以下を追加します。

例：PC時のサイトフォントを18pxに、モバイルサイトフォントは16pxにしたい場合

@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
body {
  font-size: 18px !important;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
 body {
   font-size: 16px !important;
  }

}

ハート

モバイルだけ変更したい場合はPC時の変更内容の記述は不要です

サイト内の全ページのフォントサイズは上記で変更可能です。（ブロックエディタ内も変更になります。）

※見出し等、個別にサイズ指定されている部分は対象外となります。
※逆に、個別の指定がない箇所は全て変更されるので、全体のバランスをよく確認していただければと思います。

サイトリンク色

サイトリンク色は以下のようにスキン制御しています。

サイトリンク色：–（テーマカスタマイザーのテキストカラーと同じ色が設定される）

上記を任意のカラーに変更するには、子テーマのPC時の変更内容の部分に以下を追加します。
※リンク色を画面幅によって分けたい場合はフォントサイズの時と同様に記述します。

例：サイトリンク色を紫(カラーコード：#8224e3)にしたい場合

@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
a {
    color: #8224e3;
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/

}

※サイトリンクカラーについても、個別で指定されている箇所は対象外となりますのでご注意ください。

以下は上記の子テーマのCSSを使用したデモサイトのテキストリンク部分の画像です。
「テキストリンクその２」をリンク付きにしています。
紫にカラー変更できました。

特定の箇所だけカスタマイズしたいとき

例えば、grayishは独自のテーマカスタマイザーでカラー変更が可能になっていますが、人の好みは其々ですので、カスタマイザーで色を変える時、特定の場所だけ違う色にしたい、なんてケースも多いに有り得ると思います。

そんな場合は子テーマのCSSで好みに合わせてカスタマイズしていただくことになります。

この章では、例として「カスタマイザーで色変更される箇所を自分の好みに変えたい」というケースについて、特定の部分を色変更する手順と参考コードを紹介します。

スキンのテーマカスタマイザーで色変更される箇所については、以下記事をご覧ください。

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

grayish独自のテーマカスタマイザーではテキストカラー、アクセントカラー5色の変更が可能になっています。 それぞれを変更した場合、どこが変わるのかについてまとめています。 デザインの統一感をだすために、変更される場合はばらばらの色ではなく、それぞれ連動したカラー設定をおすすめします。

cocoon-grayish.na2-factory.com

2023.11.01

例として、ボックスメニューのアイコン色だけ変えたい場合

ボックスメニューをFontAwesomeのアイコンで作成した場合、アイコンのカラーはテーマカスタマイザーの全体：カラー設定の「サブ 濃い青」のカラーになります。

このアイコンのカラーを子テーマのCSSカスタマイズで独自に設定してみます。

検証ツールを使って対象のスタイル確認

特定の部分をカスタマイズしたい場合は、まずブラウザの検証ツール（デベロッパーツール）でどのようにスタイルが当たっているのか確認します。

以下、GoogleChromeでの手順になりますが、他ブラウザでも同様に確認できると思います。
（※MacのSafariは少々異なります）

GoogleChromeの場合は、ブラウザの画面上で右クリックし表示されるウィンドウの下にある「検証」をクリックすると検証ツール（デベロッパーツール）が表示されます。

WindowsPCの場合はF12キー押しで表示されると思います。

検証ツールが表示され、表示されているページのHTMLとCSSの情報が見れるようになります。

ハート

↑検証ツールの水色部分がHTMLで、ピンク部分がCSSです。
※分かりやすくする為、色を付けました。実際の検証ツールでは色はつきません。

検証ツールの上にある矢印マークをクリックします。

矢印マークをクリックするとマークの色が青くなり、表示されているページの各要素をホバーすることで、該当するHTML、CSSがどこなのかが分かるようになります。

矢印マークが青の状態で、FontAwesomeのアイコンをホバーしてみます。
すると、アイコンの要素などの情報（div.fas.fa-star::before）がアイコンの上あたりに表示され、HTMLの該当場所がうっすらとしたグレーで示されるので、アイコンをクリックします。

この状態でアイコンに当たっているCSSが表示されています。

CSSを上から順に見ていって、アイコンのカラー設定である、colorプロパティが有効になっている記述を確認します。

これで、ボックスメニューのアイコンカラーを設定しているCSSを確認できました。

.box-menu .box-menu-icon {
    font-size: 30px;
    color: var(--skin-grayish-site-sub-color); /* ←変更対象 */
}

color: var(--skin-grayish-site-sub-color);

--skin-grayish-site-sub-color

検証ツール上でアイコンのカラーを変更してみる

検証ツール上で暫定的にカラー変更することができます。

colorの下辺りをクリックすると、コードを試し打ちすることができます。

これは例なので、適当なカラーを試していますが、実際は各自のお好みのカラーコードを入れてみてください。

最終的にこの色にしよう！と決めたら、コードをコピーします。

例では、antiquewhiteに設定することにします。

    color: antiquewhite;

検証ツール上のCSSをコピーする

検証ツールのコピーしたいセレクタ（今回の例では、.box-menu .box-menu-icon ）をクリックして右クリックし、立ち上がるウィンドウから「ルールをコピー」を選択します。

これで、子テーマのCSSに検証ツールで試したコードを貼り付けすることができると思います。

子テーマのCSSにコードを貼り付ける

テーマファイルエディターで開いている子テーマのCSSの、PC時の変更内容の部分にさきほどコピーしたコードを貼り付けします。

@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
.box-menu .box-menu-icon {
/*     font-size: 30px; */
/*     color: var(--skin-grayish-site-sub-color); */
    color: antiquewhite;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/

}

/*     font-size: 30px; */
/*     color: var(--skin-grayish-site-sub-color); */

これで保存し、変更が反映されているか確認します。

変更が反映されていることを確認する

確認のため、ボックスメニューを使用しているページを再読み込みします。

この例では、子テーマのCSSのカスタマイズが反映されていることを確認できました！

画面幅を変えてみて、タブレットやSPの場合も表示がおかしくなっていないか確認されると更に安全と思います。

例は、以上になります。

他の箇所についても、同様な手順でカスタマイズ可能です。

検証ツールの使い方：参考サイト

本記事では管理人の方法で検証ツールを使う手順を説明させていただきましたが、過去のCocoonフォーラムで案内されていた以下の参考記事で大変詳しく説明されています。
参考記事をご覧になっていただくと、今後のカスタマイズがもっと快適に行えるのでは！と思います。

プログラミング学習サイト「progate」の記事

検証ツール（デベロッパーモード）の使い方

Progateはオンラインでプログラミングを学べるサービスです。プログラミングを学んでWEBアプリケーションを作ろう。

prog-8.com

Cocoon制作者のわいひらさんのサイト、寝ログの記事

WordPressテーマのCSSカスタマイズ向けChromeデベロッパーツールの使い方

最近、フォーラムで、Wordpressテーマのカスタマイズに関する質問をいただくことがあります。 それで、気づ…

nelog.jp

サルワカさんの記事

初心者向け！Chromeの検証機能（デベロッパーツール）の使い方

Googleクロームの便利な「要素の検証」機能の使い方を分かりやすく解説します。ウェブデザインをする人が特に知っておくべき機能を中心に紹介していきます。

saruwakakun.com

子テーマのCSSを変更したのに、反映されないとき

子テーマのCSSを変更して保存したあと、表示を確認してみると変更が反映されていない、ということがあるかもしれません。

CSSのミスはしていないはずなのに、変更が反映されない・・・

そんなときは、まずはブラウザのスーパーリロードを行いましょう。

スーパーリロードでも変わらないときは、ブラウザのキャッシュをクリアします。

ブラウザのキャッシュクリア

GoogleChromeの場合、デベロッパーツールを開いてクリアが簡単です。
①F12を押す又はブラウザ上のどこかで右クリック→検証をクリック
②更新ボタン（←このボタン！）を長押しする
③キャッシュの消去とハード再読み込みをクリックで終了

GoogleChromeの設定を開いてクリアする方法もあります。（他ブラウザも同様な手順でできると思います）
①Chromeの設定を開き、プライバシーとセキュリティ→閲覧履歴データの削除

②データを削除をクリックで終了です。

iPhoneやAndroid端末の場合もブラウザのキャッシュクリアをしないと変更が反映されないことがあります。

以下の記事にChrome以外のブラウザについてもまとまっているので、ご参考です。

スーパーリロードの方法をブラウザ別でまとめてみた | ホームページ制作は福岡の株式会社リクト。SEOや保守運用も

スーパーリロードの方法をブラウザ別でまとめてみた | 福岡市のホームページ制作会社。制作後のサポートがあるから結果が出る。SEO、広告、解析などのウェブマーケティングを通じて販促、集客を支援します。業...

www.lct.jp

スーパーリロード、ブラウザのキャッシュクリアを行っても変わらない場合はプラグインや、サーバーの設定が影響しているかもしれません。Cocoonマニュアルの以下の記事を参考にしてみてください。

WordPressテーマ設定（CSS等含む）を変更しても反映されない場合のトラブルシューティング方法

CSSをカスタマイズしたのにうまく表示されないなんて場合に、試して欲しいこと。WordpressのCSSトラブルの原因の9割はこれだと思います。

wp-cocoon.com

ハート

変更が反映されることを祈っております・・・

この記事は、以上です。