【Cocoon】ユーザーに見やすい！おしゃれなカテゴリーページを作る方法

Cocoonテーマを使っていて、カテゴリーページに表示される記事について悩みはありませんか？

どんな内容の記事が書かれているのか分かりにくい
記事が更新順に並べられているだけなので探しにくい

こんな悩みを解決すべく、この記事では以下のようなカテゴリーページを作る方法を紹介します。

クマさん

ただ記事が並べられているものより見やすいね

キラ

どんなことが書かれているのかわかりやすいのがポイント

囲み枠などでCSSを使う場面もありますが、実際に使用したCSSや参考サイトを載せますので参考にしてみてください。

この記事でわかること

カテゴリーページの作り方
参考にした記事やサイト

ここを解説

では早速みていきましょう。

カテゴリーの詳細を紹介する
1. リストを使って箇条書きにする
カテゴリーごとに記事を表示する
1. カテゴリー記事部分の作成
カテゴリー内の記事を紹介する
1. 切り替えタブを使って作成する
まとめ

カテゴリーの詳細を紹介する

まずこのように、紹介するカテゴリーの中にはどんな内容が書かれているのか詳しく紹介します。

リストを使って箇条書きにする

ブロックエディタのリストを使っても良いですが、デザイン性があるほうがおしゃれなので、今回はCSSとHTMLを使った方法で紹介します。

当サイトでもおすすめの囲み枠とリストを紹介しています↓

【CSS】コピペOK！おしゃれな囲み枠（ボックス）デザイン20選

STEP

CSSをコピペする

自分で使いたいデザインが決まったら「追加CSS」を開いて、CSSをコピペしましょう。

画像で紹介した私と同じデザインを希望する方は、以下のCSSをコピペしてください。

CSSを表示する

CSS

/* バルーン囲み枠 */
.balloon {
  position: relative;
  display: inline-block;
  margin: 0.5em 0 1em 0;
  padding: 7px 15px;
  min-width: 120px;
  max-width: 100%;
  background: #f9b3b1;　 /* 背景色 */
  border-radius: 5px;　 /* 角の丸み */
}

.balloon:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 35px;
  margin-left: -15px;
  border: 8px solid transparent;
  border-top: 8px solid #f9b3b1; /* 三角部分の太さと色 */
}

.balloon p {
  margin: 0;
  padding: 0;
  font-size: 12px;　/* 文字の大きさ */
  color: #fff;　/* 文字色 */
  font-weight: bold;　/* 太文字 */
}

/* 下線付きリスト囲み枠 */
.listbox {
  margin: 1px auto;
  background: #fff3e8;　/* 背景色 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
  width: 100%;
}

.listbox p{
  margin: 0;
  padding: 1em;
}

/* リスト表示 */
ol.sample{
  counter-reset:list;
  list-style-type:none;
  padding: 5px 15px 2px 15px;
}
ol.sample li{
  position:relative;
  padding: 5px 0 6px 27px;
  line-height: 25px;
  border-bottom: dashed 1px #F6A38B;　/* 下線の種類・太さ・色 */
}
ol.sample li:before{
  counter-increment: list;
  font-family: "Font Awesome 5 Free";
  content: "\f138";　/* アイコンの種類 */
  font-weight: 900;
  font-size: 1.2em;
  color: #ffc44f;　/* アイコンの色 */
  display: block;
  position: absolute;
  left: 1px;
  top: 6px;
}

上記CSSは「バルーン」と「リスト囲み枠」の２つのデザインを使用した形になっています。

STEP

HTMLを記述する

上記で選んだデザインにはCSSだけではなくHTMLも記述されているので、該当するHTMLをコピペしましょう。

画像で紹介した私と同じデザインを希望する方は、以下のHTMLをコピペしてください。

HTMLを表示する

HTML

<div class="balloon">
<p>バルーン部分の本文</p>
</div>
<div class="listbox">
<ol class="sample">
<li>リスト内容①</li>
<li>リスト内容②</li>
<li>リスト内容③</li>
</ol>
</div>

あとはリスト部分に詳しいカテゴリー内容を記載して、最初の部分は完成です。

カテゴリーごとに記事を表示する

ここは「見出しタイトル」「簡単な説明文」「記事」の３構成となっており、実際の記事を紹介する部分になります。

カテゴリー記事部分の作成

パソコンで見た場合、中心にあるほうが見やすくなるため、カラムを使用していきます。

STEP

３カラムの設定

赤丸で囲った➕ボタンを押すと、追加できるブロックが表示されますので、「カラム」を選択します。

一番右の「25／50／25」を選択してください。

すると３つのブロックが表示されますが、ここで少しサイズを調整します。

右側の設定画面から幅を、それぞれ「10／80／10」の比率に変更してください。

キラ

左右のカラムは使わないのでなるべく小さくしています

STEP

見出しを設定する

左側の赤丸で囲った➕ボタンを押すと、追加できるブロックが表示されますので、「見出し」を選択します。

お好みの見出し（h2〜h6）を選んでタイトルを入力して、見出しの設定は完了です。

★テーマにない見出しを使いたい場合

以下のようなサイトで紹介されている見出しを使用する場合は、セレクタを変更することで簡単にできます。

引用：「CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選」

「h1」というのは見出しを表すセレクタなので、別のセレクタ名を設定するだけです。

当ページもこの見出しデザインを使って、以下のようにセレクタ名を変更して使っています。

CSSを表示する

CSS

/* 固定ページ見出し */
.midashi {
  position: relative;
  color: #704948;
  font-size: 20px;
  padding: 10px 0;
  text-align: center;
  margin: 1.5em 0;
}

