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

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

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

カテゴリー別アーカイブ-1

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

スポンサーリンク

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

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

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

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

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

.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;}
  • タイトルの左に5pxの線を入れてカラーを指定。
  • タイトルの下に2pxの線を入れてカラーを指定。
  • 左に線を入れたので左に15pxの余白(右に15pxずらす)
  • タイトルの文字色を黒に。
  • タイトルの高さを指定。
  • タイトルの文字の大きさを指定。

カテゴリー見出し

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

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

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

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

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

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

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

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

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

カテゴリー別アーカイブ-2

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

.archive-header{ border-bottom: none}

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

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

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

カテゴリー別アーカイブ-3

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

.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>

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

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

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

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

サイトのアクセスアップや稼ぐためにおすすめの無料レポート

個人的にアクセスアップや検索上位表示に役立った無料レポートです。登録にメールアドレスが必要ですが、フリーメールでもOKです。

おすすめの無料セミナー

これまでお金に関する勉強をした事がない方は稼ぐサイト作りの前にお金に関する無料セミナーに参加してみて下さい。お金をためたり増やしたりするためにお金の知識があるとかなり有利。考え方の土台になる部分ですからね。

「1万円から始められる節約の方法」「お金に働いてもらう方法」「収入の2割を自動的に貯める方法」など、お金に関する基本的な知識が学べる2時間の無料のセミナーが毎日のように行われてますので、一度参加してみる事をおすすめします。

これまで全くお金の勉強していない方であればお金の知識を身につける事で考え方が大きく変化するはずです。無料の2時間程度のセミナーですが、内容は濃いのでおすすめです。
お金に関する教養無料セミナー

カテゴリー別アーカイブの表示をカスタマイズ”に18件のコメントがあります。

