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
ボックスの使い分けってどうやってます？
SANGOには、はじめからたくさんのボックスデザインがショートコードとして入っていますよね。
[kjk_balloon id=”8″]でも、多すぎてどれを使うか迷ってしまう！[/kjk_balloon] [kjk_balloon id=”7″]これはメモのボックスにしようか、、、あっポイントを説明するときも使いたいな、、、[/kjk_balloon]
記事を書いているのに、デザインの悩みまででてくると、全然記事が進まない、、、
[kjk_balloon id=”6″]そうだ！使うボックスのルールを決めてしまおう！ついでにデザインも変えよ（笑）[/kjk_balloon]
ということで、
この記事ではぼくがボックスを使う際に決めたルールと少しだけデザインを変更したのでそれを紹介します。
ボックスを使う際のルール
[kjk_balloon id=”2″]ぼくはこんな感じでルールを決めました！もう迷わない！[/kjk_balloon]１．やたらと使わない
まず決めたのが、思い切って「使わない」ことです。
あくまでも補足で使うので、４、５行にもなるような場合は、段落などを使ってボックスは使わないようにしました。
[kjk_balloon id=”9″]使いたい気持ちをグッと抑えます[/kjk_balloon]あれもこれもボックスで表現しようとすると大変です。長くなるようなら使わないことです。
２．使うものを決める
SANGOにはボックスの種類が32個もあります。
これをすべて使うのではなく、ぼくは基本以下のボックスだけを使うように決めました。
| メモ | ちょっとしたメモ書き、補足で使います。 |
| 注意 | 注意してほしいことのときに使います。 |
| ノート | 言葉や概要を説明する際に使います。 |
| トピック | トピックで使いますが、頻度は低め。 |
| ポイント | アドバイスを言うときに使います。 |
３．できるだけデザインを統一にする
ぼくはシンプル好きなのでデザインはシンプルにしました。
[kjk_balloon id=”1″]バラバラよりも統一されている方が見やすいですよね！[/kjk_balloon]ボックスのデザインは次で紹介します。
デザインを少しだけカスタマイズ
[kjk_balloon id=”24″]ぼくのサイトは「ノートと付箋」をイメージしているので、付箋の色をつかいました。[/kjk_balloon]
出典｜ポストイットより
あとはこの色を薄くして背景にしたり、タイトルの色は似ている色をMATELIAL DESIGNのカラーツールから探して変更しました。
参考 ポスト・イット® 製品の色見本３M基本的な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です。
[kjk_balloon id=”1″]PORIPUを子テーマで使っている方はかんたんです♪[/kjk_balloon]メモボックス
背景色｜#FDEE7470 タイトルの文字色｜#FFB74D
MEMOテキスト
注意ボックス
背景色｜#FCB4CC50 タイトルの文字色｜#FF5252
注意ここに文章
ノートボックス
背景色｜#EFEFEF80 タイトルの文字色｜#90A4AE
NOTEテキスト
トピックボックス
背景色｜#93CCEA30 タイトルの文字色｜#4FC3F7
TOPICテキスト
ポイントボックス
背景色｜#D7FDCD80 タイトルの文字色｜#4DB6AC
[kjk_balloon id=”4″]シンプルな付箋っぽいボックスができました！[/kjk_balloon] [kjk_ab id="4"]POINTテキスト
まとめ
ボックスは自分のルールを決めて乱用しないようにし方がいいですね！
ついでに少しデザインを変えるだけで、オリジナル感が出ますよ！
