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

Programming

今回は、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クラス」でした。

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

この記事を書いた人
KEITO

AI × IT × WEB3|関東在住。本職はディレクター 。AIを活用してビジネス開拓。仕事の依頼はTwitterからお願いします。YouTube、Twitter、Instagramもお願い致します。

Programming
この記事を共有する
スポンサーリンク
スポンサーリンク
KT LIFE
スポンサーリンク

暗号資産投資するなら以下

Bybit

国内人気No.1!屈強なサーバー/信頼性抜群!トレーダー御用達の取引所。

通貨数338種以上
レバレッジ最大100倍
現物取引手数料Maker:0%〜0.1%
Taker:0.02%〜0.1%
先物取引手数料Maker:0%〜0.01%
Taker:0.03%〜0.06%
操作性スマホでも取引・入金できる
口座開設簡単に口座開設できる
日本語対応日本語対応あり・JPY利用可
特典下記から登録で初回ボーナスあり
登録リンクBybitへの登録は こちら
招待コード22295
レビュー記事レビュー記事は こちら
BigBoss&CRYPTOS

最大レバレッジ1111倍・日本円換金ルート

通貨数BigBoss:15種以上
CRYPTOS:15種以上
レバレッジ最大1111倍
スポット手数料Maker:0.02%〜0.18%
Taker:0.05〜0.20%
先物取引手数料
操作性スマホでも取引・入金できる
口座開設少し敷居が高い
日本語対応日本語対応あり
特典下記から登録で初回ボーナスあり
登録リンクBigBossへの登録は こちら
招待コード6690951
レビュー記事レビュー記事は こちら
Nexo

高APYでのステーキング&レンディング

通貨数60種以上
レバレッジ
スポット手数料Maker:0.04%〜0.20%
Taker:0.03%〜0.20%
先物取引手数料
操作性スマホでも取引・入金できる
口座開設簡単に口座開設できる
日本語対応日本語対応あり
特典下記から登録で初回ボーナスあり
登録リンクNexoへの登録は こちら
招待コード
レビュー記事レビュー記事は こちら

他おすすめ取引所はこちら

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