/*adsenseタグ*/

見出しタイトルh2 h3のデザインをカスタマイズ変更する設定

ワードプレスで作成する投稿記事の見出しH2,H3等のデザインをカスタマイズする ルクセリタス簡単設定初期設定の見出しの場合、少し色が薄くあまり目立たない設定となっています。少し目出つような色にしたいと思います。

設定ができるとこのように変更前と変更後で見た目が大分変わりますので、見出しだと分かりやすくなります。

見出しタイトルH2,H3のデザインを変更するカスタマイズワードプレスブログ初心者設定変更前と変更後

見出しタイトルh2 h3のデザインをカスタマイズ変更する設定方法 

①ワードプレスメニュー画面から「子テーマの編集」を選択します。

見出しタイトルH2,H3のデザインを変更するカスタマイズワードプレスブログ初心者設定子テーマの編集を選択

②子テーマの編集画面になります タブはそのまま「style.css」の画面のまま下の方へスクロールします。

見出しタイトルH2,H3のデザインを変更するカスタマイズワードプレスブログ初心者設定子テーマ編集スタイルシート画面

「以下、好みに応じて子テーマ用のスタイルをお書きください」と記載ありますので、この下側に変更したい内容を記載します。

見出しタイトルH2,H3のデザインを変更するカスタマイズワードプレスブログ初心者設定注意事項

下記は追加するコードの例ですが、このコードをコピーしてstyle.CSSの36行目の下に貼り付けします。

/*記事のh2の設定*/ .post h2{ margin-left:0; padding: .5em 0 .5em .75em;/*文字の上右下左の余白*/ background: #167ac6;/*背景色*/ color: white; /*文字色*/ border-left: solid 8px #167ac6;/*左線*/ border-bottom: 2px solid #ccc;/*下線*/ font-weight:bold; } /*記事のh3の設定*/ .post h3 { margin-left:0; position: relative; padding: .25em 0 .25em .75em; background: #f6f6f6;/*背景色*/ border-left: 8px solid #167ac6; border-bottom: 2px solid #ccc;/*下線*/ } .post h3::after { position: absolute; left: 0; bottom: 0; content: ”; width: 100%; height: 0; border-bottom: 1px solid #ccc; } /*記事のh4の左ボーダー設定色*/ .post h4{ padding: .15em 0 .15em .75em; border-left: 8px solid #167ac6; border-bottom: 2px solid #ccc;/*下線*/ }
見出しタイトルH2,H3のデザインを変更するカスタマイズワードプレスブログ初心者設定37行目より下にコードを記載する

貼り付けができたら「保存」します。「変更を反映しました」と表示されます。

始めはH2 だけ変更しようと思って、h2のコードだけ記載して保存しましたが、なぜかうまくいきませんでいした。h2,h3,h4をまとめてコード記載して保存したら反映できました。

スタイルシートCSSに記載するコード記号の意味

/*記事のh2の設定*/  → /* */ で囲まれている文字はコードには関係ありませんよという意味 .post h2{       → h2 { } h2の見出しについて{ }の中身について記載しますという意味 margin-left:0; padding: .5em 0 .5em .75em;/*文字の上右下左の余白*/ background: #167ac6;/*背景色*/  → 背景の色 を青色(167ac6)にしてください という意味 color: white; /*文字色*/     → 背景を青にするので文字の色は白色にしてください という意味 border-left: solid 8px #167ac6;/*左線*/ border-bottom: 2px solid #ccc;/*下線*/ font-weight:bold;    → 文字は太字にしてください という意味 }

何を書いているのか始めは分からないこともありますが、いろいろとホームページで調べたり、ワードプレス初心者用のカスタマイズの本を買って読んだりしていると分かるようになってきます。

スタイルCSSを編集する際の注意 

変更に間違いなければホームページの見出しの色は反映しているはずです。焦って違う所に貼り付けてしまうと、おかしくなりますので注意が必要です。

初心者はプログラムを見ると拒否反応のように自分には難しすぎる。と思ってなかなか進めませんが、焦らずバックアップ(編集する前にどこかに元のコードをコピーして貼り付けしておく)を取りながら、間違っても元のコードを貼り付けすれば大抵元に戻ります。あくまでも設定は自己責任でお願いします。

まだまだこのサイトも作成中の所がありますので徐々に変更していきたいと思います。