カテゴリーページごとの固定表示スペースを編集する方法

カテゴリーページごとの固定表示スペースを編集する方法です。当サイト作者が作成した次のテンプレートについてです。

概要

  1. テンプレートのHTMLとCSSを編集することで、カテゴリーページごとの固定表示スペースを編集できます。

  2. カテゴリーナンバー0~2まではデフォルトで表示されるようになっています。HTMLを編集することで好きな文言を入れられます。

  3. カテゴリーナンバーとは、カテゴリーページURLの数字部分です。たとえば、blog-category-0.htmlなら、カテゴリーナンバーは「0」です。カテゴリー作成順に番号がふられます。

  4. CSSを編集することで、カテゴリーページごとの固定表示スペースのスタイル(背景色など)を変更できます。

  5. カテゴリーナンバー3以降は、カテゴリーナンバー2などの部分をコピペして増やせます。テンプレートのHTML内にもその旨記載しています。

メリット

  1. カテゴリーページごとに、そのカテゴリーの趣旨や概要などを読者に伝えられます。

テンプレートのHTMLを編集

カテゴリーナンバー0~2までを編集

  1. テンプレート内の次の部分以降を編集します。

    • <!-- ▼▼▼ カテゴリページごとの固定表示スペース 開始 ▼▼▼ -->
    valid-seo-110-each-category-1.png
  2. 編集した具体例は次のとおりです。当サイトで現在設定しているものです。当サイトのカテゴリーページをご覧いただきますと、実際の様子を確認いただけます。

    valid-seo-110-each-category-2.png

カテゴリーナンバー3以降を増やす

  1. コピペで増やせます。ここでは、カテゴリーナンバー2を2つ増やしカテゴリーナンバー4まで対応可能にする方法を述べます。カテゴリーナンバー5以降も同じ要領で増やせます。

  2. カテゴリーナンバー2を2つ増やしました。下図の黄色の枠内が増やした部分です。

    valid-seo-110-each-category-3.png
  3. 下図で赤丸で囲ったところをそれぞれ半角の「3」と「4」に変更します。青丸の部分は必須ではありませんが、今後のメンテナンス時に混乱しないように3と4に変更しておきます。青丸部分は半角・全角のどちらでもいいです。

    valid-seo-110-each-category-4.png
  4. 編集しました。

    valid-seo-110-each-category-5.png

テンプレートのCSSを編集

  1. CSSの下図の部分を編集します。

    • /*記事 > カテゴリーページごとの固定表示部分を「一括」定義*/
    • /*記事 > カテゴリーページごとの固定表示部分を「個別」定義*/
    valid-seo-110-each-category-7.png
  2. 背景色の変更で例示します。

    1. 赤丸で囲ったカラーコードを変更すると、カテゴリーナンバーごとに個別の背景色を設定できます(個別定義)。
    2. 青丸で囲ったカラーコードを変更すると、上記個別設定をしていないカテゴリーナンバーの背景色を設定できます(一括定義)。
    3. CSS内コメントでも次のことを記載しています。
    「一括」で定義した方よりも、この「個別」で定義した方が優先されます。
    valid-seo-110-each-category-6.png
  3. 上記設定でのカテゴリーページごとの固定表示スペース背景色は次のとおりです。

    • カテゴリーナンバー0(#9fc)
    • カテゴリーナンバー1(#ffc)
    • カテゴリーナンバー2(#fcf)
    • カテゴリーナンバー3(#cff):個別定義がないので一括定義が適用される
    • カテゴリーナンバー4(#cff):個別定義がないので一括定義が適用される

以上です。

関連記事
(この一行は、各記事の最後に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)
スポンサードリンク
(この一行は、各ページ下部に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)