Warning: Undefined variable $post in /home/syotaro/for-men.jp/public_html/wp-content/themes/sango-theme-poripu/functions.php on line 12

Warning: Attempt to read property "ID" on null in /home/syotaro/for-men.jp/public_html/wp-content/themes/sango-theme-poripu/functions.php on line 12

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

ボックスを付箋風に変更


Warning: Undefined array key 3 in /home/syotaro/for-men.jp/public_html/wp-content/themes/sango-theme-poripu/library/functions/prp_content.php on line 18

Warning: Undefined array key 4 in /home/syotaro/for-men.jp/public_html/wp-content/themes/sango-theme-poripu/library/functions/prp_content.php on line 21

Warning: Undefined array key 3 in /home/syotaro/for-men.jp/public_html/wp-content/themes/sango-theme-poripu/library/functions/prp_content.php on line 30

Warning: Undefined array key 4 in /home/syotaro/for-men.jp/public_html/wp-content/themes/sango-theme-poripu/library/functions/prp_content.php on line 33

Warning: Undefined variable $return in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/kjk_balloon_sc.php on line 91

Warning: Undefined variable $return in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/kjk_balloon_sc.php on line 91

Warning: Undefined variable $return in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/kjk_balloon_sc.php on line 91

Warning: Undefined variable $return in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/kjk_balloon_sc.php on line 91

Warning: Undefined variable $return in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/kjk_balloon_sc.php on line 91

Warning: Undefined variable $return in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/kjk_balloon_sc.php on line 91

Warning: Undefined variable $return in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/kjk_balloon_sc.php on line 91

Warning: Undefined variable $return in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/kjk_balloon_sc.php on line 91

Warning: Undefined variable $return in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/kjk_balloon_sc.php on line 91

Warning: Undefined variable $return in /home/syotaro/for-men.jp/public_html/wp-content/plugins/kojika-balloon-creator/library/kjk_balloon_sc.php on line 91

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

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

 

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

 

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

 

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

 

ということで、

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

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

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

1.やたらと使わない

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

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

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

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

2.使うものを決める

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

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

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

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

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

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

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

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

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

出典|ポストイットより

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

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

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

基本的な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です。

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

メモボックス

MEMO
テキスト

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

MEMO
テキスト

注意ボックス

Alart
テキスト

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

注意
ここに文章

ノートボックス

NOTE
テキスト

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

NOTE
テキスト

トピックボックス

TOPIC
テキスト

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

TOPIC
テキスト

ポイントボックス

POINT
テキスト

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

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

まとめ

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

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