Twitterはこちら仕事依頼はこちら

【Cocoon】トップページにオシャレなカテゴリ切り替えタブを作る!【デザイン編】

Cocoonトップページにオシャレなタブ切り替えを作る

こんにちは、ぽんひろ(@ponhiroo)です。

今回はCocoonトップページカスタマイズ!デザイン編です!

何をするかというと有料WordPressテーマであるJINやSANGOのようにトップページに切り替えタブを作リます。

近いうちに公式で実装されると思いますが見た目は違うはず…!

ということで完成イメージはこちらです!

仕組みを理解しなくても何とかできるように書きましたがわかりにくかったら申し訳ございません。

今回編集するファイル
  • style.css
  • トップページに設定した固定ページ
スポンサーリンク

Cocoonでオシャレなトップページ作る!カテゴリー切り替えタブの作り方

手順はこの通りです。

手順
  1. 固定ページをトップページにする
  2. タブ切り替えのCSSを追加
  3. サンプルコードを固定ページにコピペ
  4. カスタマイズ方法を元に内容を自分流に変更

固定ページをトップページに変更する

固定ページをトップページに変更する方法については別記事にまとめましたのでやっていない方は下記記事を先にご覧ください。

関連 Cocoonカスタマイズ!SEOに強いオリジナルトップページを作る!【構築編】

【超簡単!】Cocoonトップページをスッキリとサイト型へカスタマイズ!
Cocoonのトップページカスタマイズです。トップページを新着記事やおすすめ記事、カテゴリー別に記事を紹介したい人向けのカスタマイズです。HTMLやCSSがわからなくてもコピペで簡単にできるようになってます。

タブ切り替えのCSSを追加

WordPress管理画面→外観→テーマエディター→style.css」を開きます。

************************************
子テーマ用のスタイルを書く
************************************

の下にコードをコピペしていってください。

カスタマイズ方法はあとで紹介します。

/************************************
** トップページタブ切り替え
************************************/
.tabs {
  width: 100%;
  margin: 0 auto;
}
.tabs .tab {
  font-size: 0.8em;
  font-weight: bold;
  letter-spacing: 2px;
  text-align: center;
  border-right: 1px solid #fefefe;
  border-left: 1px solid #fefefe;
  box-shadow: 0 0 10px rgba(30, 30, 30, .1);
  height: 48px;
  line-height: 48px;
  text-align: center;
  display: block;
  float: left;
  transition: all 0.2s ease;
}
.tabs .tab:first-of-type {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  border-right: 1px solid #efefef;
  border-left: none;
}
.tabs .tab:last-of-type {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border-left: 1px solid #efefef;
  border-right: none;
}
.tab-content {
  display: none;
  clear: both;
  overflow: hidden;
  padding-top: 1em;
}
.tabs .hover:hover {
  opacity: 0.75;
}
@media screen and (max-width: 480px) {
  .tabs .hover:hover {
    opacity: 1;
  }
}
.tabs input[type=radio] {
  display: none;
}
.more-btn {
  text-align: center;
}
/************************************
** ①新着人気タブ切り替え
************************************/
.new-popular-tab {
  background: #fff;
  width: calc(100%/2);
  color: #aaa;
}
#new:checked ~ #new-content, #popular:checked ~ #popular-content {
  display: block;
}
/*選択されているタブ*/
.tabs input:checked + .new-popular-tab {
  background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
  color: #fff;
}
/************************************
** ②カテゴリタブ切り替え
************************************/
.cat-tab {
  background: #fff;
  width: calc(100%/3);
  color: #aaa;
}
#cat1:checked ~ #cat1-content, #cat2:checked ~ #cat2-content, #cat3:checked ~ #cat3-content {
  display: block;
}
/*選択されているタブ*/
.tabs input:checked + .cat-tab {
  background: linear-gradient(90deg, rgba(28, 189, 255, 1) 0%, rgba(55, 219, 255, 1) 51.39%, rgba(70, 205, 255, 1) 100%);
  color: #fff;
}
/************************************
** ③オリジナルタブ切り替え
************************************/
.original-tab {
  background: #fff;
  width: calc(100%/2);
  color: #aaa;
  margin:5px 0;
}
#new-o:checked ~ #new-o-content, #popular-o:checked ~ #popular-o-content, #cat1-o:checked ~ #cat1-o-content, #cat2-o:checked ~ #cat2-o-content {
  display: block;
}
/*選択されているタブ*/
.tabs input:checked + .original-tab {
  background: linear-gradient(90deg, rgba(28, 189, 255, 1) 0%, rgba(55, 219, 255, 1) 51.39%, rgba(70, 205, 255, 1) 100%);
  color: #fff;
}
/************************************
** アニメーション設定
************************************/
.tab-content{
  animation-name:fade-in;
  animation-duration:0.5s; 
  animation-timing-function: ease-out;
  animation-delay:0s;
}
@keyframes fade-in {
  0% {opacity: 0; transform: translate3d(0,20px,0);}
  100% {opacity: 1; transform: translate3d(0,0,0);}
}

