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

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

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

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

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

有料だけど個人的におすすめの商材

⇒初心者のための商標サイト設計図

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

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

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

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

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

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

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

カテゴリー見出し

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

最終更新日：2016/02/26

おすすめのASP

こちらの記事もおすすめです

WordPress見出しの使い方とカスタマイズWordPress見出しの使い方とカスタマイズ
サイト作成で個人的によく使う蛍光マーカー、ボックス、その他CSSまとめサイト作成で個人的によく使う蛍光マーカー、ボックス、その他CSSまとめ
アフィリエイトリンクをボタン化する方法
WordPressサイドバーのカスタマイズまとめWordPressサイドバーのカスタマイズまとめ
サイトのアクセスアップや稼ぐためにおすすめの無料レポート

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

広告
【無料】キーワード選定に特化した無料教材＆動画「キーワード無双」
広告
【期間限定無料】一億円ブロガーの電子書籍「自由な人生を手に入れる教科書」
ブログの更新はこちらから
アフィリエイトで稼ぐ方法を全部話そうと思う

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

コメントの反映には時間がかかる場合があります。

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

  2. しげぞう 投稿作成者

    匿名様

    コメントありがとうございます。文字列ですが、これはphpファイルで記述ミスした時に表示されます。まずはそれと同じ記述があるファイルを探す必要があります。子テーマを使われているのであれば子テーマで作成したどれかのphpファイルだと思います。多分comments.php。

    ■探し方

    各PHPファイルを１つ１つファイルを開き、「Ctrl」と「F」を一緒に押すと検索窓がでますので、それでページ内の検索ができます。comments.phpから探してみて下さい。

    ■対処方法

    対象のファイルが見つかったらそこに記述ミスがあるのでそれを修正。もし、どこを修正していいのか分からない場合には親テーマの同じphpファイルの記述をマルっとコピーして子テーマの同ファイルにコピペ。つまりそのファイルを作成した初期状態に戻す感じにすればOKです。

    多分記述自体はcomments.phpにあるので、これを初期化すれば解決しそうな予感はしてますが、もしこれで解決しない場合にはcomments.phpを呼び出している別のファイルの可能性もありますので、その場合には再度コメント下さい。ちょっと考えてみます。

  3. 匿名

    どこに書いたらいいかわからないのでここに書きます。

    /* * If the current post is protected by a password and * the visitor has not yet entered the password we will * return early without loading the comments. */ if ( post_password_required() ) return; ?>

    このようなものが記事の下の方に表示されます。
    なにが原因か教えていただけないでしょうか。