折り畳みギャラリー表示

2025年12月19日

サンプル

作成するための要素

ブロック要素

CSS

/* ▼ もっと見る付き お客様の声（ギャラリー / リッチカラム共通） */

/* ラッパー */
.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を当てています。

色はカラーコードで直に当てているので、サイトカラーに合わせて変更してください。