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

コメントを残す

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