【Cocoon】フロントページタイプの表示形式をカテゴリごとに対応

INDEX

WordPressテーマ Cocoon
最後に

WordPressテーマ Cocoon

このMASAa.netは、WordPressテーマ Cocoonを使って構築しています。

MASAa.net | 製品レビューとPCやWordPressに関する情報発信サイト

今回は、WordPressテーマ Cocoonの「フロントページタイプの表示形式をカテゴリごとに対応」によるカスタマイズについてまとめてみました。

フロントページ設定

これまでWordPressテーマ Cocoonのフロントページタイプの表示形式は、【一覧（デフォルト）】を設定していました。

今回、フロントページタイプの表示形式を【一覧（デフォルト）】から【カテゴリごと】に変更することにしました。

【カテゴリごと】に変更したことに伴い、【カテゴリごと】のデザインをサイトデザインにあわせる必要があります。

WordPressテーマ Cocoonでのフロントページタイプの表示形式の設定は、「インデックス」→「フロントページタイプ（β版）表示形式」で行います。
また、下の表示カテゴリー枠の中から表示したいカテゴリーを選択します。

WordPressテーマ Cocoonのフロントページタイプの表示形式を【カテゴリごと】への変更に伴い、サイトデザインに合ったカスタマイズを行います。

フロントページタイプの表示形式をカテゴリごとに対応によるカスタマイズ

WordPressテーマ Cocoonでの「フロントページタイプの表示形式をカテゴリごとに対応」によるカスタマイズを行います。

カスタマイズ内容

「フロントページタイプの表示形式をカテゴリごとに対応」によるカスタマイズ内容は、下記の通りです。

「スタイルシート(style.css)」を開き、下記の表示修正内容を最後に追記する形でOKです。

/************************************
** ■フロントページタイプ【カテゴリごと】設定時のカスタマイズ
************************************/
.list-title { /*タイトル*/
  margin-top: 0; /*上マージン*/
  margin-bottom: 15px; /*下マージン*/
  border-radius: 6px; /*角丸コーナー*/
  color: #fff; /*フォントカラー*/
  font-size: 18px; /*フォントサイズ*/
  font-weight: 700; /*フォント太さ*/
  letter-spacing: 2px; /*文字間隔*/
  background:linear-gradient(160deg, #ffddee, #ff75a7, #ff75a7, #ffddee); /*タイトル背景カラー*/
  padding: 5px 0 1px 0; /*余白設定*/
  box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.3); /*シャドー*/
}
@media screen and (max-width: 768px){ /*iPad縦表示対応*/
  .list-title { /*タイトル*/
    font-size: 16px;
    padding: 2px 0px 0 3px; /*余白設定*/
  }
}
.list-title-in::before,
.list-title-in::after { /*タイトル左右ライン削除*/
  background-color: #fff;
/*  display: none;*/
}

.list-new-entries-title.list-title { /*新着記事*/
  margin-top: 40px; /*上マージン*/
}

