【STINGER】見出し(h2・h3)のデザインをカスタマイズする方法

この記事ではワードプレスのテーマ「STINGER」の見出しのカスタマイズ方法についてお伝えしていきます。




見出しのデザインの決定

見出しを変更する上で重要となるデザインを最初に決めていきます。
CSSを使用してデザインを作成しますが、知識がない場合はWebからサンプルを探してみてもいいですし、この記事のデザインを参考にしていただいても大丈夫です。

デザインが決定したらCSSの編集を行っていきます。

見出しのカスタマイズ

見出しのカスタマイズはスタイルシートを編集することで行うことができます。

スタイルシートへの移動

①管理画面から「外観」>「テーマの編集」をクリック。
②テーマファイルの中から「スタイルシート(style.css)」をクリック。

これでスタイルシートへ移動ができました。
この部分にコードを追記してデザインを変更していきます。
※編集するのは「STINGER8 Child」(子テーマ)のスタイルシートです。

h2のカスタマイズ

まずはh2を画像のようにカスタマイズしていきます。

スタイルシート(style.css)に下記のようにコードを追記します。

/* 見出し */

h2{
border: none;
font-size:1.35em;
padding: 0.75em 1.25em;
margin-top: 2.2em;
border-radius: 3px;
background: #13acca;
color: #ffffff;
}

「border: none;」でラインを消し、「background」で背景色の指定、「color」で文字色を指定しています。
「font-size」は数値を大きくすれば文字が大きくなり、「border-radius」は数値を大きくすれば角の丸みが大きくなります。

コピペで使用する場合は、色や数値は好みのものに変更してみて下さい。

h3のカスタマイズ

次にh3のデザインを画像のように変更していきます。
h3の場合は元のデザインにラインを加えただけのものとなりますので、下記のコードを先ほどのコードの後ろに追記します。

h3 {
border-left: 3px solid #13acca;
}

コードの追記が完了したら「ファイルを更新」ボタンをクリックして、変更内容を保存します。

ブラウザで確認

最後にブラウザでサイトを開き、カスタマイズ内容を確認します。

内容がしっかりと反映されていることが確認できます。

反映されない場合はブラウザの履歴が影響している場合があります。
編集したコードが間違っていないことを確認した後、ブラウザの履歴を1度削除することで反映されることがあるので試してみて下さい。

以上、「STINGER」の見出しのカスタマイズでした。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA