TwentyTwelveのタイトル表示をカスタマイズする

WordPress のテーマ TwentyTwelve のタイトル表示をカスタマイズする方法について書きます。

前回の記事で <h1> ? <h6> をカスタマイズしたのでこれに合わせて調整していきます。

具体的にはこの箇所です。

投稿タイトル、ウィジェットタイトルの参考画像

スポンサーリンク

TwentyTwelve投稿タイトルのカスタマイズ方法

TwentyTwelveの投稿タイトルをカスタマイズするにはスタイルシートの 1535 – 1538 行目を修正します。

.entry-header .entry-title {
    font-size: 22px;
    font-size: 1.571428571rem;
}

投稿名タイトルのカスタマイズ例

.entry-header .entry-title {
    font-size: 22px;
    font-size: 1.571428571rem;
    /* 追加 */
    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;
    border-color: #21759b;
    background: #e6e6e6;
}

これで投稿タイトルのカスタマイズは完了です。

TwentyTwelveウィジェットタイトルのカスタマイズ方法

TwentyTwelveのウィジェットタイトルをカスタマイズするにはスタイルシートの 182 – 194 行目を修正します。

ウィジェットタイトルはフォントサイズも小さいので少し大きくしてみました。

/* Small headers */
.archive-title,
.page-title,
.widget-title,
.entry-content th,
.comment-content th {
    font-size: 11px;
    font-size: 0.785714286rem;
    line-height: 2.181818182;
    font-weight: bold;
    text-transform: uppercase;
    color: #636363;
}

投稿名タイトルのカスタマイズ例

/* Small headers */
.archive-title,
.page-title,
.widget-title,
.entry-content th,
.comment-content th {
    font-size: 17.5px;
    font-size: 1.25rem;
    line-height: 1.181818182;
    font-weight: bold;
    text-transform: uppercase;
    color: #636363;
    /* 追加 */
    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;
    border-color: #21759b;
}

188 – 190 行目がフォントサイズの調整箇所になります。

カスタマイズすると下記のようになります。

before

after

以上簡単ですが、TwentyTwelve タイトルのカスタマイズはこれで完了です。