WordPressのカスタムCSSでテーマのレイアウト変更

当サイト（Winroad徒然草）のレイアウトは、Cocoonのテーマを使用していますが、今回のテーマで引用文（quote）内のH要素とリストの文字色が見づらい色だったので、カスタムCSSを使って、変更したいと思います。

カスタムCSS

WordPressのカスタムCSSは、サイトのデザインやレイアウトをカスタマイズするための機能です。この機能を利用することで、サイトの見た目を変更したり、特定のスタイルを適用することができます。カスタムCSSは、テーマのカスタマイズ画面から「追加のCSS」というセクションを通じて設定することができ、このセクションにCSSコードを入力することで、サイトに独自のスタイルを適用することができます。また、子テーマを作成することで、より高度なカスタマイズや、テーマのアップデートによるカスタムCSSの上書きを防ぐことも可能です。

h要素の文字色

現状下記の様にh4要素とh5要素の文字色が白色なので、大変見づらいです。

追加CSSを開く

そこで、外観＞カスタマイズ＞追加CSSと選択します。

CSSを記述

追加CSSのエディターの中に、下記を記述して、左上の「公開」をクリックします。

blockquote h4, blockquote h5, blockquote h6 {
    color: #333;
}

color: blackだと黒すぎたので、color: #333に変更しました。

変更の確認

下記の様に文字色が変更されているのが確認できます。

以下に基本的な使い方の手順を記述しておきます。

基本的な使い方

WordPressでカスタムCSSを設定するには、以下の手順を実行します:

1. WordPressのダッシュボードにログインします。
2. 左側のメニューで、「外観」をクリックし、「カスタマイズ」を選択します。
3. カスタマイズの画面で、「追加のCSS」というセクションを見つけてクリックします。
4. 「追加のCSS」のテキストエリアに、CSSコードを記述します。
5. 最後に、「公開」ボタンをクリックして変更を保存します。

これで、カスタムCSSがあなたのWordPressサイトに適用されます。