ピエールの日記 by pierre 長尾和美

ピエールです。SamuraiTraditional(サムトラ)、たけしを(逸見泰典とのユニット)でギターやってます♪思いつきをブログに! ^^v by pierre

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

      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タグのところはちょっとうまくいきません。。。

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

20141030001

スタイルシート(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;
}

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

20141030002

おおおお。思い通りになりました。

まとめ

今回参考にさせていただいたサイトはこちら。

参考というかまったくそのままカスタマイズさせていただきました。

見出し命!ブログに必要なデザイン

自分の場合、カスタマイズなどなかなか進まない、というか進めないのですが、徐々に見やすいページにしていこうかなぁと思っています。

思い通りに変更できるとカスタマイズも楽しいですね。

 - Stinger3, Web, wordpress , ,