ボタンの色とh2見出し(変更したい人だけ)

ボタンの色と見出しデザインをデモページと同じにしたい場合は下記コードコピペ。

.btn {
  opacity: 0.75;
}
.article h2 {
  background: linear-gradient(90deg, rgba(28, 189, 255, 1) 0%, rgba(55, 219, 255, 1) 51.39%, rgba(70, 205, 255, 1) 100%);
  font-size: 1em;
  padding: 18px;
  background-color: #f3f4f5;
  border-radius: 3px;
  letter-spacing: 2px;
  color: #fff;
}

トップページになる固定ページにコードを追加!

Cocoonはこれらを自由に表示できます。

カスタマイズ次第で表示可能
  • 新着記事一覧
  • 人気記事一覧
  • オススメ記事一覧
  • カテゴリー一覧
  • 特定のタグ該当記事一覧

それプラス、今回はタブ切り替えを行なっています。

デモページのコードを固定ページにコピペします。

必要なコードをコピペ!

上記コードで必要なものを固定ページにコピペしてください。ただし、コピペするだけはまだ表示されません。

カテゴリーやリンク先が異なるからです。その箇所だけ変更する必要があります。

時間がないんや!コピペだけさせろや!」という方はこちらまでスキップ

○新着記事と人気記事切り替え(デモページのコード)

<div class="tabs">
  <input id="new" checked="checked" name="new-popular-tab" type="radio"/><label class="new-popular-tab tab hover" for="new">新着</label><input id="popular" name="new-popular-tab" type="radio"/><label class="new-popular-tab tab hover" for="popular">人気</label>
  <div id="new-content" class="tab-content">[new_list count="6" type="default" cats="all" children="0" post_type="post"]
    <div class="more-btn"><a class="btn btn-red btn-m" href="https://ponhiro.com/demo/category/category1/">もっと見る <i class="fa fa-chevron-circle-right" aria-hidden="true"></i></a>
    </div>
  </div>
  <div id="popular-content" class="tab-content">[popular_list days="all" rank="0" pv="0" count="6" type="default" cats="all"]</div>

○カテゴリ切り替え(デモページのコード)

<h2>カテゴリ別新着記事</h2>

<div class="tabs"><input id="cat1" checked="checked" name="cat-tab" type="radio"/><label class="cat-tab tab hover" for="cat1">カテゴリ1</label><input id="cat2" name="cat-tab" type="radio"/><label class="cat-tab tab hover" for="cat2">カテゴリ2</label><input id="cat3" name="cat-tab" type="radio"/><label class="cat-tab tab hover" for="cat3">カテゴリ3</label>
  <div id="cat1-content" class="tab-content">[new_list count="6" type="large_thumb" cats="2" children="1" post_type="post"]
    <div class="more-btn"><a class="btn btn-red btn-m" href="https://ponhiro.com/demo/category/category1/">もっと見る <i class="fa fa-chevron-circle-right" aria-hidden="true"></i></a></div>
  </div>
  <div id="cat2-content" class="tab-content">[new_list count="6" type="large_thumb" cats="3" children="1" post_type="post"]
    <div class="more-btn"><a class="btn btn-red btn-m" href="https://ponhiro.com/demo/category/category2/">もっと見る <i class="fa fa-chevron-circle-right" aria-hidden="true"></i></a></div>
  </div>
  <div id="cat3-content" class="tab-content">[new_list count="6" type="large_thumb" cats="4" children="1" post_type="post"]
    <div class="more-btn"><a class="btn btn-red btn-m" href="https://ponhiro.com/demo/category/category2/">もっと見る <i class="fa fa-chevron-circle-right" aria-hidden="true"></i></a></div>
  </div>
</div>

○ごちゃ混ぜ(デモページのコード)

<h2>ごちゃ混ぜ</h2>
  <div class="tabs"><input id="new-o" checked="checked" name="original-tab" type="radio"/><label class="original-tab tab hover" for="new-o">新着</label><input id="popular-o" name="original-tab" type="radio"/><label class="original-tab tab hover" for="popular-o">人気</label><input id="cat1-o" name="original-tab" type="radio"/><label class="original-tab tab hover" for="cat1-o">カテゴリ1</label><input id="cat2-o" name="original-tab" type="radio"/><label class="original-tab tab hover" for="cat2-o">カテゴリ2</label>
  <div id="new-o-content" class="tab-content">[new_list count="6" type="large_thumb" cats="all" children="0" post_type="post"]
      <div class="more-btn"><a class="btn btn-red btn-m" href="https://ponhiro.com/demo/category/category1/">もっと見る <i class="fa fa-chevron-circle-right" aria-hidden="true"></i></a>
      </div>
    </div>
    <div id="popular-o-content" class="tab-content">[popular_list days="all" rank="0" pv="0" count="6" type="large_thumb" cats="all"]</div>
    <div id="cat1-o-content" class="tab-content">[new_list count="6" type="large_thumb" cats="2" children="1" post_type="post"]
      <div class="more-btn"><a class="btn btn-red btn-m" href="https://ponhiro.com/demo/category/category1/">もっと見る <i class="fa fa-chevron-circle-right" aria-hidden="true"></i></a></div>
    </div>
    <div id="cat2-o-content" class="tab-content">[new_list count="6" type="large_thumb" cats="3" children="1" post_type="post"]
      <div class="more-btn"><a class="btn btn-red btn-m" href="https://ponhiro.com/demo/category/category2/">もっと見る <i class="fa fa-chevron-circle-right" aria-hidden="true"></i></a></div>
    </div>
  </div>

タブ切り替えの仕組み

デモページにある新着記事と人気記事の切り替えのコードを見てみましょう。

<div class="tabs">
  <input id="new" checked="checked" name="new-popular-tab" type="radio"/><label class="new-popular-tab tab hover" for="new">新着</label><input id="popular" name="new-popular-tab" type="radio"/><label class="new-popular-tab tab hover" for="popular">人気</label>
  <div id="new-content" class="tab-content">[new_list count="6" type="default" cats="all" children="0" post_type="post"]
    <div class="more-btn"><a class="btn btn-red btn-m" href="https://ponhiro.com/demo/category/category1/">もっと見る <i class="fa fa-chevron-circle-right" aria-hidden="true"></i></a></div>
  </div>
  <div id="popular-content" class="tab-content">[popular_list days="all" rank="0" pv="0" count="6" type="default" cats="all"]</div>
</div>

それぞれ説明していきます。

まずは2行目を見てみましょう。

<input id="new" checked="checked" name="new-popular-tab" type="radio"/><label class="new-popular-tab tab hover" for="new">新着</label><input id="popular" name="new-popular-tab" type="radio"/><label class="new-popular-tab tab hover" for="popular">人気</label>

ここがタブの部分になります。全体の名前を「new-popular-tab」。それぞれのタブにも「new」「popular」と名前をつけています。

名前は何でもいいのですが紐づけるために名前を付けなければいけません。

日本語で「新着」、「人気」と書いてあるところが画面に表示される文字になります。

続いてこちら。

<div id="new-content" class="tab-content">[new_list count="6" type="default" cats="all" children="0" post_type="post"]

こちらにも名前が振ってあります。

「new-content」という箇所ですね、こちらが新規記事。人気記事の方は「popular-content」と名前が付けられています。

先ほどタブにも名前を付けたと説明しました。「new」「popular」です。

仕組みとしては「new」が選択されたら「new-content」を表示。「popular」が選択されたら「popular-content」が表示されるようになっています。

自由にカスタマイズしたい場合は名前付けは必須なので覚えておきましょう。

変更する場所はショートコード

デモページと同じで良ければ変更する場所はショートコードのみ!

ショートコードとは[ ]で囲まれている箇所です。

Cocoonにはショートコードがたくさんあります。

例えば新着記事と人気記事取得のショートコード。

[new_list count="6" type="default" cats="all" children="0" post_type="post"]

[popular_list days="all" rank="0" pv="0" count="6" type="default" cats="2"]

です。

上の「new_list」と書かれたショートコードは新着記事一覧を表示します。

その右に書いてある「count」や「type」はオプション設定のようなもので簡単に見た目や内容を変更できるようになっています。

それぞれの意味を見てみましょう。

新着記事ショートコードオプション
  • count:表示記事数
  • type:カードタイプ
  • cats:カテゴリー
  • children:子カテゴリを含めるかどうか
  • post_type:投稿ページ、固定ページ表示設定
  • tags:特定のタグで絞る
  • modified:投稿日順か更新日順か
  • order:昇順か降順か
  • sticky:固定表示設定記事を表示するかどうか
  • taxonomy:カスタム投稿のカテゴリー指定

大事なものだけ説明します。

その他はCocoon公式をご覧ください。

count

表示する記事の数を指定できます。

count=”2″と書けば2記事表示され、count=”6″と書けば6記事表示されます。

type

現在、3つ用意されています。

  • default
  • large_thumb
  • large_thumb_on

ショートコードカードタイプ

cats

表示するカテゴリー番号を入れます。

調べた方は簡単で「WordPressの管理画面→投稿→カテゴリー」でカテゴリーを選択します。

URLを見ると番号が載っています。それがカテゴリー番号です。

カテゴリナンバー

cats=2とするとカテゴリー番号が2の記事が表示されます。

cats=allと書けば全カテゴリーが対象。

cats=2,3と書けばカテゴリー番号が2と3の記事が表示されます。

これらを利用すればカテゴリー切り替えが作れます。

tags

特定のタグを含む記事のみを表示させます。

カテゴリーと同じく「WordPressの管理画面→投稿→タグ」からタグ番号を調べます。

tags=2とするとタグ番号が2の記事のみ表示されます。

これを利用すればオススメ記事一覧が作れます。

人気記事のショートコードも同じような感じ

人気記事のショートコードも新着記事とほとんど同じです。

人気記事ショートコードオプション
  • count:表示記事数
  • type:カードタイプ
  • cats:カテゴリー
  • days:データの集計期間
  • rank:ランキング番号を表示するかどうか
  • pv:PV数の表示をするか

days

days=1は1日、days=7は1週間、days=30は1ヶ月の集計になります。

rank

ランキングの順位番号を表示させたい場合はrank=1と入力します。rank=0がOFFになります。

pv

pv数を表示させたい場合はpv=1と入力します。pv=0がOFFになります。

トップページカスタマイズ例を紹介!

なるべく簡単にできるように、いくつかサンプルを用意しました。

必ず変更しなければいけない箇所

必ず変更しなければいけない箇所です。

カテゴリ切り替えを例に見てみます。

変更する箇所はカテゴリー番号ともっと見るボタンのリンク先URLです。

<div class="tabs"><input id="cat1" checked="checked" name="cat-tab" type="radio"/><label class="cat-tab tab hover" for="cat1">カテゴリ1</label><input id="cat2" name="cat-tab" type="radio"/><label class="cat-tab tab hover" for="cat2">カテゴリ2</label><input id="cat3" name="cat-tab" type="radio"/><label class="cat-tab tab hover" for="cat3">カテゴリ3</label>
	<div id="cat1-content" class="tab-content">[new_list count="6" type="large_thumb" cats="2" children="0" post_type="post"]
		<div class="more-btn"><a class="btn btn-red btn-m" href="https://ponhiro.com/demo/category/category1/">もっと見る <i class="fa fa-chevron-circle-right" aria-hidden="true"></i></a></div>
	</div>
	<div id="cat2-content" class="tab-content">[new_list count="6" type="large_thumb" cats="3" children="0" post_type="post"]
		<div class="more-btn"><a class="btn btn-red btn-m" href="https://ponhiro.com/demo/category/category2/">もっと見る <i class="fa fa-chevron-circle-right" aria-hidden="true"></i></a></div>
	</div>
	<div id="cat3-content" class="tab-content">[new_list count="6" type="large_thumb" cats="4" children="0" post_type="post"]
		<div class="more-btn"><a class="btn btn-red btn-m" href="https://ponhiro.com/demo/category/category3/">もっと見る <i class="fa fa-chevron-circle-right" aria-hidden="true"></i></a></div>
	</div>