.midashi:before {
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  width: 150px;
  height: 63px;
  border-radius: 50%;
  border: 4px solid #f9e0ae;
  border-left-color: transparent;
  border-right-color: transparent;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

「.（ドット）セレクタ名（半角文字）」という書き方をしましょう。

あとはブロックエディタで「カスタムHTML」を選択して、以下のHTMLをコピペしてください。

HTML

<div class="midashi">見出しタイトル</div>

STEP

簡単な説明文を設定する

左側の赤丸で囲った➕ボタンを押すと、追加できるブロックが表示されますので、「白抜きボックス」を選択します。

自分で好きな色を設定して、説明文を入力してください。

テーマにないボックスを使う場合

お好みのデザインのCSSをコピペして、「カスタムHTML」のブロックを追加してHTMLを記述しましょう

STEP

新着記事のコードを入力する（大きなサムネver）

左側の赤丸で囲った➕ボタンを押すと、追加できるブロックが表示されますので、「ショートコード」を選択します。

以下のショートコードを貼り付けてください。

新着記事

new_list type="large_thumb_on" count="4"

※両サイドに[]の括弧を追加してください

カードデザインの変更や表示する数を変更する際は、「type=」「count＝」の後を編集する必要があります。

コードについて詳しく知りたい方は、以下の記事をご覧ください↓

新着記事一覧を表示するショートコードの利用方法

またこのままではカードは縦並びになってしまうので、横並びにするCSSの記述が必要です。

以下のCSSをコピペして貼り付けてください。

CSSを表示する

CSS

/* 新着記事表示 */
.new-entry-cards.large-thumb-on {
  display: flex;
  flex-wrap: wrap;
}

.new-entry-cards.large-thumb-on a {
  width: 47%; /* カードサイズの大きさ */
  margin: 10px auto;
}

.date-tags {
  margin-bottom: 2em;
}

このコードはあくまでも大きなサムネイル（タイトルを重ねる）用です。

タイトルを重ねないタイプの大きなサムネイルを使用したい場合は、「large-thumb-on」の部分の「-on」を消して使用してください。

★スマホのみでの設定

大きなサムネイルを使用して横並びにすると、上記のようにタイトルがほとんど見えなくなってしまいます。

この文字を小さくするために、以下のCSSをコピペしてください。

CSS

@media screen and (max-width: 768px){
.widget-entry-cards.large-thumb-on .card-content {
font-size: 13px;
}
}

紹介するカテゴリーが複数ある場合は、STEP１から同じように作成してください。

カテゴリー内の記事を紹介する

最後は「新着順」と「人気順」と切り替えられるタブを使って記事を紹介していきます。

切り替えタブを使って作成する

まずカテゴリー部分と同様に見出しから設定していきます。

STEP

見出しを設定する

左側の赤丸で囲った➕ボタンを押すと、追加できるブロックが表示されますので、「見出し」を選択します。

デザインは統一したほうが良いので、カテゴリー記事部分で作成した見出しデザインにしましょう。

STEP

CSSをコピペする

追加CSSを開いて、以下のCSSをコピペしてください。

CSSを表示する

CSS

/* 切り替えタブ */
.tab-wrap {
   background: #fffaf7;　/* 背景色 */
   display: flex;
   flex-wrap: wrap;
   overflow: hidden;
   padding: 0 0 20px;
}

.tab-label {
   color: Gray;　/* タブ部分の文字色 */ 
   cursor: pointer;
   flex: 1;
   font-weight: bold;
   order: -1;
   padding: 12px 20px;
   position: relative;
   text-align: center;
   transition: cubic-bezier(0.4, 0, 0.2, 1) .2s;
   user-select: none;
   white-space: nowrap;
   -webkit-tap-highlight-color: transparent;
}

.tab-label:hover {
   background: #feeeed;　/* タブ部分のホバー時背景色 */
}

.tab-switch:checked + .tab-label {
   color: #ed9089;　/* ホバー時の文字色 */
}

.tab-label::after {
   background: #ed9993;　/* タブ部分の下線色 */
   bottom: 0;
   content: '';
   display: block;
   height: 3px;
   left: 0;
   opacity: 0;
   pointer-events: none;
   position: absolute;
   transform: translateX(100%);
   transition: cubic-bezier(0.4, 0, 0.2, 1) .2s 80ms;
   width: 100%;
   z-index: 1;
}

.tab-switch:checked ~ .tab-label::after {
   transform: translateX(-100%);
}

.tab-switch:checked + .tab-label::after {
   opacity: 1;
   transform: translateX(0);
}

.tab-content {
   height:0;
   opacity:0;
   padding: 10px auto;
   pointer-events:none;
   transform: translateX(-30%);
   transition: transform .3s 80ms, opacity .3s 80ms;
   width: 100%;
}

.tab-switch:checked ~ .tab-content {
   transform: translateX(30%);
}

.tab-switch:checked + .tab-label + .tab-content {
   height: auto;
   opacity: 1;
   order: 1;
   pointer-events:auto;
   transform: translateX(0);
}

.tab-wrap::after {
   content: '';
   height: 20px;
   order: -1;
   width: 100%;
}

.tab-switch {
   display: none;
}

ここで紹介したコードは、以下のサイトを参考にさせていただきました。

引用：「CSSだけでスライドするタブ切り替えを考えてみた」

上記のサイトで紹介されている背景色は白になっていましたが、使っている背景色と同色にすることでより自然な形になります。

使用するときは、背景色と同じ色コードに変更してみてください。

STEP

HTMLとショートコードを記述する

まず新しくブロックを追加して「カスタムHTML」を選択し、以下のHTMLをコピペしてください。

HTMLを表示する

HTML

<!--左のタブ.-->
<div class="tab-wrap">
<input id="TAB-01" class="tab-switch" checked="checked" name="TAB" type="radio" />
<label class="tab-label" for="TAB-01">新着順</label>
<div class="tab-content">
<p>[ショートコード]</p>
</div>

<!--右のタブ-->
<input id="TAB-02" class="tab-switch" name="TAB" type="radio" />
<label class="tab-label" for="TAB-02">人気順</label>
<div class="tab-content">
<p>[ショートコード]</p>
</div>
</div>

新着順・人気順に記事を表示するためにショートコードを記述します。

［ショートコード］と記載した場所に、以下のショートコードをコピペしてください。

新着記事

new_list count="10" type="default" cats="XX children="1" post_type="post"

まとめ

以上が「カテゴリーページ」を作る方法です。

どうしても記事が並んでいるだけでは関連記事を探しにくいので、しっかりまとめておくとユーザーも見やすくなります。

クマさん

こんな記事もないかなって探しやすくなるね

キラ

記事が充実していた場合には必要だね

もしカテゴリーないの中に記事が充実しているものがあれば、ぜひ作ってみてください。

こちらのカスタマイズ記事もご覧ください↓

【Cocoon】コピペOK！SWELL風のおしゃれなトップページを作る方法