日付アーカイブ、カテゴリーアーカイブを表示したときのページタイトル部分のCSS設定を行います。

TwentyFourteenでの設定内容

　
下記のように日付アーカイブ（archive.php）とカテゴリー（category.php）でそれぞれ異なるCSSクラスを使用しています。
　
・archive.php

<?php if ( have_posts() ) : ?>
<header class="page-header">
  <h1 class="page-title">

　
・category.php

<?php if ( have_posts() ) : ?>
<header class="archive-header">
  <h1 class="archive-title">

　

修正例

　
archive.phpで使用している”page-header”クラスはブートストラップ３で定義済みのCSSクラスです。同じCSSクラスを使用すると干渉して混乱しそうなので、archive.phpもcategory.phpで使用している”archive-header”クラスを使用します。
　
現在作成中のarchive.php、category.phpには上記CSSクラスが設定されていないので、<header class=”archive-header”>・・</header>の記述を両ファイルに追加します。
　
①archive.php

if ( have_posts() ) : ?>
  <header class="archive-header">
    <h1 class="page-title">
　　　：
    </h1>
  </header>

　
②category.php

if ( have_posts() ) : ?>
  <header class="archive-header">
    <h1 class="archive-title">
      <?php printf( __( 'Category Archives: %s', 'twentyfourteen' ),single_cat_title( '', false ) ); ?>
    </h1>
  <?php
    $term_description = term_description();
    if ( ! empty( $term_description ) ) :
      printf( '<div class="taxonomy-description">%s</div>', $term_description );
    endif;
  ?>
  </header>

　
③style.css
・TwentyFourteenの”6.9 Archives”の部分をコピーして、適宜好みに応じて修正します。
・.page-headerは上記利用により削除します。

/*
 * 6.9 Archives
 * --------------------------------------------------------
 */

.archive-header {
        margin: 5px auto;
}
.archive-title,
.page-title {
        font-size: 16px;
        font-weight: 900;
        line-height: 1.5;
        margin: 0;
}

.taxonomy-description,
.author-description {
        color: #767676;
        font-size: 14px;
        line-height: 1.2857142857;
        padding-top: 18px;
}

.taxonomy-description p,
.author-description p {
        margin-bottom: 18px;
}

.taxonomy-description p:last-child,
.author-description p:last-child {
        margin-bottom: 0;
}

.taxonomy-description a,
.author-description a {
        text-decoration: underline;
}

.taxonomy-description a:hover,
.author-description a:hover {
        text-decoration: none;
}

「ブートストラップ３を使って自作テーマ作成」の目次へ

関連記事の目次