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

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

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

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

サンプル

開いて確認する

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

目次

著者

WEB制作をしながらカナダ留学をしているデジタルノマド
技術的なことが好きでWordPressのカスタマイズもいろいろ自作しています。

WordPressのカスタマイズに困ったらご相談ください!

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のアコーディオンブロックを追加して確認してみましょう。

サンプル

新着記事

まとめ

SWELLの各ブロックの機能は優れているので、あとはCSSを加えるだけで、また違ったUXのブロックが作成できます。

アコーディオンの見た目を変えたい方は是非試してみてください。

目次