その他

cocoon「タグ」を使ったタブ切り替え ２行でスマホに表示されるように頑張りました！




トップページをサイト型と呼ばれるものにしたい！

そう思って調べてみると、cocoon設定から簡単にできることが判明！！感動です。

cocoonさん本当にありがとう。いざやってみると…

タブ切り替えで使えるのは「カテゴリー」だけ。
「タグ」を利用することができないみたい…。

どうしても「カテゴリ」と「タグ」の両方を使いたかったので、泣く泣く別の方法を考えることにしました。

作りたいタブ切り替えの条件

・４つのタブを作りたい。
・モバイルからはタブは２行２列で表示
・PCからはタブは１行４列で表示


htmlやcssは全く知識ない私でも、なんとかなった？ので、こんなものでよければ参考にしてみてください。

完成した形

４つのタブ切り替え（スマホから見た場合）

スマホから見たときは、４つのタブが２段になるように頑張りました。
（端末の画面サイズによっては、上手くいかない場合もあります(笑)。）

４つのタブ切り替え（PCから見た場合）

PCで見るときは、４つのタブが１行になるようにしました。
（ただしこちらもPC画面サイズによって上手く表示されないこともあります(笑)。）




新着記事と人気記事

一応、新着記事と人気記事をタブで切り替えるやつも作りました。




作成手順

① 固定ページを新規作成



② カスタムHTMLにコードをコピペ

ブロックの中に「カスタムHTML」があります。



その中に、下記のコードを貼り付けてください。

<div class="tab-wrap2">
    <input id="TAB-03" type="radio" name="TABB" class="tab-switch2" checked="checked"><label class="tab-label2" for="TAB-03">インテリアに馴染む<br>猫アイテム</label>
    <div class="tab-content2">[new_list count="4" type="default" tags="65" children="1" post_type="post"　random="1"]
    </div>
    <input id="TAB-04" type="radio" name="TABB" class="tab-switch2"><label class="tab-label2" for="TAB-04"><br>かんたん猫DIY</label>
    <div class="tab-content2">[new_list count="4" type="default" cats="26" children="1" post_type="post" random="1"]
    </div>
    <input id="TAB-05" type="radio" name="TABB" class="tab-switch2"><label class="tab-label2" for="TAB-05"> <br>オススメの猫用品 </label>
    <div class="tab-content2">[new_list count="4" type="default" tags="74" children="1" post_type="post" random="1"]
    </div>
    <input id="TAB-06" type="radio" name="TABB" class="tab-switch2"><label class="tab-label2" for="TAB-06"><br>生活雑貨と家具家電</label>
    <div class="tab-content2">[new_list count="4" type="default" cats="8" children="1" post_type="post" random="1"]
    </div>
</div>

count,type,childrenなどはお好みで設定してください。
私も最初は何も知識がなかったので、ものぐささんの記事で勉強させて頂きました。


cats（tags）の値は表示したいカテゴリ（タグ）の値を入力してください。
カテゴリの値の調べ方などは、まちゃりささんの記事で勉強させて頂きました。


③ cssを貼り付ける

貼り付ける場所は、外観からテーマエディタの「Cocoon Child」で良いと思います。

/************** カテゴリタブ切り替え**************/
/* タブ切り替え４つ  開始 */
.tab-wrap2 {
	display: flex;
	flex-wrap: wrap;
	overflow: hidden;
	padding: 0 0 20px;
}

.tab-label2 {
	color: Gray;
	cursor: pointer;
	flex: 1;
	font-weight: bold;
	order: -1;
	padding-bottom: 1.5%;
	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;
	border-bottom: 3px solid #ddd;
}

@media screen and (max-width: 500px){
	.tab-label2 {
		color: Gray;
		cursor: pointer;
		flex: 1;
		font-weight: bold;
		font-size: 0.8em;
		order: -1;
		padding: 12px 24px;
		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;
		border-bottom: 3px solid #ddd;
	}
}

@media screen and (max-width: 350px){
	.tab-label2 {
		color: Gray;
		cursor: pointer;
		flex: 1;
		font-weight: bold;
		font-size: 0.5em;
		order: -1;
		padding: 12px 24px;
		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;
		border-bottom: 3px solid #ddd;
	}
}



.tab-label2:hover {
	background: rgba(100, 100, 100,.1);
}

/*要素がチェックされたりONの状態のとき */
.tab-switch2:checked + .tab-label2 { 
	color: #333333;
}

.tab-label2::after {
	background: #800000;
	bottom: -3px;
	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;
	*/
	transform: scale(1);
	transition-duration : 0.4s;
	width: 100%;
	z-index: 1;
}

