特定の記事内においてタブで内容を切り替えたいと思い、実際に行ってみた結果になります。
この記事の対象
行ったこと
上記のようなタブ切り替えを記事内に挿入をしました。
以下は手順になります。前提条件として「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; /* 等間隔に表示する */
}
各プロパティの説明は以下になります。
項目 | 内容 |
height: 0; | 要素の高さを0に設定します。 |
opacity: 0; | 要素を透明に設定します。 |
padding: 0 10px; | 上下の余白を0、左右の余白を10pxに設定します。 |
pointer-events:none; | 要素へのポインターイベントを無効にします。 |
transform: translateX(-30%); | X軸方向に-30%移動します。 |
transition: transform .3s 80ms, opacity .3s 80ms; | 変化があった場合、変化をアニメーション化するために、transformとopacityプロパティに対してアニメーションを設定します。 |
width: 100%; | 要素の幅を100%に設定します。 |
display: flex; | 画面サイズに応じてレスポンシブに表示されるようになります。 |
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が幅に含まれるようにする */
}
画像が複数ある場合は、等間隔にする必要があったので、上記のような形にしました。