ワードプレスのキャッチコピーの色の変更の仕方:CSSクラス

WordPress

今回は、WordPressのキャッチコピー(description)の色や大きさの変更の仕方について紹介します。まずはCSSクラス調べて、そこにstyleを記述して編集していきます。

キャッチコピーのCSSクラス

ワードプレスのキャッチコピーのデフォルトのcss classは「.site-description」です。(デフォルトテーマのTwenty Twentyの場合です。)

css classの探し方はデベロッパーツールを使っての方法が最も効率的です。デベロッパーツールについては下記から。

今回のWordPressテーマである、Twenty Twentyをデベロッパーツール見てみるとクラスが「.site-description」となっていることが確認できます。

この.site-descriptionに対してスタイルシートにスタイルを記述していくことで色々と見た目を変えていけます。

キャッチコピーの色の変更

色を変更したい場合は、下記の様な記述をスタイルシートにすれば、テキストカラーが茶色になり背景が薄いグレーになります。

ワードプレスの場合は「外観→カスタマイズ→追加CSS」もしくわ「外観→テーマエディタ→スタイルシート」へスタイルを記述していきます。

.site-description {
 color:brown;
 background:rgba(0,0,0,.1);
}

キャッチコピーの大きさの変更

大きさを変更したい場合は、下記の様なスタイルを記述していきます。

.site-description {
 font-size:1.3rem;
}

以上が「ワードプレスのキャッチコピーの色の変更の仕方:CSSクラス」でした。

サイト全体の細かいデザインを見ていくと、意外とキャッチコピーとかのデザインが気になってくるかと思います。でもどうやって弄ったら良いかわからなかった場合にお役に立てたのなら幸いです。

2020年4月12日WordPressWEB,WP

Posted by KT