STINGER7/Plus：記事中と投稿編集画面の見出しデザインをカスタマイズする方法

無料で配布されているWordPressテーマをそのまま使用すると、デザインが他のサイトと同じになってしまいますね。「STINGER7」のような人気のあるテーマは使っている人も多いので、どうにかしてオリジナリティを出したいところです。

見出しのデザインはCSSだけで簡単に変更できて他のサイトとの差別化にもなるので、既成のテーマを使用するならやっておきたいカスタマイズの１つです。

そこで今回はSTINGER7の記事中の「h2〜h4」などの見出しのデザインをカスタマイズする方法をご紹介します！

【追記：2016.9.27】
※一部内容を修正。STINGER Plusに対応しました。

子テーマの使用方法

テーマファイルをカスタマイズする時は子テーマを使うことが推奨されています。
子テーマを使用すると、テーマ本体をアップデートしてもカスタマイズ内容が消えないというメリットがあります。

STINGER7での子テーマの使用方法はこちら↓
STINGER7：テーマのインストールと子テーマの使用方法

特にSTINGER7の場合は「header.php」を編集する際には注意が必要です。
こちらの記事を参考にしてください↓
STINGER7：親テーマの任意のファイルを子テーマで編集する方法

変更前の見出しデザイン

まずは変更前の見出しデザインを確認しておきます。
STINGER7のデフォルトで色も変更してない状態だとこんな感じですね。

h2の吹き出しっぽいデザインはオシャレなんですけど、みんなが同じだと変えたくなっちゃいますよね(^^;)

見出しデザインのリセット

CSSに慣れていない方でも色々なデザインに変更しやすいように、最初にデフォルトで指定されている見出しのデザインをある程度リセットしておきます。
以下のコードを「style.css」にコピペしてください。

h2 {
	position: static;
	background: none;
	padding :0;
}
h2:after {
	position: static;
	content: none;
	border: none;
}
h2:before {
	position: static;
	content: none;
	border: none;
}
.post h3 {
	padding: 0;
	border: none;
}
.post h4 {
	padding: 0;
	background: none;
}

STINGER Plusをお使いの方はこちらのコードになります↓

h2 {
    background: none;
    border-bottom: none;
    border-top: none;
    padding: 0;
}
.post h3 {
    border-bottom: none;
    color: #1a1a1a;
    padding: 0;
}
.post h4 {
    background: none;
    padding: 0;
}

当サイトの場合

僕はとりあえず以下のようにデザインを変更しました。
コピペで使っていただいても良いですし、カラーや余白などサイトに合わせて変更してみてください。

CSSは原則として後に記述された指定が優先されるので、先ほどのリセットのコードより後に記述します。

h2 {
	padding: 1em .75em .75em;
	background: repeating-linear-gradient(
	-45deg, /* ストライプの角度 */
	#47bea0, /* 1色目の始点 */
	#47bea0 10px, /* 1色目の終点 */
	#50c1a5 10px, /* 2色目の始点 */
	#50c1a5 20px /* 2色目の終点 */
	);
	color: #fff;
}
.post h3 {
	padding: .5em 0 .3em;
	border-top: 2px solid #50c1a5;
	border-bottom: 2px solid #50c1a5;
	color: #333;
}
.post h4 {
	position: relative;
	padding-bottom: .5em;
	color: #333;
	border-bottom: 4px dotted #50c1a5; /* ドットのライン */
}
.post h4:after {
	position: absolute;
	bottom: -4px;
	left: 0;
	content: '';
	z-index: 2;
	height: 4px;
	width: 15%;
	background: #50c1a5;
}
.post h4.point {
	position: relative;
	padding: 0 0 .5em 10px;
	color: #333;
	border-bottom: 4px dotted #50c1a5;
}

するとこのようになります↓

「h2」はストライプ柄にして、文字は白にしました。
「h3」は上下に2pxのボーダーを。
「h4」は２種類のボーダーを重ねたようなデザインになっています。