</div>

new_listにあるcatsの番号をそれぞれ変更します。

上記コードでは2,3,4になってるかと思います。この数字がカテゴリーを判別しています。

カテゴリー番号は「WordPress管理画面→投稿→カテゴリ」のURLから調べられます。

カテゴリナンバー

カテゴリー全てを対象にしたい場合はall、複数のカテゴリを対象にしたい場合はcat=1,2のように書きます。

これで切り替えができるようになってるはずなので「カテゴリ1、カテゴリ2、カテゴリ3」の名称も変更してください。

最後にもっと見るボタンのリンク先URLを変更します。

<div class="tabs"><input id="cat1" checked="checked" name="cat-tab" type="radio"/><label class="cat-tab tab hover" for="cat1">カテゴリ1</label><input id="cat2" name="cat-tab" type="radio"/><label class="cat-tab tab hover" for="cat2">カテゴリ2</label><input id="cat3" name="cat-tab" type="radio"/><label class="cat-tab tab hover" for="cat3">カテゴリ3</label>
	<div id="cat1-content" class="tab-content">[new_list count="6" type="large_thumb" cats="2" children="0" post_type="post"]
		<div class="more-btn"><a class="btn btn-red btn-m" href="https://ponhiro.com/demo/category/category1/">もっと見る <i class="fa fa-chevron-circle-right" aria-hidden="true"></i></a></div>
	</div>
	<div id="cat2-content" class="tab-content">[new_list count="6" type="large_thumb" cats="3" children="0" post_type="post"]
		<div class="more-btn"><a class="btn btn-red btn-m" href="https://ponhiro.com/demo/category/category2/">もっと見る <i class="fa fa-chevron-circle-right" aria-hidden="true"></i></a></div>
	</div>
	<div id="cat3-content" class="tab-content">[new_list count="6" type="large_thumb" cats="4" children="0" post_type="post"]
		<div class="more-btn"><a class="btn btn-red btn-m" href="https://ponhiro.com/demo/category/category3/">もっと見る <i class="fa fa-chevron-circle-right" aria-hidden="true"></i></a></div>
	</div>
</div>

href=に書いてあるURLを好きなリンク先に変更してください。

上記コードでいう「https://ponhiro.com/demo/category/category1/」を自身のサイトのリンク先に変えてください。

「もっと見る」が必要ない場合は1行まるまる削除してください。

色を変える方法

色を変える場合はCSSを変更します。

タブの色を変更する方法です。

background-imageがタブの背景色になります。

/************************************
** ①新着人気タブ切り替え
************************************/
.new-popular-tab {
	background: #fff;
	width: calc(100%/2);
	color: #aaa;
}
#new:checked ~ #new-content, #popular:checked ~ #popular-content {
	display: block;
}
/*選択されているタブ*/
.tabs input:checked + .new-popular-tab {
	background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
	color: #fff;
}
/************************************
** ②カテゴリタブ切り替え
************************************/
.cat-tab {
	background: #fff;
	width: calc(100%/3);
	color: #aaa;
}
#cat1:checked ~ #cat1-content, #cat2:checked ~ #cat2-content, #cat3:checked ~ #cat3-content {
	display: block;
}
/*選択されているタブ*/
.tabs input:checked + .cat-tab {
	background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
	color: #fff;
}

グラデーションのCSSはこちらのサイトが参考になります。
参考 Webgradients

グラデーションではなくベタ塗りにしたい場合は

background: カラーコード;

カラーコードを入力し、background-imageの代わりに入れればOKです!

文字色を変えたい場合はcolorのカラーコードを変更してください。

カードタイプや表示記事数を変更する

カードタイプ(記事一覧のデザイン)の変更方法や表示記事数の変更方法です。

先ほど説明した通りカードタイプは3つ用意されています。

ショートコードの

