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

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

このブログのワードプレス環境

ワードプレステーマ

子テーマ

この記事ではボックスのデザインをカスタマイズした方法を説明。

CUSTOM　POINT

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

こんな感じで変更

Before

After

こだわりポイント

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

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

このサイトの環境

テーマ

子テーマ

プラグイン

使うソフトなどはこちら

必須

WordPress

Google Chrome

推奨

File zilla

sublime text

見たい場所へジャンプ

1 カスタマイズの準備
- 1.1 ビジュアルエディタに記入するショートコード
2 カスタマイズコードの追加
3 まとめ

カスタマイズの準備

追加CSSの手順

外観

カスタマイズ

追加CSS

子テーマの手順

外観

テーマの編集

FTPソフトの手順

FTPソフト起動

自サイトに接続

style.cssを開く

追加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;
}