【CSS】記事内にタブ切り替え機能を挿入する方法

特定の記事内においてタブで内容を切り替えたいと思い、実際に行ってみた結果になります。

この記事の対象

行ったこと

おすすめ書籍

人気記事

【基本情報】基数変換-16進数(小数点)→10進数の分数-

2021.06.232023.04.16

【Python応用】Tkinterでアプリ作成-Windowの固定、拡大、縮小の有効・無効化方法-

2023.07.012024.03.05

【Python応用】Tkinterでアプリ作成-ScrolledTextの使用例まとめ-

2022.04.102024.02.12

【Python応用】BeautifulSoupで複数要素をid属性で探索する方法

2020.11.142024.02.25

【Python応用】Tkinterでアプリ作成-Listbox使用例まとめ-

2023.10.04

上記のようなタブ切り替えを記事内に挿入をしました。

以下は手順になります。前提条件として「Cocoon」でのやり方になります。また、コードはこちらを参考にさせて頂いています。

挿入したい場所でHTMLを入力

記事内の挿入したい箇所で「カスタム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="content-set">Test
　　</div>
    <input id="TAB-02" type="radio" name="TAB" class="tab-switch" /><label class="tab-label" for="TAB-02">人気記事</label>
    <div class="tab-content">Test2
    </div>
</div>

CSSを子テーマ（Cocoon-child）のstyle.cssに貼り付ける

「外観」→「テーマファイルエディター」→「Cocoon Child」→「style.css」に以下を追加します。

/************************************
** タブ切り替え 
************************************/
.tab-wrap {
	background: #F9FFFF;
	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);
}

.tab-switch:checked + .tab-label {
	color: #545454;
}

.tab-label::after {
	background: #545454;
	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;
}

/*1---画像を挿入した場合 */
.content-set {
  height:0;
  opacity:0;
  padding: 0 10px;
  pointer-events:none;
  transform: translateX(-30%);
  transition: transform .3s 80ms, opacity .3s 80ms;
  width: 100%; /* widthを変更 */
  display: flex; /* flexboxを利用 */
  flex-wrap: wrap; /* 画像が折り返されるようにする */
  justify-content: space-between; /* 等間隔に表示する */
}

/*2---画像の調整 */
.content-set >img {
  width: calc(33.33% - 2.66%); /* 画像を等間隔に並列に表示する */
  margin-bottom: 20px; /* 画像の下に余白を設定 */
  box-sizing: border-box; /* borderやpaddingが幅に含まれるようにする */
}

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

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

以下は解説になります。特に、個人的に苦戦したところの解説になります。

/*1---画像を挿入した場合 */
.content-set {
  height:0;
  opacity:0;
  padding: 0 10px;
  pointer-events:none;
  transform: translateX(-30%);
  transition: transform .3s 80ms, opacity .3s 80ms;
  width: 100%; /* widthを変更 */
  display: flex; /* flexboxを利用 */
  flex-wrap: wrap; /* 画像が折り返されるようにする */
  justify-content: space-between; /* 等間隔に表示する */
}

各プロパティの説明は以下になります。

/*2---画像の調整 */
.content-set >img {
  width: calc(33.33% - 2.66%); /* 等間隔に並列に表示する */
  margin-bottom: 20px; /* 画像の下に余白を設定 */
  box-sizing: border-box; /* borderやpaddingが幅に含まれるようにする */
}

画像が複数ある場合は、等間隔にする必要があったので、上記のような形にしました。