ワードプレスで見出し(記事タイトル)を変更/カスタマイズする方法です。

ヘッダー画像とは離れますが、チョッと触れておこうと思いました。当サイトも見出しを変更していますが、とっても簡単に素敵な見出しが出来てしまいます!!

当サイトは、ワードプレステーマTwentyElevenがベース(親テーマ)なので、コチラを例のとってお伝えしていきます。

スタイルシートを編集していくのですが、コチラのサイトを参考にすると大変分かりやすく、簡単に美しい見出しが出来てしまいます。

スタイルシート 見出しメーカー

CSSやHTMLを知らなくても簡単に美しい見出しを作成出来ます。そう、コピペだけでOK!!

美しい見出しを作っちゃおう♫

それでは、管理画面より「外観」⇒「テーマ編集」から’スタイルシート’を開いて下さい。(小テーマを使用している方は、小テーマ側の’スタイルシート’を編集して下さい。)

’ スタイルシート’の中から、次の箇所を見つけて下さい。

/* =Content
----------------------------------------------- */

#main {
	clear: both;
	padding: 1.625em 0 0;
}

～～～～～～～～～　中略　～～～～～～～～～

.entry-title {　/* 記事タイトル(見出し)の設定 */
	clear: both;
	color: #222;
	font-size: 26px;
	font-weight: bold;
	line-height: 1.5em;
	padding-bottom: .3em;
	padding-top: 15px;
}
.entry-title,
.entry-title a {　/* 記事タイトル(見出し)のリンクの色 */
	color: #222;
	text-decoration: none;
}
.entry-title a:hover,
.entry-title a:focus,
.entry-title a:active {　/* 記事タイトル(見出し)のマウスオーバー時の色 */
	color: #1982d1;
}

この’記事タイトルの設定’部分に編集を加えると、素敵な見出しにすることが出来ます。以下は参考例です。

/* =Content
----------------------------------------------- */

#main {
	clear: both;
	padding: 1.625em 0 0;
}

～～～～～～～～～　中略　～～～～～～～～～

.entry-title {　/* 記事タイトル(見出し)の設定 */
	clear: both;
	margin: 0 0 10px 0;
	padding: 2px 8px;
	border-width: 0 0 0 5px;
	border-color: #b91d3a;
	border-style: solid;
	background: #67a319;
	color: #fefefe;
	font-size: 20px;
	font-weight: normal;
	line-height: 1.5em;
	display: block;
	float: left;
	margin: 0;
	padding: 0 0 0 12px;
	width: 100%;
}
.entry-title,
.entry-title a {　/* 記事タイトル(見出し)のリンクの色 */
	color: #fefefe;
	text-decoration: none;
}
.entry-title a:hover,
.entry-title a:focus,
.entry-title a:active {　/* 記事タイトル(見出し)のマウスオーバー時の色 */
	color: #b91d3a;
}

いかがですか?見出しメーカーを参考に編集してみました。素敵な見出しが出来たと思います。上記の数値やカラーコードを変更してみると、様々な見出しデザインが可能です。

色々と試してみて、あなたらしいデザインで見出しを演出してみて下さい。これで、ヘッダー画像と見出しはOKのハズですねっ!?