折り畳みギャラリー表示 2025 12/19 お知らせ 2025年12月19日 サンプル 作成するための要素 ブロック要素 Copy to Clipboard CSS Copy to Clipboard /* ▼ もっと見る付き お客様の声(ギャラリー / リッチカラム共通) */ /* ラッパー */ .voiceMoreWrap { max-width: 100%; } /* チェックボックスは非表示 */ .voiceToggle { display: none; } /* ▼ まずは「7個目以降」を非表示にする ▼ */ /* ギャラリーブロックを使う場合 */ .voiceMoreWrap .wp-block-gallery .wp-block-image:nth-child(n+7) { display: none; } /* SWELLリッチカラムを使う場合 */ .voiceMoreWrap .swell-block-columns__inner .swell-block-column:nth-child(n+7) { display: none; } /* ▼ チェックが入ったときに全部表示する ▼ */ /* ギャラリー版:7個目以降も表示 */ .voiceToggle:checked ~ .wp-block-gallery .wp-block-image { display: block; } /* リッチカラム版:7個目以降も表示 */ .voiceToggle:checked ~ .swell-block-columns .swell-block-columns__inner .swell-block-column { display: block; } /* ▼ ボタン(ラベル) ▼ */ /* ボタンを中央寄せにする(ボタン自体は全幅にしない) */ .voiceMoreWrap { text-align: center; } /* ボタン本体 */ .voiceMoreBtn { display: inline-block; /* 小さめのボタンにする */ margin: 1.5rem auto 0; padding: 0.6rem 1.6rem; /* ボタンの大きさ調整 */ border-radius: 0px; /* 角丸 5px */ border: 1px solid #209bd4; /* ←サイトのキーカラーに変更 */ background: #209bd4; /* ←同じくキーカラー */ color: #fff; font-size: 0.9rem; text-align: center; cursor: pointer; line-height: 1.4; } /* ボタンの文字(もっと見る / 閉じる)は今までどおり */ .voiceMoreBtn::before { content: “もっと見る”; } .voiceToggle:checked ~ .voiceMoreBtn::before { content: “閉じる”; } /* ホバー時のちょっとしたアクセント(PC用) */ @media (hover: hover) { .voiceMoreBtn:hover { background: #fff; color: #209bd4; /* ←ここもキーカラーに合わせる */ } } Javascript なし 備考等 ギャラリーかリッチカラムで画像を入れたセクションを、HTMLタグで囲み、CSSを当てています。 色はカラーコードで直に当てているので、サイトカラーに合わせて変更してください。 お知らせ