TwentyTwelveの見出しをカスタマイズする

今回はTwentyTwelveの見出しタグ <h1> ? <h6> と blockquote のカスタマイズを行いました。

WordPressのTwentyTwelveはシンプルなのでそのままでも中々良いのですが、見出しタグをカスタマイズして変化をつけたいと思います。

スポンサーリンク

TwentyTwelveの見出しタグ変更方法

TwentyTwelveの見出しをカスタマイズするにはスタイルシートの 755 – 791 行目を調整します。

.entry-content h1,
.comment-content h1 {
    font-size: 21px;
    font-size: 1.5rem;
    line-height: 1.5;
}
.entry-content h2,
.comment-content h2,
.mu_register h2 {
    font-size: 18px;
    font-size: 1.285714286rem;
    line-height: 1.6;
}
.entry-content h3,
.comment-content h3 {
    font-size: 16px;
    font-size: 1.142857143rem;
    line-height: 1.846153846;
}
.entry-content h4,
.comment-content h4 {
    font-size: 14px;
    font-size: 1rem;
    line-height: 1.846153846;
}
.entry-content h5,
.comment-content h5 {
    font-size: 13px;
    font-size: 0.928571429rem;
    line-height: 1.846153846;
}
.entry-content h6,
.comment-content h6 {
    font-size: 12px;
    font-size: 0.857142857rem;
    line-height: 1.846153846;
}

見出しタグのカスタマイズ例

設定値は好みだと思うので、ここでは実際に適用したものをサンプルとして掲載します。

.entry-content h1,
.comment-content h1 {
    font-size: 21px;
    font-size: 1.5rem;
    line-height: 1.5;
    /* 追記 */
    padding: 5px 0 5px 15px;
    padding: 0.3571428571428571rem 0 0.3571428571428571rem 1.071428571428571rem;
    border-left: 8px solid;
    border-left: 0.5714285714285714rem solid;
    border-bottom: 1px solid;
    border-bottom: 0.0714285714285714rem solid;
    font-weight: bold;
    color: #515151;
    border-color: #21759b;
}
.entry-content h2,
.comment-content h2,
.mu_register h2 {
    font-size: 18px;
    font-size: 1.285714286rem;
    line-height: 1.6;
    /* 追記 */
    padding: 5px 0 5px 15px;
    padding: 0.3571428571428571rem 0 0.3571428571428571rem 1.071428571428571rem;
    border-left: 8px solid;
    border-left: 0.5714285714285714rem solid;
    border-bottom: 1px dotted;
    border-bottom: 0.0714285714285714rem solid;
    font-weight: bold;
    color: #515151;
    border-color: #4682b4;
}
.entry-content h3,
.comment-content h3 {
    font-size: 16px;
    font-size: 1.142857143rem;
    line-height: 1.846153846;
    /* 追記 */
    padding: 3px 0 3px 15px;
    padding: 0.2142857142857143rem 0 0.2142857142857143rem 1.071428571428571rem;
    border-left: 8px solid;
    border-left: 0.5714285714285714rem solid;
    border-bottom: 1px solid;
    border-bottom: 0.0714285714285714rem solid;
    font-weight: bold;
    color: #515151;
    border-color: #b0c4de;
}
.entry-content h4,
.comment-content h4 {
    font-size: 14px;
    font-size: 1rem;
    line-height: 1.846153846;
    /* 追記 */
    padding: 3px 0 3px 15px;
    padding: 0.2142857142857143rem 0 0.2142857142857143rem 1.071428571428571rem;
    border-left: 8px solid;
    border-left: 0.5714285714285714rem solid;
    font-weight: bold;
    color: #515151;
    border-color: #a9a9a9;
}
.entry-content h5,
.comment-content h5 {
    font-size: 13px;
    font-size: 0.928571429rem;
    line-height: 1.846153846;
    /* 追記 */
    padding: 2px 0 2px 15px;
    padding: 0.1428571428571429rem 0 0.1428571428571429rem 1.071428571428571rem;
    border-left: 8px solid;
    border-left: 0.5714285714285714rem solid;
    font-weight: bold;
    color: #515151;
    border-color: #d3d3d3;
}
.entry-content h6,
.comment-content h6 {
    font-size: 12px;
    font-size: 0.857142857rem;
    line-height: 1.846153846;
    /* 追記 */
    padding: 2px 0 2px 15px;
    padding: 0.1428571428571429rem 0 0.1428571428571429rem 1.071428571428571rem;
    border-left: 8px solid;
    border-left: 0.5714285714285714rem solid;
    font-weight: bold;
    color: #515151;
    border-color: #f5f5f5;
}

TwentyTwelveのblockquote変更方法

ついでなので blockquote もカスタマイズしちゃいます。

blockquote のカスタマイズは 834 – 841 行目で調整します。

.entry-content blockquote,
.comment-content blockquote {
    margin-bottom: 24px;
    margin-bottom: 1.714285714rem;
    padding: 24px;
    padding: 1.714285714rem;
    font-style: italic;
}

blockquoteのカスタマイズ例

blockquote はこんな感じにしました。

.entry-content blockquote,
.comment-content blockquote {
    margin: 20px 10px 30px 10px;
    margin: 1.428571428571429rem 0.7142857142857143rem 2.142857142857143rem 0.7142857142857143rem;
    padding: 24px;
    padding: 1.714285714rem;
    border-left: 5px solid;
    border-left: 0.3571428571428571rem solid;
    font-style: italic;
    color: #778899;
    border-color: #e6e6fa;
    background: #f8f8ff;
}

サイズを変更したい場合は px に合わせ rem も必ず変更します。
TwentyTwelveは “14px = 1rem” で計算できます。

何度も値の変更と表示確認を何度も繰り返して調整していきます。

ですが、結構これって大変ですよね。

なので、即席で 「見出しチェッカー」 を作って WordPress に実装してみました。

役に立つかは置いといて下記で公開してます。

work.log – 見出しチェッカーのページ

TwentyTwelveの見出しカスタマイズはこれで以上です。

今回は下記のページを参考にしました。

参考にしたページ

CSSの見出しサンプル
原色大辞典