.tab-switch2:checked ~ .tab-label2::after {
	/*transform: translateX(-100%);*/
	transform: scale(1);
}

.tab-switch2:checked + .tab-label2::after {
	opacity: 1;
	/*transform: translateX(0);*/
	transform: scale(1);
}

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

.tab-switch2:checked ~ .tab-content2 {
	transform: translateX(30%);
}

.tab-switch2:checked + .tab-label2 + .tab-content2 {
	height: auto;
	opacity: 1;
	order: 1;
	pointer-events:auto;
	transform: translateX(0);
}

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

.tab-switch2 {
	display: none;
}
/* タブ切り替え カテゴリ４つ 終了 */

tab-label2では、デバイスの画面のサイズによって、タブの文字の大きさを指定しています
　デバイスの横幅が500px以下（26行～43行）の場合は、font-size: 0.8em;
　デバイスの横幅が350px以下（45行～62行）の場合は、font-size: 0.5em;

プレビューで何度も何度も繰り返し見て、だいたいの端末サイズで見たときに、思い通りになっていることを確認しました。

後は、タブに表示する文字数を１０文字前後に揃えています。

文字の大きさで各タブの横幅が決まっていることに気づいたので、こんな感じで「だいたい」でやっています。多くのiPhoneやスマホが350px～500pxのようで、その幅のデバイスだと、たぶん２行２列に表示されてるかなと思います。


何名かの方のブログを参考にさせていただきましたが、忘れてしまいました。
（参考にさせていただいた皆様、ありがとうございました。



④ タイトルや更新日時を非表示する

下記のcssも貼り付けることをオススメします。

/*固定ページ（トップページカスタマイズ）*/
/*フロント固定ページのタイトルを非表示*/ .home.page .entry-title{ display: none; } 
/*フロント固定ページのシェアボタンを非表示*/ .home.page .sns-share{ display: none; } 
/*フロント固定ページのフォローボタンを非表示*/ .home.page .sns-follow{ display: none; } 
/*フロント固定ページの投稿日を非表示*/ .home.page .post-date{ display: none; } 
/*フロント固定ページの更新日を非表示*/ .home.page .post-update{ display: none; } 
/*フロント固定ページの投稿者名を非表示*/ .home.page .author-info{ display: none; }

トップページっぽくするために上記のcssは使った方が良いと思います。

これについても、まちゃりささんの記事から教えて頂きました。
（ありがとうございました。お世話になりました。）


⑤ 新着記事と人気記事のタブ切り替え

こちらも同じようにhtmlを固定ページの中に、cssをテーマエディタの「Cocoon Child」 にそれぞれ書き込む感じです。

まず固定ページのカスタムhtmlの中には下記のコードを記入してください。

<div class="tab-wrap">
    <input id="TAB-01" type="radio" name="TAB" class="tab-switch" checked="checked"><label class="tab-label" for="TAB-01">新着記事</label>
    <div class="tab-content">[new_list count=5 type=2 arrow=1]
    </div>
    <input id="TAB-02" type="radio" name="TAB" class="tab-switch"><label class="tab-label" for="TAB-02">人気記事</label>
    <div class="tab-content">[popular_list days="all"rank="0" pv="0" count="5" type="2" arrow=1 cats="4,50,45,26,27,46,52,30,48"]
    </div>
</div>

次に、テーマエディタの「Cocoon Child」に下記のcssを記入してください。 

/* タブ切り替え 新着記事-人気記事 開始 */
.tab-wrap {
	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 24px;
	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;
	border-bottom: 3px solid #ddd;
}

.tab-label:hover {
	background: rgba(100, 100, 100,.1);
}

/*要素がチェックされたりONの状態のとき */
.tab-switch:checked + .tab-label { 
	color: #333333;
}

.tab-label::after {
	background: #800000;
	bottom: -3px;
	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: 0 10px;
	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;
}
/* タブ切り替え 新着記事-人気記事 終了 */

さいごに

色々なサイトで勉強させていただき、試行錯誤した結果です。

こんなものでも誰かの役に立つ情報であれば嬉しいですが、使っていただいて上手くいく保証はありません(笑)。

もし同じような状況で悩んでいらっしゃる方に少しでもヒントになればと思って書いた次第です。

コードもきっと無駄な部分や好ましくない部分も沢山あると思います。もしかしたら、うまく動かないかもしれません。

そのことをご理解頂いたうえで、活用してもらえれば幸いです。


あるいは、私が実現したかったことを、もっと単純にできるなど、良い情報をお持ちの方がいらっしゃいましたら、ぜひ教えて頂ければ嬉しいです。

コメント