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

ボックスを付箋風に変更

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

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

 

MENくん
でも、多すぎてどれを使うか迷ってしまう!
MENくん
これはメモのボックスにしようか、、、あっポイントを説明するときも使いたいな、、、

 

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

 

MENくん
そうだ!使うボックスのルールを決めてしまおう!ついでにデザインも変えよ(笑)

 

ということで、

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

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

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

1.やたらと使わない

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

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

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

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

2.使うものを決める

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

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

メモちょっとしたメモ書き、補足で使います。
注意注意してほしいことのときに使います。
ノート言葉や概要を説明する際に使います。
トピックトピックで使いますが、頻度は低め。
ポイントアドバイスを言うときに使います。
MENくん
使うボックスはこれだけ!

3.できるだけデザインを統一にする

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

MENくん
バラバラよりも統一されている方が見やすいですよね!

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

夏だし髪を斬りに行こう!

夏だしどっか行こう!

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

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

出典|ポストイットより

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

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

参考 ポスト・イット® 製品の色見本3M

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

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

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

メモボックス

MEMO
テキスト

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


注意ボックス

Alart
テキスト

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


ノートボックス

NOTE
テキスト

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


トピックボックス

TOPIC
テキスト

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


ポイントボックス

POINT
テキスト

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

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

まとめ

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

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