TwentyTen 記事の小見出し(h1~h6)を見やすく美しくする

ワードプレステーマTwentyTenは、見出し(記事タイトル)同様小見出しについてもチョッと残念せすよね。黒単色…。

ってことで、小見出しも小綺麗に見やすくしてみましょう♫見出し(記事タイトル)の設定は、コチラを参考にしてみて下さい⇒テーマTwentyTenの見出し(記事タイトル)を見やすく美しくする

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

スタイルシートの中から、次の部分を探して下さい。

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

#main {
	clear: both;
	overflow: hidden;
	padding: 40px 0 0 0;
}
#content {
	margin-bottom: 36px;
}
~~~~~~~~~ 中略  ~~~~~~~~
}
#content h1,
#content h2,
#content h3,
#content h4,
#content h5,
#content h6 {
	color: #000;
	line-height: 1.5em;
	margin: 0 0 20px 0;
}
#content table {
	border: 1px solid #e7e7e7;
	margin: 0 -1px 24px 0;
	text-align: left;
	width: 100%;
}

↓これを、以下の様に追加/編集してみて下さい。

#content h1,
#content h2,
#content h3,
#content h4,
#content h5,
#content h6 {
	margin:0 0 10px 0;
	padding:2px 8px;
	border-width:0 0 2px 3px; /* 外枠の線の位置と太さ */
	border-color: #555555;     /* 外枠の線の色 */
	border-style: solid;    /* 外枠の線のスタイル */
	background: #b91d3a;    /* 小見出しの背景色 */
	font-size: 18px;       /* 小見出しの文字の大きさ */
	color: #fff;         /* 小見出しの文字の色 */
	line-height: 1.5em;
	font-weight: normal;
}

これで、見やすく美しい小見出しに変わったハズです。

えぇ~、ただし、色やセンスは保障が出来ません…(汗 ですから、上記の数値やカラーコードを変えてお好みの小見出しにしてみて下さい。

参考サイト:見出しのことなら⇒見出しメーカー

また、上記ではh1~h6すべて同じ様に設定していますが、個別に小見出しの設定を行う事も出来ます。

#content h1 {
         /* ココに書き込む */
}
#content h2 {
         /* ココに書き込む */
}
#content h3 {
         /* ココに書き込む */
}
#content h4 {
         /* ココに書き込む */
}
#content h5 {
         /* ココに書き込む */
}
#content h6 {
         /* ココに書き込む */
}

色やスタイルをそれぞれ変えたい場合は、この様に書き込めば個別の小見出しを作成する事もできますよ♫

では、張り切って記事を書いていきましょう☆

WordPressデザインブック ステップバイステップ形式でマスターできる
WordPressデザインブック ステップバイステップ形式でマスターできる

 

にほんブログ村 ブログブログ ブログノウハウへ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です