SWELLのアコーディオンを、中央に置いた丸いボタン風の見た目にするCSSです。
指定したブロックだけに適用し、開閉はSWELL標準のdetails・summaryをそのまま使います。
リンク先へ移動するボタンではありません。
動く見本：クリック・Enter・Spaceで開閉する
装飾クラスを付けていない見本
この見出しはSWELL標準の表示です。
長いラベルの見本は複数行に折り返します。
中に置いたアコーディオンと、装飾クラスを付けていない見本は標準の見た目で独立して開閉します。
見本の「開いて確認する」をクリックしてください。
キーボードではTabで選択し、EnterまたはSpaceで開閉します。
アイコンと本文の表示が切り替わることを確認できます。
390px幅の見本では長いラベルが3行に折り返し、内側の標準アコーディオンをEnterで開き、Spaceで閉じても外側は開いたままです。
装飾クラスを付けていない見本にも同じボタン装飾は付きません。
対象のアコーディオンにクラスを付ける
ブロックエディターでアコーディオン全体を選択し、ブロック設定の「高度な設定」にある「追加CSSクラス」に waza-accordion-button と入力します。
先頭のドットは不要です。
内側の項目や段落ではなく、外側のアコーディオンブロックに設定してください。
旧版の .swell-block-accordion__title などから始まるCSSを使っている場合は、変更前のCSSをバックアップしてから、旧版の該当CSSを取り除いてください。
旧版を残すと、クラスを付けていない別のアコーディオンにも装飾が残ります。
ボタン風にするCSS
追加CSS、または子テーマのstyle.cssへ次のCSSを貼り付けます。
HTMLやPHPの変更、JavaScriptの追加は不要です。
.waza-accordion-button > .swell-block-accordion__item > .swell-block-accordion__title {
box-sizing: border-box;
width: min(100%, 20rem);
padding: .8em 1em;
margin: 1.5em auto;
display: flex;
align-items: center;
gap: .75em;
color: #fff;
background: #155b75;
border-radius: 2em;
box-shadow: 0 3px 6px #0003;
}
.waza-accordion-button > .swell-block-accordion__item > .swell-block-accordion__title > .swell-block-accordion__label {
position: static;
flex: 1;
min-width: 0;
text-align: center;
overflow-wrap: anywhere;
}
.waza-accordion-button > .swell-block-accordion__item > .swell-block-accordion__title:focus-visible {
outline: 3px solid #155b75;
outline-offset: 4px;
}
.waza-accordion-button > .swell-block-accordion__item > .swell-block-accordion__title > .swell-block-accordion__icon {
flex-shrink: 0;
}幅は最大20rem、狭い場所では親要素の100%までに制限します。
長いラベルは折り返し、アイコンは縮めません。
背景色と文字色を変える場合は、文字が読みやすい組み合わせを選んでください。
適用範囲・確認方法・戻し方
このCSSはSWELLのアコーディオンブロック用です。
WordPress標準の詳細ブロックには適用しません。
外側に指定クラスがあり、直下にある項目の見出しだけを対象にするため、本文内に入れた別のアコーディオンまで同じ装飾にはしません。
保存後は公開ページで、PCとスマホ幅の開閉、長いラベルの折り返し、Tabで選択したときの枠線、クラスを付けていないブロックへの影響を確認します。
キャッシュが残る場合は削除して読み直してください。
元に戻すには、追加CSSクラスと今回のCSSを削除します。
アコーディオン本文や開閉機能はそのまま残ります。
「もっと見る」というラベルでも、記事を追加取得する機能にはなりません。
中身は最初からページにあります。
追加読み込みが目的なら、目的別のSWELLカスタマイズ一覧から適した実装を選んでください。
旧GitHub例とは同期していないため、この本文のCSSを使用してください。
