SWELL│アコーディオンブロックをボタン表示にする方法

2023.09.052024.09.05

SWELLのアコーディオンブロックの見た目を変えたいと思ったことはないでしょうか？

もっとボタン風にすると、よりユーザーに視認され、クリックされるのではないでしょうか？

ということでCSSだけでボタン風にアコーディオンブロックをカスタマイズしてみました。

サンプル

開いて確認する

こんな感じで、SWELLのアコーディオンブロックの見た目だけボタンにします。

SWELLのアコーディオンブロックをボタン表示にする方法

やり方は簡単です。

CSSを追加してあげるだけです。

CSS

下記のCSSを挿入します。

.swell-block-accordion__title {
    /* ボックスモデル */
    width: 256px; /*　ボタンの幅はお好みで */
    padding: 0.7em 1em;
    margin: 2em auto;

    /* レイアウトと配置 */
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;

    /* テキストとフォント */
    font-weight: bold;
    font-size: 1em;
    text-align: center;

    /* 見た目 */
    background: var(--color_main);
    border-radius: 44px;
    box-shadow: 4px 4px 4px 0 rgba(0, 0, 0, 0.25);
}

/* ボタンの文字位置 */
.swell-block-accordion__title .swell-block-accordion__label {
    position: relative;
    right: -16px;
}

/* 展開した時の表示範囲の調整 */
.swell-block-accordion__body {
    padding: 1em 0;
}

以上です。

あとはSWELLのアコーディオンブロックを追加して確認してみましょう。