HCDコンサルティング(旧・中川勉社会保険労務士事務所FPウェブシュフ)のブログ

Categoryページの見出しをカスタマイズ~WordPress Twenty Twelve

2013-03-11_1027
WordPressのデフォルトテーマTwenty Twelveのカテゴリーページの見出しって小さすぎませんか。@web_shufuはこれを大きくして、「カテゴリー別アーカイブ:」も削除しました。

まずは少しだけ大きく

カテゴリーページの見出しには.archive-titleというクラスがあてられています。

このフォントサイズが小さすぎるので、この設定を外します。

style.cssで以下の部分を探してください。

/* 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;
}

font-sizeは小さすぎです。これを大きく変えたいところですが、他のクラスに影響を与えてもいけないので、.archive-title,をコメントアウトして以下のような感じにします。

/* 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;
}

これだけで、「カテゴリー別アーカイブ: ○○○」の文字が大きくなります。

2013-03-11_1049

新たにスタイルをあてる

この大きさとデザインで満足ならここで終わりでもいいのですが、@web_shufuは.archive-titleにスタイルをあてました。

.archive-title {
    font-size: 17.5px;
    font-size: 1.25rem;
    line-height: 1.181818182;
    font-weight: bold;
    text-transform: none;
    color: #000000;
    border-bottom: 2.8px solid #00a48c;
    border-bottom: 0.2rem solid #00a48c;
}

字の大きさをもう少し大きくして、アンダーラインをつけました。

2013-03-11_1058

「カテゴリー別アーカイブ:」削除

ここで終わってもよかったのですが、@web_shufuは「カテゴリー別アーカイブ:」を取り除きたくなってそうしました。

変更したのはcategory.phpの以下の部分です。

<h1 class="archive-title"><?php printf( __( 'Category Archives: %s', 'twentytwelve' ), '<span>' . single_cat_title( '', false ) . '</span>' ); ?></h1>

このように変えました。

<h1 class="archive-title"><?php single_cat_title() ; ?></h1>

最終的にカテゴリーページのタイトルは以下のような感じになりました。
2013-03-11_1058


投稿日

カテゴリー:

投稿者:

 最終更新日:

タグ: