賢威7でh2(見出し)h3(見出し3)の文字色や背景色をコピペで変更できる方法を紹介


スポンサードリンク


今回は、カスタマイズが難しい賢威7のh2(見出し)、h3(見出し3)の文字色や背景色をコピペで変更できる方法を紹介します。

賢威は元々のデザインがシンプルでカスタム必須のテーマなので頑張って挑戦してみましょう。

見出し2(h2タグ)の文字色や背景色をコピペで変更する方法

文字色の変更

まずは文字色を変えていきましょう。

WordPress管理画面から「外観」>「テーマの編集」へと進み、「base.css」を開きます。

1118~1124行目に以下のコードがあり、こちらが見出し2を示す部分です。F3を推すとキーワード検索できるので探してみてください。

「color」が見出し2の文字色を示すコードです。文字色を変更する際はこちらのカラーコードを変更してください。

※カラーコードはこのサイトから探すと簡単です。

見出し2の文字色を変更すると・・・

このように変わります。あくまで一例なので好きな色にカスタマイズしてみてください。

背景色の変更

見出し2の文字色を変えた箇所の1行上を見てください。

「background」が見出し2の背景色を示すコードです。背景色を変更する際はこちらのカラーコードを変更してください。

見出し2の背景色を変更すると・・・

このように変わります。文字色と同様に好きな色にカスタマイズしてみてください。「ファイルを更新」をクリックすれば作業は終わりです。

見出し3(h3タグ)の文字色や背景色をコピペで変更する方法

文字色の変更

WordPress管理画面から「外観」>「テーマの編集」へと進み、「base.css」を開きます。

1126~1132行目に以下のコードがあり、こちらが見出し3を示す部分です。F3を推すとキーワード検索できるので探してみてください。

見出し3にはもともと文字色を指定するカードが記述されていないので以下のコードを加える必要があります。カラーコードはお好きなものに変更してください。

上記のコードを追加すると以下のようになります。

見出し2の文字色を変更した手順と同様に好きな色にカスタマイズしてみてください。「ファイルを更新」をクリックすれば作業は終わりです。

背景色の変更

見出し3の文字色を変えた箇所にもう一度戻ります。

見出し3にはもともと背景色を指定するカードが記述されていないので以下のコードを加える必要があります。カラーコードはお好きなものに変更してください。

上記のコードを追加すると以下のようになります。

見出し2の背景色を変更した手順と同様に好きな色にカスタマイズしてみてください。「ファイルを更新」をクリックすれば作業は終わりです。

まとめ

ワードプレスは賢威に限らず文章を見出しで分けることで読者に内容が伝わりやすくなります。

サイトのテーマにあったカラーバリエーションに見出しをカスタマイズしてみてくださいね。

最後まで読んでいただきありがとうございました。



スポンサードリンク



スポンサードリンク



いいねと思ったらSNSでシェア!

関連記事 こちらの記事もオススメです。



誰でも簡単に本格的なブログが作れる「STORK」






誰でも簡単にブログが作れるワードプレスのテーマ「STORK」を私も使っています