ワードプレス

賢威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の背景色を変更した手順と同様に好きな色にカスタマイズしてみてください。「ファイルを更新」をクリックすれば作業は終わりです。

まとめ

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

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

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

スポンサードリンク
スポンサードリンク
 

他にはこんな記事が読まれてます


関連記事

  1. TCDテーマ「CORE」でフッターのサイトタイトルとキャッチフレ…
  2. TCDテーマ「CORE」で記事のアイキャッチ画像を非表示にする方…
  3. TCDテーマ「CORE」でサイトのレイアウトをカスタマイズしてみ…
  4. TCDテーマ「CORE」で記事タイトルをh1タグで出力する方法
  5. 賢威7でサイドバーの見出しに枠線を入れる方法
  6. TCDテーマ「CORE」で記事下にアドセンスを貼る方法
  7. TCDテーマ「CORE」でAddQuicktagを使うならTCD…
  8. 賢威7のアイキャッチ画像の役割、サイズを変更する方法
スポンサードリンク
スポンサードリンク

過去ログ

PAGE TOP