[new_list count="6" type="default" cats="all" children="0" post_type="post"]

にあるtypeの内容を変更します。

ショートコードカードタイプ

表示記事数はcountの数値を変更してください。

タブを増やす減らす

タブの数を増やしたり、減らしたりするためにはHTMLとCSSどちらも変更する必要があります。

○増やす場合

例としてカテゴリーを4つにしてみましょう。
コードはこちらです。

<div class="tabs"><input id="cat1" checked="checked" name="cat-tab" type="radio"/><label class="cat-tab tab hover" for="cat1">カテゴリ1</label><input id="cat2" name="cat-tab" type="radio"/><label class="cat-tab tab hover" for="cat2">カテゴリ2</label><input id="cat3" name="cat-tab" type="radio"/><label class="cat-tab tab hover" for="cat3">カテゴリ3</label><input id="cat4" name="cat-tab" type="radio"/><label class="cat-tab tab hover" for="cat4">カテゴリ4</label>
	<div id="cat1-content" class="tab-content">[new_list count="6" type="large_thumb" cats="2" children="1" post_type="post"]
		<div class="more-btn"><a class="btn btn-red btn-m" href="https://ponhiro.com/demo/category/category1/">もっと見る <i class="fa fa-chevron-circle-right" aria-hidden="true"></i></a></div>
	</div>
	<div id="cat2-content" class="tab-content">[new_list count="6" type="large_thumb" cats="3" children="1" post_type="post"]
		<div class="more-btn"><a class="btn btn-red btn-m" href="https://ponhiro.com/demo/category/category2/">もっと見る <i class="fa fa-chevron-circle-right" aria-hidden="true"></i></a></div>
	</div>
	<div id="cat3-content" class="tab-content">[new_list count="6" type="large_thumb" cats="4" children="1" post_type="post"]
		<div class="more-btn"><a class="btn btn-red btn-m" href="https://ponhiro.com/demo/category/category3/">もっと見る <i class="fa fa-chevron-circle-right" aria-hidden="true"></i></a></div>
	</div>
	<div id="cat4-content" class="tab-content">[new_list count="6" type="large_thumb" cats="5" children="1" post_type="post"]
		<div class="more-btn"><a class="btn btn-red btn-m" href="https://ponhiro.com/demo/category/category4/">もっと見る <i class="fa fa-chevron-circle-right" aria-hidden="true"></i></a></div>
	</div>
</div>

cat4のタブとcat4-contentを追加しました。

次にCSSを編集します。

.cat-tab {
	background: #fff;
	width: calc(100%/4);
	color: #aaa;
}
#cat1:checked ~ #cat1-content, #cat2:checked ~ #cat2-content, #cat3:checked ~ #cat3-content, #cat4:checked ~ #cat4-content {
	display: block;
}
/*選択されているタブ*/
.tabs input:checked + .cat-tab {
	background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
	color: #fff;
}

widthはタブの横幅で100をMAXとして4分割しています。これは自由に設定してください。

あとはタブ切り替えのCSSを変更しています。

○減らす場合

例としてカテゴリーを2つにしてみましょう。
コードはこちらです。

<div class="tabs"><input id="cat1" checked="checked" name="cat-tab" type="radio"/><label class="cat-tab tab hover" for="cat1">カテゴリ1</label><input id="cat2" name="cat-tab" type="radio"/><label class="cat-tab tab hover" for="cat2">カテゴリ2</label>
	<div id="cat1-content" class="tab-content">[new_list count="6" type="large_thumb" cats="2" children="1" post_type="post"]
		<div class="more-btn"><a class="btn btn-red btn-m" href="https://ponhiro.com/demo/category/category1/">もっと見る <i class="fa fa-chevron-circle-right" aria-hidden="true"></i></a></div>
	</div>
	<div id="cat2-content" class="tab-content">[new_list count="6" type="large_thumb" cats="3" children="1" post_type="post"]
		<div class="more-btn"><a class="btn btn-red btn-m" href="https://ponhiro.com/demo/category/category2/">もっと見る <i class="fa fa-chevron-circle-right" aria-hidden="true"></i></a></div>
	</div>
</div>

CSSはこちらです。