.list-more-button { /*もっと見るボタン*/
  margin-top: 4px; /*上マージン*/
  margin-bottom: 40px; /*下マージン*/
  border: solid 2px #ff75a7; /*枠線*/
  box-shadow: 3px 3px 2px 0 rgba(0,0,0,0.3); /*シャドー（影）*/
  font-size: 0; /*【もっと見る】ボタンフォントクリア*/
  letter-spacing: 1px; /*文字間隔*/
  font-weight: bold; /*文字強調*/
  color: #f32469; /*フォントカラー*/
  padding: 0 30px 0 30px; /*余白*/
  transition: all 0.6s ease; /*アニメーション*/
}
.list-more-button:hover { /*もっと見るボタン*/
  background-color: #ffddee; /*背景色*/
  transition: all 0.6s ease; /*アニメーション*/
  color: #f32469; /*フォントカラー*/
}
.list-new-entries .list-more-button::after { /*【新着記事一覧を更に読む】設定*/
  font-family: Lato,"游ゴシック体","Yu Gothic",YuGothic,"ヒラギノ角ゴシック Pro","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
  content: "\65B0\7740\8A18\4E8B\30DA\30FC\30B8\3078"; /*新着記事ページへ*/
  font-size: 16px; /*フォントサイズ*/
  color: #f32469; /*フォントカラー*/
  font-weight: bold; /*文字強調*/
}
@media screen and (max-width: 768px){ /*iPad縦表示対応*/
  .list-new-entries .list-more-button::after { /*【新着記事一覧を更に読む】設定*/
    font-size: 14px;
  }
}
@media screen and (max-width: 410px){ /*iPhone8縦表示対応*/
  .list-new-entries .list-more-button::after { /*【新着記事一覧を更に読む】設定*/
    font-size: 12px;
  }
}
/*PC関連カテゴリー設定 START*/
.list-category-16.list-column .list-more-button::after { /*【PC関連一覧を更に読む】設定*/
  font-family: Lato,"游ゴシック体","Yu Gothic",YuGothic,"ヒラギノ角ゴシック Pro","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
  content: "\0050\0043\95A2\9023\30AB\30C6\30B4\30EA\30FC\3078"; /*PC関連カテゴリーへ*/
  font-size: 16px; /*フォントサイズ*/
  color: #f32469; /*フォントカラー*/
  font-weight: bold; /*文字強調*/
}
@media screen and (max-width: 768px){ /*iPad縦表示対応*/
  .list-category-16.list-column .list-more-button::after { /*【PC関連一覧を更に読む】設定*/
    font-size: 14px;
  }
}
@media screen and (max-width: 410px){ /*iPhone8縦表示対応*/
  .list-category-16.list-column .list-more-button::after { /*【PC関連一覧を更に読む】設定*/
    font-size: 12px;
  }
}
/*PC関連カテゴリー設定 END*/
/*WordPress関連カテゴリー設定 START*/
.list-category-2.list-column .list-more-button::after { /*【WordPress関連一覧を更に読む】設定*/
  font-family: Lato,"游ゴシック体","Yu Gothic",YuGothic,"ヒラギノ角ゴシック Pro","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
  content: "\0057\006F\0072\0064\0050\0072\0065\0073\0073\95A2\9023\30AB\30C6\30B4\30EA\30FC\3078"; /*WordPress関連カテゴリーへ*/
  font-size: 16px; /*フォントサイズ*/
  color: #f32469; /*フォントカラー*/
  font-weight: bold; /*文字強調*/
}
@media screen and (max-width: 768px){ /*iPad縦表示対応*/
  .list-category-2.list-column .list-more-button::after { /*【WordPress関連一覧を更に読む】設定*/
    font-size: 14px;
  }
}
@media screen and (max-width: 410px){ /*iPhone8縦表示対応*/
  .list-category-2.list-column .list-more-button::after { /*【WordPress関連一覧を更に読む】設定*/
    font-size: 12px;
  }
}
/*WordPress関連カテゴリー設定 END*/
/*レビュー[PR]カテゴリー設定 START*/
.list-category-21.list-column .list-more-button::after { /*【レビュー[PR]関連一覧を更に読む】設定*/
  font-family: Lato,"游ゴシック体","Yu Gothic",YuGothic,"ヒラギノ角ゴシック Pro","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
  content: "\30EC\30D3\30E5\30FC\005B\0050\0052\005D\30AB\30C6\30B4\30EA\30FC\3078"; /*レビュー[PR]カテゴリーへ*/
  font-size: 16px; /*フォントサイズ*/
  color: #f32469; /*フォントカラー*/
  font-weight: bold; /*文字強調*/
}
@media screen and (max-width: 768px){ /*iPad縦表示対応*/
  .list-category-21.list-column .list-more-button::after { /*【レビュー記事[PR]関連一覧を更に読む】設定*/
    font-size: 14px;
  }
}
@media screen and (max-width: 410px){ /*iPhone8縦表示対応*/
  .list-category-21.list-column .list-more-button::after { /*【レビュー記事[PR]関連一覧を更に読む】設定*/
    font-size: 12px;
  }
}
/*レビュー[PR]カテゴリー設定 END*/

表示させるカテゴリーの設定方法

このカスタマイズ内容はあくまでも当サイトのカテゴリー環境に基づいたカスタマイズとなっています。

