【SANGOを自分でカスタマイズ】箇条書きボックスのデザインを変更してみる

カスタマイズは自己責任でやろう！

「自己責任」の意味がわからない方、初めてカスタマイズする方はこちら

カスタマイズは自己責任。ぼくはこんな風に思っています。

CUSTOM　POINT

SANGOのショートコードで用意されている「ステッチ（水色）」をぼくのサイトにマッチするようにデザインしました。ぼくは「こんな人におすすめ」用にアイコンをつけました。

こんな感じで変更

Before

After

こだわりポイント

※ふきだし部分のカスタマイズは別記事で掲載予定です。

メインカラー（#424242）しか使わない、気が狂った配色です

ジャンプマップ

カスタマイズの準備

追加方法	難しさ
追加CSS
テーマエディター
FTPソフト

はじめてカスタマイズをする方におすすめなのは追加CSSです。

ブログのカスタマイズを加速させる「追加CSS」の使い方

ビジュアルエディタに記入するショートコード

ステッチの水色はこちらのショートコードになります。

/*** ショートコード ***/
[list class="stitch-blue"]★箇条書き★[/list]

1 2	/* ショートコード */ [list class="stitch-blue"]★箇条書き★[/list]

カスタマイズコードの追加

CSSコード（コメントあり）

/*--------------------------------------
  ステッチ（水色）を変更
--------------------------------------*/
.stitch-blue{/*全体の設定*/
    position: relative;/*ここを基準に設定*/
}
.stitch-blue ul{/*箇条書き全体の設定*/
    margin: 10px 10px 2em 10px;/*外側の余白*/
    border: none;/*線を削除*/
    border-radius: 0px;/*角丸を削除*/
    background: white;/*背景を削除*/
    box-shadow: 0 0 0 10px rgba(66,66,66,0.1);/*外側の枠線*/
    color: rgba(66,66,66,0.87);/*文字色*/
    padding: 1em 1em 1em 3.5em;/*内側の余白*/
}
.stitch-blue li:before {/*箇条書きのアイコン*/
    position: absolute;/*基準にあわせて動くように*/
    left: 2.5em;/*左からの位置*/
    color: rgba(66,66,66,0.54);/*アイコンの色*/
    font-family: FontAwesome;
    content: "\f2bd";/*アイコンの種類*/
}
.stitch-blue li{/*箇条書きの文字部分*/
    list-style-type: none !important;/*箇条書きの「・」を削除*/
    padding: 8px 0;/*上下の余白を設定*/
}

/*--------------------------------------

ステッチ（水色）を変更

--------------------------------------*/

.stitch-blue{/*全体の設定*/

position: relative;/*ここを基準に設定*/

}

.stitch-blue ul{/*箇条書き全体の設定*/

margin: 10px 10px 2em 10px;/*外側の余白*/

border: none;/*線を削除*/

border-radius: 0px;/*角丸を削除*/

background: white;/*背景を削除*/

box-shadow: 0 0 0 10px rgba(66,66,66,0.1);/*外側の枠線*/

color: rgba(66,66,66,0.87);/*文字色*/

padding: 1em 1em 1em 3.5em;/*内側の余白*/

}

.stitch-blue li:before {/*箇条書きのアイコン*/

position: absolute;/*基準にあわせて動くように*/

left: 2.5em;/*左からの位置*/

color: rgba(66,66,66,0.54);/*アイコンの色*/

font-family: FontAwesome;

content: "\f2bd";/*アイコンの種類*/

}

.stitch-blue li{/*箇条書きの文字部分*/

list-style-type: none !important;/*箇条書きの「・」を削除*/

padding: 8px 0;/*上下の余白を設定*/

}

CSSコード（コメントなし）

/*--------------------------------------
  ステッチ（水色を変更）
--------------------------------------*/
.stitch-blue{
    position: relative;
}
.stitch-blue ul{
    margin: 10px 10px 2em 10px;
    border: none;
    border-radius: 0px;
    background: white;
    box-shadow: 0 0 0 10px rgba(66,66,66,0.1);
    color: rgba(66,66,66,0.87);
    padding: 1em 1em 1em 3.5em;
}
.stitch-blue li:before {
    position: absolute;
    left: 2.5em;
    color: rgba(66,66,66,0.54);
    font-family: FontAwesome;
    content: "\f2bd";
}
.stitch-blue li{
    list-style-type: none !important;
    padding: 8px 0;
}

/*--------------------------------------

ステッチ（水色を変更）

--------------------------------------*/

.stitch-blue{

position: relative;

}

.stitch-blue ul{

margin: 10px 10px 2em 10px;

border: none;

border-radius: 0px;

background: white;

box-shadow: 0 0 0 10px rgba(66,66,66,0.1);

color: rgba(66,66,66,0.87);

padding: 1em 1em 1em 3.5em;

}

.stitch-blue li:before {

position: absolute;

left: 2.5em;

color: rgba(66,66,66,0.54);

font-family: FontAwesome;

content: "\f2bd";

}

.stitch-blue li{

list-style-type: none !important;

padding: 8px 0;

}

CSSコード（fontawesome 5）

/*--------------------------------------
  ステッチ（水色を変更）
--------------------------------------*/
.stitch-blue{
    position: relative;
}
.stitch-blue ul{
    margin: 10px 10px 2em 10px;
    border: solid 1px rgba(66,66,66,0);
    border-radius: 0px;
    background: rgba(66,66,66,0);
    box-shadow: 0 0 0 10px rgba(66,66,66,0.1);
    color: rgba(66,66,66,0.87);
    padding: 1em 1em 1em 3.5em;
}
.stitch-blue li:before {
    position: absolute;
    left: 2.5em;
    color: rgba(66,66,66,0.54);
    font-family: "Font Awesome 5 Free";
    font-weight:900;
    content: "\f2bd";
}
.stitch-blue li{
    list-style-type: none !important;
    padding: 8px 0;
}