※入院生活から復活しました!!またできるだけ返信しますのでよろしくお願いします(^^)

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

  1. okinagatarashi

    しげぞう様
    おはようございます。
    ありがとうございました。昨日からさくらサーバーへのサーバー移転を始めました。
    昨日の時点では失敗してます。どっか、間違えたみたいです…流石、私!
    どちらも、2つはやれそうもないので完了後に、確認してみます。

    これからも、宜しくお願いします。

  2. しげぞう 投稿作成者

    okinagatarashi様

    コメントありがとうございます。welcartは使った事がないので、詳しくは分かりませんが、おそらく「welcart basic category.php」以外に「category.php」が別に存在するような気がします。なので、再度ファイルを確認して「category.php」が別に無いか確認をしてみて下さい。それがもしあればそちらの方から前回返信した記述を探してみてもらえますか?どうぞよろしくお願いします。

  3. okinagatarashi

    しげぞう様
    おはようございます。
    welcart basic category.php
    の中に Category と言う記述な無いようです。
    私がポンコツで怪しいからこのファイル(掲載しないで頂けると助かります)
    丸写しで送ります。

  4. しげぞう 投稿作成者

    okinagatarashi様

    返信ありがとうございます。同じファイルに、「Category」と記述された場所がないでしょうか?「Category」を含む部分のコード(その前後)があれば教えて下さい。よろしくお願いします。

  5. okinagatarashi

    しげぞう様
    お世話になって居ります。

    h1の表記を探すと

    <?php
    the_archive_title( '’, ” );
    the_archive_description( ”, ” );
    ?>

    となっています。Ctrl+f で h1を検索すると↑だけです。なぜ、入子?となってしまいました・・・出来れば…どうぞ宜しくお願いします。

  6. しげぞう 投稿作成者

    okinagatarashi様

    返信おそくなってすみません。修正するのは子テーマの「category.php」です。以下の部分を探して見て下さい。

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

    一応Twenty Twelveの場合ですが、もしこの記述があればこれをこのように書き換えます。

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

    この記述が見つからない場合には再度コメント頂けると助かります。

  7. okinagatarashi

    しげぞう様
    こんにちは!毎度ご迷惑HELP!です。
    図々しさMAX!!で無遠慮になって居り申し訳なく存じます…( *´艸`)

    「Category: tableware goods」パンくずの下ですが「Category:」を
    消すにチャレンジしましたが、どれがどこか分りません。
    出来ましたら再度、ご教授願えますと助かります。

  8. しげぞう 投稿作成者

    Kita様

    返信ありがとうございます。Jetpackは私は使った事がないので詳しくはないのですが、トップページがアーカイブという扱いになっているのかもしれませんね。

    ちょっと調べてみましたが、アクセス解析が表示されなくなるような不具合などの情報はチラホラありましたが、アーカイブに関しては探しきれませんでした。すみません。

  9. Kita

    分かりずらい質問で申し訳ありません。
    Jetpackというプラグインの統計情報で一日に表示された記事、検索ワードなどを見れます。そこで表示された記事を見てみると「トップページ」と「カテゴリー/アーカイブ」がありました。トップページはトップページですが、「カテゴリー/アーカイブ」というページもトップページと同じ記事でした。
    なぜこの二つが被っているのかなと思いまして。

  10. しげぞう 投稿作成者

    Kita様

    コメントありがとうございます。1日に表示されたページの統計情報というのはアクセス解析でしょうか?トップページとカテゴリーのページが同じというのがちょっと分からないのですが(すみません!)、どのアクセス解析ツールで確認されているのか教えて頂けると助かります。

  11. Kita

    いつも参考にさせて頂いてます。
    一つ質問なんですが、固定ページをメニュー(トップページ)に設定しています。そして1日に表示されたページの統計情報を見てみると「トップページ」と「カテゴリー/アーカイブ」と言うのがあります。後者のページを見てみても設定したトップページと同じページです。

    なぜこの2つが被っているのでしょうか?。分かりずらい分で申し訳ございません。よろしくお願い致します。

  12. 乃風

    いつもお世話になっています。

    しげぞうさんの仰る通りで、「ダグ」はまだ設定されてませんでした。
    とにかくしげぞうさんの仰る通りに進んで行ったら、「タグの設定」及び、
    「タグの編集」も出来ました! ありがとうございました。

  13. しげぞう 投稿作成者

    乃風様

    コメントありがとうございます。タグページに関してですが、乃風様の場合はまだタグの設定をしていないのかもしれません。記事を書く投稿画面の右下の方に「タグ」という項目があり、それぞれの記事にタグを付ける事ができます。まずは記事作成時にタグを追加しておき保存します。

    記事を保存できたら管理画面の「外観」⇒「ウェイジェット」でサイドバーに「タグクラウド」を追加してみてください。するとブログのサイドバーに各記事で設定したタグが表示されます。それをクリックすると同じタグを設定した記事の一覧を表示させる事ができます。これがタグページになります。

    タグページのテンプレートは「tag.php」で編集する事ができます。

  14. 乃風

    いつもお世話になっております。

    最後の部分だけ(1つだけ)分からないので、教えてください。
    「また、これはカテゴリーページの場合ですが、同じように「タグページ」も同じように変更する事ができます。子テーマの「tag.php」の「h1」という部分に同じように先ほどのコードを入れる事で「タグタイトル」だけを表示することが可能です。」

    と明記してありましたが、「タグページ」とやらが見当たらないのですが、どこにあるのでしょうか?

  15. しげぞう 投稿作成者

    >ねこママ様

    報告ありがとうございます!問題解決良かったです。実際に自分で1つ1つやっていくと覚えますよね。私もかなりたくさん失敗をしているのでその度に1つ1つ覚えて行った感じです。また分からない部分などありましたらいつでもコメント下さい。

  16. ねこママ

    しげぞう様、

    反映されました!
    /* */を入れなければいけないのですね!
    また一つ覚えました!
    勉強になります!

    いつも早急にお返事を下さり、感謝いたしております!
    ありがとうございます!

  17. しげぞう 投稿作成者

    >ねこママ様

    いつもありがとうございます。CSSを拝見させて頂いたのですが、CSSの部分にこのような記述がありますよね。

    .archive-header{ border-bottom: none}カテゴリー別アーカイブの下の線

    この日本語の部分はコメントアウトする必要がありますので、こんな感じにしておきます。

    /* カテゴリー別アーカイブ下の線 */
    .archive-header{ border-bottom: none}

    この部分を修正したら

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

    これも反映されると思いますので試して見てください。

  18. ねこママ

    しげぞう様、

    またまたお願いします。

    「カテゴリー別アーカイブ:カテゴリー名」と記事タイトルの間のスペースを調節するコード
    .archive-header {margin-bottom: 10px;}
    を入れたのですが、反映されません。
    ご指導お願いします。