【SANGOを自分でカスタマイズ】ボックスデザインを付箋みたいに変更

ボックスの使い分けってどうやってます？

SANGOには、はじめからたくさんのボックスデザインがショートコードとして入っていますよね。

でも、多すぎてどれを使うか迷ってしまう！

これはメモのボックスにしようか、、、あっポイントを説明するときも使いたいな、、、

記事を書いているのに、デザインの悩みまででてくると、全然記事が進まない、、、

そうだ！使うボックスのルールを決めてしまおう！ついでにデザインも変えよ（笑）

ということで、

この記事ではぼくがボックスを使う際に決めたルールと少しだけデザインを変更したのでそれを紹介します。

ボックスを使う際のルール

ぼくはこんな感じでルールを決めました！もう迷わない！

１．やたらと使わない

まず決めたのが、思い切って「使わない」ことです。

あくまでも補足で使うので、４、５行にもなるような場合は、段落などを使ってボックスは使わないようにしました。

使いたい気持ちをグッと抑えます

あれもこれもボックスで表現しようとすると大変です。長くなるようなら使わないことです。

２．使うものを決める

SANGOにはボックスの種類が32個もあります。

これをすべて使うのではなく、ぼくは基本以下のボックスだけを使うように決めました。

使うボックスはこれだけ！

３．できるだけデザインを統一にする

ぼくはシンプル好きなのでデザインはシンプルにしました。

バラバラよりも統一されている方が見やすいですよね！

ボックスのデザインは次で紹介します。

デザインを少しだけカスタマイズ

ぼくのサイトは「ノートと付箋」をイメージしているので、付箋の色をつかいました。

出典｜ポストイットより

付箋といえばポストイットですよね。この色を使わせていただきました。

あとはこの色を薄くして背景にしたり、タイトルの色は似ている色をMATELIAL DESIGNのカラーツールから探して変更しました。

基本的なCSSのコードはこちらです。

/*--------------------------------------
メモボックスのコード
--------------------------------------*/
.memo{　/* メモボックスの設定 */
    background: #FDEE7470;/* 背景色 */
    line-height: 1.7;
    font-size: 17px;
    padding: 10px 15px;
    border-radius: 5px;
    margin-bottom: 10px;
    margin-top: 2em;
}
.memo_ttl {/*メモボックス内のタイトルの設定*/
    margin-bottom: 10px;
    color: #FFB74D;/* タイトルの色 */
}
.memo_ttl:before {/* アイコンの設定 */
    background: none;
    color: #FFB74D;/* アイコンの色 */
    line-height: 26px;
}

メモ以外の時は.memoを.memo.noteや.memo.topicなどに変更してカラーを変えればOKです。

PORIPUを子テーマで使っている方はかんたんです♪

メモボックス

背景色｜#FDEE7470　　　タイトルの文字色｜#FFB74D

 MEMO
テキスト

注意ボックス

背景色｜#FCB4CC50　　　タイトルの文字色｜#FF5252

 注意
ここに文章

ノートボックス

背景色｜#EFEFEF80　　　タイトルの文字色｜#90A4AE

 NOTE
テキスト

トピックボックス

背景色｜#93CCEA30　　　タイトルの文字色｜#4FC3F7

 TOPIC
テキスト

ポイントボックス

背景色｜#D7FDCD80　　　タイトルの文字色｜#4DB6AC

 POINT
テキスト

シンプルな付箋っぽいボックスができました！

まとめ

ボックスは自分のルールを決めて乱用しないようにし方がいいですね！

ついでに少しデザインを変えるだけで、オリジナル感が出ますよ！