Stinger3　カスタマイズ – 見出し(h2タグ)を変更

2014/10/31 2017/10/25

自分の場合は「見出し」というのをあまり意識していなかったのですが、最近のSEO対策だと、見出しタグ（h1・h2・h3など）と段落タグ（p）を構造的なHTMLで表現しなければならないようですね。

検索エンジン会社のヘルプなども見出しタグの重要性を強調している。とのこと。。

自分はあまり詳しくないのでいろいろ調べながらも徐々に取り組んでいこうかと思います。

Stingerの見出しタグの画像を変更

とりあえず、最近では見出しタグを構造的なHTMLにするということを意識するようにはしています。

まずは、Stingerで見出しタグのところに出てくる画像を変更しようと思ってやってみたのでメモ。

Stingerの見出しタグで使われている画像を確認

Stingerで使われている画像(/home/自分のドメイン/ドメイン以下のフォルダ/wp-content/themes/stinger3/images)

を見てみると。。。

h2タグで使われているであろう画像は下記。

cah2-b.png　(h2タグのblue)
cah2-bk.png　(h2タグのblack)
cah2-or.png　(h2タグのorange)
cah2-pk.png　(h2タグのpink)
cah2-r.png　(h2タグのred)

h3タグで使われているであろう画像は下記。

cah3-bk.png　(h3タグのblack)
cah3-bl.png　(h3タグのblue)
cah3-g.png　(h3タグのgreen)
cah3-r.png　(h3タグのred)

となっています。

画像を全部差し替えても良いのですが。。。とりあえずCSSを見てみます。

WordPressの管理画面の「外観」→「テーマ編集」を選択して、右側にあるスタイルシート(style.css)をクリックします。

こちらはPC版のCSSを変更したい場合は、別途smart.cssを編集しなければならないのですが、とりあえずPC版を。

h2タブの部分は下記になっているので、cah2-bk.pngを変更すればなんとかなるかな。

どうやってcah2-or.pngやcah2-or.pngの画像に切り替えているのかはちゃんとみていないのでわからないのですが。。。

/*中見出し*/

.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;
}
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;
}

同様にしてh3タブの部分は下記になっているので(.pngがあるとこのみ抜粋)、cah3-bk.pngを変更すればよいのかな。


/*小見出し*/

.kizi h3 {
	font-size: 20px;
	margin-bottom: 30px;
	margin-top: 10px;
	padding-top: 15px;
	padding-right: 10px;
	padding-bottom: 15px;
	padding-left: 60px;
	color: #000000;
	line-height: 30px;
	background-image: url(images/cah3-bk.png);
	background-repeat: no-repeat;
	background-position: left center;
	margin-left: 0px;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #999999;
}

Stingerの見出しタグで使われている画像を変更してみる

自分でcah2-bk.pngとcah3-bk.pngを作って画像の差し替えをしました。

h3タグのところは画像を差し替えるだけでうまく行きましたが、h2タグのところはちょっとうまくいきません。。。

下記のようにデフォルトのままです。。

スタイルシート(style.css)を変更してみる

もういちど、h2タグの部分の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;
}
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;
}

どうやら「.demo h2」というのはStingerの隠しCSSということらしいです。。

そんなわけで、.demoを取って、h2 {・・・}の部分を全部削除しました。

画像の配置も考えて、margin-leftも-65pxから-30pxにも変更しました。

それで変更したCSSは下記になります。


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: -30px;
	background-image: url(images/cah2-bk.png);
	background-repeat: no-repeat;
	background-position: left top;
}

さてどうなるでしょうか。