ワードプレステーマ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 { /* ココに書き込む */ }
色やスタイルをそれぞれ変えたい場合は、この様に書き込めば個別の小見出しを作成する事もできますよ♫
では、張り切って記事を書いていきましょう☆