.cat-tab {
	background: #fff;
	width: calc(100%/2);
	color: #aaa;
}
#cat1:checked ~ #cat1-content, #cat2:checked ~ #cat2-content {
	display: block;
}
/*選択されているタブ*/
.tabs input:checked + .cat-tab {
	background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
	color: #fff;
}

タブの横幅を100/2=50%の大きさにしています。

あとはタブ切り替えのCSSを変更しています。

人気記事ではなくオススメ記事一覧を表示する

オススメ記事一覧取得のショートコードはないのでタグを利用しましょう。

まず、表示させたい記事にタグ「オススメ」を付けましょう。

あとはショートコードを変更するだけです。

カテゴリー番号と同様に「WordPress管理画面→投稿→タグ」から「オススメ」を開き、URLにある番号を調べます。

例えば番号が5だった場合

[new_list count="6" type="large_thumb" cats="all" children="1" post_type="post" tags="5"]

とtag=○○を入れれば、そのタグが入ってる記事のみ取得できます。

わからない場合はお手数ですがご連絡ください

説明が難しく、わかりにくくなってしまって申し訳ございません。

ここがわかりにくかった、上手く表示されないなどあればコメント欄、問い合わせフォーム、ツイッターからご連絡いただけると助かります。

Cocoonカスタマイズ他にもやってます!

他にもいろいろCocoonカスタマイズをやってますので良かったらご覧ください!

あわせて読む Cocoonカスタマイズをまとめ!おしゃれなものや機能性をあげるものなど!

【30通り以上!】Cocoonカスタマイズ!コピペで簡単!
Cocoonのカスタマイズまとめです。おしゃれなものから機能性をあげるものまで紹介します。プロフィール、タブ切り替え、トップページ、リスト、ボックス、スマホのメニュー固定方法なども紹介していきます。

コメント

  1. こんにちは。ぽんひろさんのcocoonスキン、カスタマイズ指南ともに参考にしております。

    こちらのページを見て、サイドバーに1日、1週間、1か月と切り替えられるランキングを設置しようと思いました。

    cssはコピペして、ウィジェットのコメントに

    1日

    1週間

    1か月

    [popular_list day=1 count=3  type=large_thumb_on]

    [popular_list days=7 count=3  type=large_thumb_on]

    [popular_list days=30 count=3  type=large_thumb_on]

    と挿入したのですが、うまく表示されませんでした(1日目だけは表示されます)

    どのよう修正すればいいのでしょうか?

    • あ、html入力が反映されないようになっていますね汗

      日別ランキングはいくらか需要があると思いますので、そちらの例も追加してくれればうれしいです。

      • >USI さん

        コメントありがとうございます。
        日別ランキング、確かにいいですね!

        時間あるときにやり方を書こうと思います。

        • ありがとうございます!

          他のカスタマイズやアイキャッチの作り方なども参考にさせていただいているので、ぽんひろさんのようなブログ作りサイトは大変ありがたいです。

          ぜひお時間のあるときにでも待っております!

  2. ぽんひろさん、こんにちわ。

    この記事を参考にトップページを作らせていただいたのですが、オススメ記事の例が”tags”ではなく”tag”になっていました。

    • >ぷちろぐさん

      コメントありがとうございます!
      気づきませんでした!修正しておきます!ありがとうございます。

  3. ぽんひろさんこんにちはいつもcocoonのカスタマイズ参考にさせていただいております。

    今回もさっそく固定ページのサイト型を作成したのですが、同じように作ったつもりなのに、ぽんひろさんのように2列に記事のカードが表示されません。
    例えば、新着、人気記事のタブをすると、どちらも左側に6個、右側には何も表示されないという感じです。
    ぽんひらさんのように2列に表示するには何かコードがあるのでしょうか・・・?
    cocoon設定のインデックスを2列にしてもトップページの記事が2列になるだけでした・・・。
    サムネイルはtypeはlarge_thumbまたはlarge_thumb_onです

    • 追記で失礼します!

      .page .new-entry-cards {
      display: flex;
      flex-wrap: wrap;
      }

      .page .new-entry-card-link {
      width: 50%;
      }
      これを入力して
      無事に解決できました!お騒がせしましたm(__)m

      • >ともひろさん

        コメントありがとうございます。
        わかりにくくてすみません…!

        解決されたようで良かったです。

ページトップへ