カテゴリー別アーカイブの表示をカスタマイズ

今回はTwentyTwelveの「カテゴリー別アーカイブ：カテゴリー名」となっている部分をカスタマイズして、見出し風にしたり、「カテゴリー別アーカイブ」の文言を削除する方法も紹介していきます。

これはタグページでも過去記事ページでも同じように表示されますよね。初期状態では非常に文字が小さく見にくい表示になってます。しかもなぜか英語表記は自動で大文字になってます。

今回はこの部分をカスタマイズしていきます。

おすすめ無料レポート

【フリーメールでも登録OK】キーワード選定に特化した無料教材＆動画「キーワード無双」

1 カテゴリー別アーカイブのカスタマイズの前に
2 タイトル部分のカスタマイズ
3 TwentyTwelveが英字を大文字に自動変換しないようにする
4 カテゴリー別アーカイブ下の薄い線を消す
5 記事タイトルとの距離を狭くする
6 カテゴリー別アーカイブ：という部分を削除するカスタマイズ

カテゴリー別アーカイブのカスタマイズの前に

最初にこの表示を見たときにこの部分いらなくね？と思ったのですが、実はこの部分はカテゴリー記事ページのタイトルなんですよ。あまりに小さく薄い表示だったのでまさかタイトルとは思いませんで、危うくこの部分を削除してしまう所でした。

言ってみれば記事タイトルを削除しようとしてたようなもんです。という訳でタイトル部分を削除する訳にはいかないのでこれをタイトルっぽく見せるようにカスタマイズしてみました。

タイトル部分のカスタマイズ

まずこの部分をカスタマイズする時には子テーマのスタイルシート(style.css) に記述していきます。この部分はカテゴリーページでもタグページでも「.archive-title」という名前になってますので、このように書きます。

.archive-title {}

1	.archive-title {}

この{}の中にカスタマイズするコードを入れていきます。ちなみに私の場合はこのようにしてます。

.archive-title {
border-left: 5px solid #1F5E73;
border-bottom:2px solid #1F5E73;
padding: 0 0 0 15px ;
color:#000000;
line-height: 2;
font-size: 18px;}

.archive-title {

border-left: 5px solid #1F5E73;

border-bottom:2px solid #1F5E73;

padding: 0 0 0 15px ;

color:#000000;

line-height: 2;

font-size: 18px;}

タイトルの左に5pxの線を入れてカラーを指定。
タイトルの下に2pxの線を入れてカラーを指定。
左に線を入れたので左に15pxの余白（右に15pxずらす）
タイトルの文字色を黒に。
タイトルの高さを指定。
タイトルの文字の大きさを指定。

タイトル部分のカスタマイズや装飾方法は別の記事で細かく紹介してますので次の2つの記事を参考にしてこの{}内に好きな文字色や装飾コードを入れて下さいね。

TwentyTwelveが英字を大文字に自動変換しないようにする

冒頭でも書いたようにこの「カテゴリーアーカイブ」で表示されるカテゴリー名が何故か大文字になっています（英字の場合）。これはTwentyTwelveがわざわざ英字を大文字にする設定にしているためです。この設定はこのアーカイブの部分だけではなくて、次の3箇所に適用されています。

メニューバー
アーカイブタイトル
サイドバーのウィジェットのタイトル

この部分に英字があると大文字に変換されるようになっている訳です。まずはこの余計な設定を解除します。具体的にはスタイルシート(style.css) に次のように記述します。

/* 勝手に大文字にしない */
.main-navigation li a {text-transform: none;}
.archive-title {text-transform: none;}
.widget-title {text-transform: none;}

/* 勝手に大文字にしない */

.main-navigation li a {text-transform: none;}

.archive-title {text-transform: none;}

.widget-title {text-transform: none;}

これで英字が勝手に大文字にならないはずです。

カテゴリー別アーカイブ下の薄い線を消す

このカテゴリー別アーカイブというタイトルの下に薄い色の線が入ってますよね。

この線を消すには子テーマのスタイルシート(style.css) にこのように記述して下さい。

.archive-header{ border-bottom: none}

1	.archive-header{ border-bottom: none}

これで線を消す事ができます。

記事タイトルとの距離を狭くする

アーカイブタイトルの下の線を消したのはいいのですが、記事タイトルとの距離が結構広く設定されてます。

この部分を狭くするには子テーマのスタイルシートにこれを追加します。

.archive-header {margin-bottom: 10px;}

1	.archive-header {margin-bottom: 10px;}

記事タイトルとの余白ですので、好きな数字に入れ替えて調整して下さい。

カテゴリー別アーカイブ：という部分を削除するカスタマイズ

えっとこれは「カテゴリー別アーカイブ：カテゴリー名」となっている部分の「カテゴリー別アーカイブ：」という部分だけ削除して「カテゴリー名」だけを残すというカスタマイズです。

このカスタマイズをする場合には「category.php」というファイルを編集しますので、子テーマに親テーマの「category.php」をコピーしておいて下さい。それができたら子テーマの「category.php」から次の記述を探します。

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

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

この「h1」という部分がアーカイブタイトルを出力するコードなのでこれをこのように書き換えます。

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

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

ちょっと右に長いのでスクロールしてコピペして下さい。これで「カテゴリー別アーカイブ：」という部分だけ削除して「カテゴリー名だけを表示させる事ができます。

また、これはカテゴリーページの場合ですが、同じように「タグページ」も同じように変更する事ができます。子テーマの「tag.php」の「h1」という部分に同じように先ほどのコードを入れる事で「タグタイトル」だけを表示することが可能です。以上で今回のカスタマイズは終了です。