可愛い箇条書きボックス（SANGO）

こんなの作りました。

有名な某企業のサイトで使われていたデザインを参考にしました

ほな、あとはJSONで再利用ブロックを登録して、CSSコードを追記すればしまいやな

JSON（再利用ブロック）

jsonファイルは再利用ブロックのデータを登録する時に使用します。

上のボタンをクリックしてZIP（圧縮ファイル）をダウンロードしてください。

流れとしては

1. ZIPファイルをダウンロード
2. ZIPファイルを解凍して、JSONファイルにします
3. 再利用ブロックの管理画面からJSONファイルをインポート

はじめての人はかならず見てね♫めっちゃ便利だからね

CSSコード

.koko {
    position: relative;
    border-radius: 5px;
    padding: 50px 4px 4px 4px;
}
.koko .sgb-box-simple__title {
    position: absolute;
    left: 25px;
    line-height: 30px;
    padding: 0;
    top: 10px;
    border-bottom: none;
}
.koko .sgb-box-simple__body {
    border-radius: 8px;
    padding: 0 1.5em;
}
body .koko .sgb-box-simple__body ul {
    padding: 0;
    list-style: none;
}
.koko li {
    padding-left: 1.5em;
    position: relative;
}
.koko li:before {
    content: "\f058";
    position: absolute;
    font-family: "font awesome 5 free";
    left: 0;
}
.koko ul li:not(:last-child) {
    border-bottom: dotted 2px #f2f2f2;
}
@media (min-width: 1030px){
.koko {
    padding: 6px 4px 4px 200px;
}
.koko .sgb-box-simple__title {
    top: calc(50% - 15px);
    border-bottom: double 4px #fff;
}}
/*****  カラーはこちら  *****/
.koko { background: #76ced3;}/*カラーを変えてね*/
.koko li:before { color: #76ced3;}/*カラーを変えてね*/

最後の２行はSANGOのタイトル付きボックスのボックスカラーと一緒にしてくださいね。

子テーマか追加CSSにぶち込んでね

質問＆サポート

とりあえずの駆け足で説明しました( ˶ˆ꒳ˆ˵ )

ぼくのFANBOX（420円以上）で応援してくれてる方でわからない方や「ちょっとこうしたい」みたいなのがあるひとはTwitterでDMください。

ちなみに「吹き出しクリエイター」がグーテンベルクに神対応しました

この話はまた記事を書くね

GOOD・BADボックス

可愛い箇条書きボックスを思いついた後に、アレンジしたボックス（ここが良い・悪いボックス）があります。

今回紹介したコードをちょちょちょいっと変更すれば使用できます。

コードを変更しても前の単発箇条書きボックスも問題なく使用できるので、安心してくださいね。

JSONファイルとコードはこちら！

/*--------------------------------------
  可愛い箇条書きボックス
--------------------------------------*/
.koko {
    position: relative;
    border-radius: 5px;
    padding: 50px 4px 4px 4px;
}
.koko .sgb-box-simple__title {
    position: absolute;
    left: 25px;
    line-height: 30px;
    padding: 0;
    top: 10px;
    border-bottom: none;
}
.koko .sgb-box-simple__body {
    border-radius: 8px;
    padding: 0 1.5em;
}
body .koko .sgb-box-simple__body ul {
    padding: 0;
    list-style: none;
}
.koko li {
    padding-left: 1.5em;
    position: relative;
}
.koko li:before {
    content: "\f058";
    position: absolute;
    font-family: "font awesome 5 free";
    left: 0;
}
.koko ul li:not(:last-child) {
    border-bottom: dotted 2px #f2f2f2;
}
.koko1 {
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}
.koko2 {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}
@media (min-width: 1030px){
.koko {
    padding: 6px 4px 4px 200px;
}
.koko .sgb-box-simple__title {
    top: calc(50% - 15px);
    border-bottom: double 4px #fff;
}
.koko1 .sgb-box-simple__title:before, .koko2 .sgb-box-simple__title:before {
    font-family: "font awesome 5 free";
    font-weight: 900;
    position: absolute;
    font-size: 4em;
    opacity: .38;
    left: 20px;
    top: -60px;
}
.koko1 .sgb-box-simple__title, .koko2 .sgb-box-simple__title {
    top: calc(50% - -20px);
}}
/*****  用途別の設定  *****/
.margin-top-none{margin-top:0;}/*上の外側余白リセット*/
.margin-bottom-none{margin-bottom:0;}/*下の外側余白リセット*/
/*****  カラーはこちら  *****/
.koko { background: #76ced3;}/*カラーを変えてね*/
.koko li:before { color: #76ced3;}/*カラーを変えてね*/
.koko2 { background: #f88080;}/*カラーを変えてね*/
.koko2 li:before { color: #f88080;}/*カラーを変えてね*/
/*****  アイコン設定  *****/
.koko1 li:before { content: "\f580";}/*GOODの方のアイコン*/
.koko2 li:before { content: "\f5c8";}/*BADの方のアイコン*/
@media (min-width: 1030px){
.koko1 .sgb-box-simple__title:before { content: "\f580";}/*GOODの方のアイコン*/
.koko2 .sgb-box-simple__title:before { content: "\f5c8";}/*BADの方のアイコン*/
}

あとはお好きに色やアイコンを変更して使ってね

わかんないときは質問してくださいね♫（FANBOXの方）