最後の「.post h4.point」は記事本文ではなくてページ下にある「関連記事」の見出しですが、デザインを統一させるために指定しています。

その他のデザインサンプル

CSSだけで他にも色々とデザインを変えることができます。
こちらのサイトにサンプルがたくさんありますので参考になると思います↓

http://www.nxworld.net/tips/50-css-heading-styling.html

www.nxworld.net

投稿編集画面の見た目も変更する

そのままだと投稿編集画面ではデフォルトのデザインのままですね。
せっかくなので編集画面のビジュアルエディタ見出しもデザインを変更しておきましょう。

投稿編集画面にCSSを適用するためには「editor-style.css」を使用します。
STINGER7（Plus）の本体に入っている「editor-style.css」をFTPソフトでダウンロードして、中身を全て削除してから子テーマにアップロードしてください。

ファイルを追加できたら以下のように記事本文の見出しと同じ内容を記述します↓

h2 {
	position: static;
	background: none;
	padding :0;
}
h2:after {
	position: static;
	content: none;
	border: none;
}
h2:before {
	position: static;
	content: none;
	border: none;
}
.post h3 {
	padding: 0;
	border: none;
}
.post h4 {
	padding: 0;
	background: none;
}
h2 {
	padding: 1em .75em;
	background: repeating-linear-gradient(
	-45deg,
	#47bea0,
	#47bea0 10px,
	#50c1a5 10px,
	#50c1a5 20px
	);
	color: #fff;
}
.post h3 {
	padding: .5em 0;
	border-top: 2px solid #50c1a5;
	border-bottom: 2px solid #50c1a5;
	color: #333;
}
.post h4 {
	position: relative;
	padding-bottom: .5em;
	color: #333;
	border-bottom: 4px dotted #50c1a5;
}
.post h4:after {
	position: absolute;
	bottom: -4px;
	left: 0;
	content: '';
	z-index: 2;
	height: 4px;
	width: 15%;
	background: #50c1a5;
}

STINGER Plusの場合はこちら↓

h2 {
    background: none;
    border-bottom: none;
    border-top: none;
    padding: 0;
}
.post h3 {
    border-bottom: none;
    color: #1a1a1a;
    padding: 0;
}
.post h4 {
    background: none;
    padding: 0;
}
h2 {
	padding: 1em .75em .75em;
	background: repeating-linear-gradient(
	-45deg, /* ストライプの角度 */
	#47bea0, /* 1色目の始点 */
	#47bea0 10px, /* 1色目の終点 */
	#50c1a5 10px, /* 2色目の始点 */
	#50c1a5 20px /* 2色目の終点 */
	);
	color: #fff;
}
.post h3 {
	padding: .5em 0 .3em;
	border-top: 2px solid #50c1a5;
	border-bottom: 2px solid #50c1a5;
	color: #333;
}
.post h4 {
	position: relative;
	padding-bottom: .5em;
	color: #333;
	border-bottom: 4px dotted #50c1a5; /* ドットのライン */
}
.post h4:after {
	position: absolute;
	bottom: -4px;
	left: 0;
	content: '';
	z-index: 2;
	height: 4px;
	width: 15%;
	background: #50c1a5;
}

最初にデフォルトのデザインのリセットも入れています。
「.post h4.point」は関連記事の見出しで、投稿編集画面には関係ないので省いています。
これでビジュアルエディタでも見出しのデザインが変更されました↓

まとめ

見出しのデザインを変えるだけでオリジナル感が増しますよね。
簡単にサイトの雰囲気を変えることができるのでぜひチャレンジしてみてください♪

【追記：2016.3.24】
STINGER7のカスタマイズ記事をまとめました↓

STINGER7：カスタマイズまとめ

このブログでも使用させて頂いているWordPressテーマ「STINGER7」のカスタマイズ記事をまとめました。

web-ashibi.net

2016.03.24