今回自分の場合は、3つのカテゴリーを表示するように設定しました。

表示させるカテゴリーの設定方法について説明します。

最初に、WordPressテーマ Cocoonのフロントページタイプ（β版）の表示カテゴリーでチェックを入れたカテゴリーの値を調べる必要があります。

WordPressテーマ Cocoonのフロントページタイプ（β版）の表示カテゴリーで、表示するためにチェックを入れているカテゴリー上にマウスカーソルを移動します。

そのカテゴリー上で右クリックを選択し、メニューの中から【検証】を選択します。

右側にプログラムソースが表示されるので、選択されているラベル(label)の中の値をメモします。

例：この場合は【index_category_ids_16】なので【16】をメモします。

メモした値を、今回のカスタマイズ内容の値【16】【2】【21】と入れ替えます。

なお、今回のカスタマイズ内容では1つの値に付き3箇所で使用しているので、その3箇所全て入れ替える必要があります。

自分の場合、今回のカスタマイズでは3つのカテゴリー（PC関連カテゴリー、WordPress関連カテゴリー、レビュー[PR]カテゴリー）を表示するようにしましたが、それ以上以下の場合は必要に応じて増やしたり減らしたりする必要があります。

下記のソースの部分が1つのカテゴリー表示設定となっています。

このソースの部分を表示させるカテゴリー数に応じて増やしたり減らしたりして下さい。必ず値の変更も忘れずに行って下さい。

/*PC関連カテゴリー設定 START*/
.list-category-16.list-column .list-more-button::after { /*【PC関連一覧を更に読む】設定*/
  font-family: Lato,"游ゴシック体","Yu Gothic",YuGothic,"ヒラギノ角ゴシック Pro","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
  content: "\0050\0043\95A2\9023\30AB\30C6\30B4\30EA\30FC\3078"; /*PC関連カテゴリーへ*/
  font-size: 16px; /*フォントサイズ*/
  color: #f32469; /*フォントカラー*/
  font-weight: bold; /*文字強調*/
}
@media screen and (max-width: 768px){ /*iPad縦表示対応*/
  .list-category-16.list-column .list-more-button::after { /*【PC関連一覧を更に読む】設定*/
    font-size: 14px;
  }
}
@media screen and (max-width: 410px){ /*iPhone8縦表示対応*/
  .list-category-16.list-column .list-more-button::after { /*【PC関連一覧を更に読む】設定*/
    font-size: 12px;
  }
}
/*PC関連カテゴリー設定 END*/

次にそれぞれのボタンのラベル名を設定します。

ラベル名の設定方法は、contentタグ部分のコードを変更します。

例えば、下記ソースのcontentタグの「\0050\0043\95A2\9023\30AB\30C6\30B4\30EA\30FC\3078」を変更します。

content: "\0050\0043\95A2\9023\30AB\30C6\30B4\30EA\30FC\3078"; /*PC関連カテゴリーへ*/

表示したい文字列をUnicodeで入力します。

文字列をUnicodeに変換については、下記サイト等を利用すると便利です。

Unicode変換 | Webサイト制作支援 | ShanaBrian Website

文字からUnicode、Unicodeから文字への相互変換を行うツールです。

フロントページタイプの表示形式をカテゴリごとに対応後

今回のフロントページタイプの表示形式をカテゴリごとに対応によって、次の様に表示となりました。

実際の表示については、このMASAa.netのトップページでご確認下さい。

最後に

これまではWordPressテーマ Cocoonのフロントページタイプの表示形式は、【一覧（デフォルト）】にしていましたが、【カテゴリごと】に変更したことで、より全体が分かりやすく表現されるサイトに変わったと思います。

カテゴリーの数が多いとその選別に難しいのですが、自分の場合、親（上位）カテゴリーの数は4個と少ないので、今回のカスタマイズはカテゴリーが少ないサイトの場合有効だと思います。

WordPressテーマ Cocoon

フロントページ設定

フロントページタイプの表示形式をカテゴリごとに対応によるカスタマイズ

カスタマイズ内容

表示させるカテゴリーの設定方法

フロントページタイプの表示形式をカテゴリごとに対応後

最後に

コメント