追加CSS
/* — 全体の枠 — */ .clickable-peek-wrapper { margin-bottom: 2em; border: 2px solid #ffb3c1; border-radius: 8px; background-color: #fff0f5; /* 薄いピンク背景 */ overflow: hidden; position: relative; } /* — チェックボックスを隠す — */ .peek-checkbox { display: none; } /* — ラベル（クリックできるエリア全体） — */ .peek-label { display: block; cursor: pointer; /* マウスを乗せると指マークに */ position: relative; margin-bottom: 0; /* テーマによってはラベルの下に余白が入るためリセット */ } /* — 見出し — */ .peek-heading { padding: 15px; background-color: #ffe6ea; color: #d6336c; /* 濃いピンク */ font-weight: bold; text-align: center; /* 中央揃え */ } /* — 中身（閉じた状態） — */ .peek-content { padding: 15px 20px 40px; /* 下に余白を持たせる */ color: #c2185b; /* 文字色 */ /* ★チラ見せの高さ設定 */ max-height: 120px; /* 元の300pxだと広すぎる場合はここを調整してください */ overflow: hidden; transition: max-height 0.5s ease; /* アニメーション */ } /* — 中身（開いた状態） — */ .peek-checkbox:checked + .peek-label .peek-content { max-height: 2000px; /* 十分な高さを確保 */ padding-bottom: 20px; } /* — ぼかしレイヤー（閉じた時） — */ .peek-fade-layer { position: absolute; bottom: 0; left: 0; width: 100%; height: 80px; /* ピンク色のグラデーションでぼかす */ background: linear-gradient(to bottom, rgba(255,240,245,0), #fff0f5 80%); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 10px; pointer-events: none; /* クリックを通過させる */ } /* 「続きを見る」の文字装飾 */ .more-text { background-color: #d6336c; color: #fff; font-size: 0.8em; padding: 5px 15px; border-radius: 20px; font-weight: bold; } /* — 開いた時はぼかしレイヤーを隠す — */ .peek-checkbox:checked + .peek-label .peek-fade-layer { display: none; }「ちら見せ」部分の広さを変える方法
/* — 中身（閉じた状態） — / .peek-content { padding: 15px 20px 40px; / 下に余白を持たせる / color: #c2185b; / 文字色 */
/* ★チラ見せの高さ設定 / max-height: 120px; / 元の300pxだと広すぎる場合はここを調整してください / overflow: hidden; transition: max-height 0.5s ease; / アニメーション */
}
上記の【max-height: 120px; 】の数字を変える。
文章を変える（HTMLでも可能）
<!– 中身 –>
<div class=”peek-content”>
<p>【チラ見せエリア】</p>
<p>この文章や、下の薄くなっている部分をクリックするとパカッと開きます。</p>
<p>わざわざボタンを探さなくても、読みたいと思ったらその場をクリックすればOKです。</p>
<p>——————</p>
<p>【ここから先は隠れているエリア】</p>
<p>開くと最後まで表示されます。</p>
<p>もう一度エリア内のどこかをクリックすると閉じます。</p>
</div>
上記の<p>文章</p>を書き換える。