ブログのテーマで使わせていただいているWordpressのテーマ「STINGER3」ですが、
正直言って僕みたいな人間が見出しをカスタムなど言い出す必要は皆無な程、デフォルトの見出しが美しいテーマです。
ただ少しだけ、ブログのカラーに合わせて「STINGER3」の見出しをいじってみたので、その方法をご紹介します。
STINGER3の標準の見出しはどうなっているか
STINGER3ではh1が記事タイトルになっています。
よって、h2、h3、h4くらいを主に使うと思います。
今回はh2の見出しをカスタムしていきます。
用意した画像をSTINGERのimagesフォルダにアップロードする
今回は画像を変更したので、Wordpressの管理画面からでなく、FTPソフトで用意した画像をアップロードしなくてはいけません。
画像を任意の画像に変えるために、まず60ｘ60くらいで画像を用意します。
ファイル名は○○.png等。
そしてFTPソフトのwp-content→themes→stinger3ver20140327→imagesフォルダに用意した画像をアップロードします。
STINGER3のCSSを変える
WordPressの管理画面→外観→テーマ編集→スタイルシート (style.css)
その中のh2がデフォルトではこうなっています。
h2 {
font-size: 24px;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 35px;
border-left-width: 5px;
border-left-style: solid;
border-left-color: #1a1a1a;
color: #333;
line-height: 30px;
margin-top: 20px;
margin-right: 0px;
margin-bottom: 20px;
margin-left: -40px;
}
その下にある隠しCSSのほう
.demo h2 {
font-size: 24px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 20px;
padding-left: 75px;
color: #000;
line-height: 30px;
margin-top: 20px;
margin-right: 0px;
margin-bottom: 20px;
margin-left: -65px;
background-image: url(images/cah2-bk.png);
background-repeat: no-repeat;
background-position: left top;
}
}
こちらの.demoを消して、元のh2も消します。
その時点でこのようになります。
引用元：本家STINGERさんのブログ
https://stinger3.com/
そしてそれをベースに、用意した画像を加え、その他少しだけいじっていき
h2 {
font-size: 24px;
border-bottom: 4px dashed #FFD700;
padding-top: 20px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 75px;
color: #000;
line-height: 30px;
margin-top: 50px;
margin-right: 0px;
margin-bottom: 20px;
margin-left: -65px;
background-image: url(images/○○.png);
background-color: #FFFACD;
background-repeat: no-repeat;
background-position: left top;
}
このCSSのbackground-imageのURLのファイル名を先ほどの画像のファイル名に書き換えます。
このようなCSSになりました。
元々気に入っていたので、画像を変えて文字の位置と余白、色を変えたくらいでしょうか。
これで先ほどからうざいくらいでてくるレモンさんの見出しができあがりました。
まとめ
今回参考にさせていただいたのは本家「STINGER」さんのブログになります。
より細かく説明されていますので、参考にしてください。
