SWELLはコーポレートサイトやブログなどあらゆるサイト構築に向いています。
CSSを使用しなくても簡単にデザインの変更は可能ですが、少しだけ微調整したい！という時に
「わざわざ調べるのは面倒くさい」「そもそもCSSやプログラミングを学ぶ時間が無い」といった問題があります。
この記事ではSWELLのアコーディオンブロックとCSSを使用した簡単なカスタマイズ方法をご紹介します。
SWELLでCSSやクラス名の記述方法の詳細はこちら。
テキストの配置変更
ラベル＆ボディ共に変更
アコーディオン01-01（ラベル部分）
SWELLアコーディオンブロックです。（ボディ部分）
コードを見る
追加 CSS クラス：my-accordion01-01
/* ラベル＆ボディ共に変更 */
.my-accordion01-01 .swell-block-accordion__item{
text-align: center; /* 中央寄せ */
text-align: right; /* 右寄せ */
}ラベル部分のみ変更
アコーディオン01-02（ラベル部分）
SWELLアコーディオンブロックです。（ボディ部分）
コードを見る
追加 CSS クラス：my-accordion01-02
/* ラベル部分のみ変更 */
.my-accordion01-02 .swell-block-accordion__label{
text-align: center; /* 中央寄せ */
text-align: right; /* 右寄せ */
}ボディ部分のみ変更
アコーディオン01-03（ラベル部分）
SWELLアコーディオンブロックです。（ボディ部分）
コードを見る
追加 CSS クラス：my-accordion01-03
/* ボディ部分のみ変更 */
.my-accordion01-03 .swell-block-accordion__body{
text-align: center; /* 中央寄せ */
text-align: right; /* 右寄せ */
}背景色の変更
ラベル＆ボディ共に変更
アコーディオン02-01（ラベル部分）
SWELLアコーディオンブロックです。（ボディ部分）
コードを見る
追加 CSS クラス：my-accordion02-01
/* ラベル＆ボディ共に変更 */
.my-accordion02-01 .swell-block-accordion__title,
.my-accordion02-01 .swell-block-accordion__body{
background: #f5afa7;
}ラベル部分のみ変更
アコーディオン02-02（ラベル部分）
SWELLアコーディオンブロックです。（ボディ部分）
コードを見る
追加 CSS クラス：my-accordion02-02
/* ラベル部分のみ変更 */
.my-accordion02-02 .swell-block-accordion__title{
background: #f5afa7;
}ボディ部分のみ変更
アコーディオン02-03（ラベル部分）
SWELLアコーディオンブロックです。（ボディ部分）
コードを見る
追加 CSS クラス：my-accordion02-03
/* ボディ部分のみ変更 */
.my-accordion02-03 .swell-block-accordion__body{
background: #f5afa7;
}枠線の追加
ラベル＆ボディ共に追加
アコーディオン03-01（ラベル部分）
SWELLアコーディオンブロックです。（ボディ部分）
コードを見る
追加 CSS クラス：my-accordion03-01
/* ラベル＆ボディ共に追加 */
.my-accordion03-01 .swell-block-accordion__item {
border-width: 2px; /* 線の太さ */
border-style: solid; /* 線の種類 */
border-color: #8fe1e1; /* 線の色 */
}ラベル＆ボディ別々に追加
アコーディオン03-02（ラベル部分）
SWELLアコーディオンブロックです。（ボディ部分）
コードを見る
追加 CSS クラス：my-accordion03-02
/* ラベル＆ボディ別々に追加 */
.my-accordion03-02 .swell-block-accordion__title{
border-width: 2px; /* 線の太さ */
border-style: solid; /* 線の種類 */
border-color: #8fe1e1; /* 線の色 */
}
.my-accordion03-02 .swell-block-accordion__body{
border-width: 2px; /* 線の太さ */
border-style: solid; /* 線の種類 */
border-color: #8fe1e1; /* 線の色 */
border-top: none;
}ラベル部分のみ追加
アコーディオン03-03（ラベル部分）
SWELLアコーディオンブロックです。（ボディ部分）
コードを見る
追加 CSS クラス：my-accordion03-03
/* ラベル部分のみ追加 */
.my-accordion03-03 .swell-block-accordion__title{
border-width: 2px; /* 線の太さ */
border-style: solid; /* 線の種類 */
border-color: #8fe1e1; /* 線の色 */
}ボディ部分のみ追加
アコーディオン03-04（ラベル部分）
SWELLアコーディオンブロックです。（ボディ部分）
コードを見る
追加 CSS クラス：my-accordion03-04
/* ボディ部分のみ追加 */
.my-accordion03-04 .swell-block-accordion__body{
border-width: 2px; /* 線の太さ */
border-style: solid; /* 線の種類 */
border-color: #8fe1e1; /* 線の色 */
}アコーディオンブロック自体に追加
アコーディオン03-05（ラベル部分）
SWELLアコーディオンブロックです。（ボディ部分）
アコーディオン03-05（ラベル部分）
SWELLアコーディオンブロックです。（ボディ部分）
コードを見る
追加 CSS クラス：my-accordion03-05
/* アコーディオンブロック自体に追加 */
.my-accordion03-05 {
border-width: 2px; /* 線の太さ */
border-style: solid; /* 線の種類 */
border-color: #8fe1e1; /* 線の色 */
}線の種類について
線の種類
border-style: double;→ 二重線
border-style: dashed;→ 破線
border-style: dotted;→ 点線
border-style: solid; → 実線
ホバーアニメーションの追加
ホバーで背景色の変化
アコーディオン04-01（ラベル部分）
SWELLアコーディオンブロックです。（ボディ部分）
コードを見る
追加 CSS クラス：my-accordion04-01
/* ホバーで背景色の変化 */
.my-accordion04-01 .swell-block-accordion__title{
transition: .3s ease-out; /* アニメーションのスピードなど */
}
.my-accordion04-01 .swell-block-accordion__title:is(:hover, :focus){
background: #f5dfdc;
}ホバーでボーダーを追加
アコーディオン04-02（ラベル部分）
SWELLアコーディオンブロックです。（ボディ部分）
コードを見る
追加 CSS クラス：my-accordion04-02
/* ホバーでボーダーを追加 */
.my-accordion04-02 .swell-block-accordion__title{
border: 2px solid transparent;
transition: .3s ease-out; /* アニメーションのスピードなど */
}
.my-accordion04-02 .swell-block-accordion__title:is(:hover, :focus){
border: 2px solid #8fe1e1;
}ホバーでアイコンの色を変更
アコーディオン04-03（ラベル部分）
SWELLアコーディオンブロックです。（ボディ部分）
コードを見る
追加 CSS クラス：my-accordion04-03
/* ホバーでアイコンの色を変更 */
.my-accordion04-03 .swell-block-accordion__icon{
transition: .3s ease-out; /* アニメーションのスピードなど */
}
.my-accordion04-03 .swell-block-accordion__item:is(:hover, :focus) .swell-block-accordion__icon{
color: #8fe1e1;
}アイコンの色＆配置の変更
アイコンの色を変更
アコーディオン05-01（ラベル部分）
SWELLアコーディオンブロックです。（ボディ部分）
コードを見る
追加 CSS クラス：my-accordion05-01
/* アイコンの色を変更 */
.my-accordion05-01 .swell-block-accordion__icon{
color: #8fe1e1;
}アイコンの配置を変更
アコーディオン05-02（ラベル部分）
SWELLアコーディオンブロックです。（ボディ部分）
コードを見る
追加 CSS クラス：my-accordion05-02
/* アイコンの配置を変更 */
.my-accordion05-02 .swell-block-accordion__title{
flex-direction: row-reverse;
}
.my-accordion05-02 .swell-block-accordion__label{
padding: 0 0 0 1em;
}アイコンのサイズを変更
アコーディオン05-03（ラベル部分）
SWELLアコーディオンブロックです。（ボディ部分）
コードを見る
追加 CSS クラス：my-accordion05-03
/* アイコンのサイズを変更 */
.my-accordion05-03 .swell-block-accordion__icon{
font-size: 2em;
}アコーディオンが開いている間アニメーションを維持する
下記のアコーディオンブロックは開かれている間、別の操作を行っても背景色の変化が維持されます。
アコーディオン06-01（ラベル部分）
SWELLアコーディオンブロックです。（ボディ部分）
上記で紹介した「ホバーで背景色の変化」のアコーディオンブロックとの動きの差を確認してみてください。
コードを見る
追加 CSS クラス：my-accordion06-01
/* アコーディオンが開いている間アニメーションを維持する */
.my-accordion06-01 .swell-block-accordion__title{
transition: .3s ease-out;
}
.my-accordion06-01 .swell-block-accordion__item.is-opened .swell-block-accordion__title,
.my-accordion06-01 .swell-block-accordion__title:is(:hover, :focus){
background: #f5dfdc;
}.swell-block-accordion__item.is-openedを使用する事でアコーディオンを開いている間アニメーションの維持を続けます。
まとめ｜【SWELL】アコーディオンブロックとCSSで簡単カスタマイズ
- SWELLオリジナルのブロックはカスタマイズしやすい
- CSSだけでも簡単にデザインの変更が可能
- CSSだけでもアニメーションの追加が可能