囲み枠の付け方は分かったけど、色を変えたりカスタマイズ方法を知りたい！
今回はそんな疑問に答えます。
こんにちは、せりももです。
今回は、囲み枠のカスタマイズ方法を紹介します。
初心者の方でも分かりやすいように説明していきます。
それでは本題へどうぞ♪
囲み枠をつける方法が分からない方は前回の記事↓を先に読むことをおすすめします。
囲み枠の色を変更する
今回はこの↓囲み枠を使って説明します。
<div style=”background: #FFFFFF; border: 2px solid #00a5dd; border-radius: 5px; padding:10px;”> <p>ここに文章を入力してください</p><p>ここに文章を入力してください</p></div>
「background: #FFFFFF」は「背景は白色」という意味です。
「border: 2px solid #00a5dd」は「線の太さは2pxで、1本線、水色」という意味です。
「＃〇〇〇〇〇〇」が色のことで、WEBでは色のカラーコードが決まっています。
カラーコードはWEB色見本を参考にしてください。
色が決まったら、「＃〇〇〇〇〇〇」を書き換えればOKです！
【例】
・緑（#43A047）に変更する
#00a5dd を #43A047 に書き換えます。
すると下記のようなコードになり、囲み枠の色も変わりました！
<div style=”background: #FFFFFF; border: 2px solid #43A047; border-radius: 5px; padding:10px;”> <p>ここに文章を入力してください</p><p>ここに文章を入力してください</p></div>
・黄色（#ffff66）
<div style=”background: #FFFFFF; border: 2px solid #ffff66; border-radius: 5px; padding:10px;”> <p>ここに文章を入力してください</p><p>ここに文章を入力してください</p></div>
・赤（#ff0000）
<div style=”background: #FFFFFF; border: 2px solid #ff0000; border-radius: 5px; padding:10px;”> <p>ここに文章を入力してください</p><p>ここに文章を入力してください</p></div>
線を太くする
線を太くする時は「border: 2px solid #00a5dd」の2pxの数字を大きくすると太くなります。
【例】
・4px
<div style=”background: #FFFFFF; border: 4px solid #00a5dd; border-radius: 5px; padding:10px;”> <p>ここに文章を入力してください</p><p>ここに文章を入力してください</p></div>
・8px
<div style=”background: #FFFFFF; border: 8px solid #00a5dd; border-radius: 5px; padding:10px;”> <p>ここに文章を入力してください</p><p>ここに文章を入力してください</p></div>
囲み枠の１本線を２本線などに変更
「border: 2px solid #00a5dd」の solid が１本線の意味です。
２本線にしたい場合は solid を double に書き換えればOKです。
2pxのままだと２本線の表示ができない場合があるので4pxぐらいにするといいです
２本線 double
<div style=”background: #FFFFFF; border: 4px double #00a5dd; border-radius: 5px; padding:10px;”> <p>ここに文章を入力してください</p><p>ここに文章を入力してください</p></div>
破線 dashed
<div style=”background: #FFFFFF; border: 2px dashed #00a5dd; border-radius: 5px; padding:10px;”> <p>ここに文章を入力してください</p><p>ここに文章を入力してください</p></div>
点線 dotted
<div style=”background: #FFFFFF; border: 2px dotted #00a5dd; border-radius: 5px; padding:10px;”> <p>ここに文章を入力してください</p><p>ここに文章を入力してください</p></div>
囲み枠の角
いまままで「border-radius: 5px；」で角を丸くしてました。
四角
「border-radius: 5px；」を消すと四角になります。
<div style=”background: #FFFFFF; border: 2px solid #00a5dd; padding:10px;”> <p>ここに文章を入力してください</p><p>ここに文章を入力してください</p></div>
角の丸み具合の変更
「border-radius: 5px；」の数字を変更すると丸み具合が変わります。
数字が大きいほど丸くなります。
【例】
・5px
<div style=”background: #FFFFFF; border: 2px solid #00a5dd; border-radius: 5px; padding:10px;”> <p>ここに文章を入力してください</p><p>ここに文章を入力してください</p></div>
・10px
<div style=”background: #FFFFFF; border: 2px solid #00a5dd; border-radius: 10px; padding:10px;”> <p>ここに文章を入力してください</p><p>ここに文章を入力してください</p></div>
・20px
<div style=”background: #FFFFFF; border: 2px solid #00a5dd; border-radius: 20px; padding:10px;”> <p>ここに文章を入力してください</p><p>ここに文章を入力してください</p></div>
まとめ
今回は囲み枠のカスタマイズ方法をご紹介しました。
カスタマイズできると自分なりの見せ方ができるようになります。
自分なりの見せ方ができると、記事を書くことが楽しくなると思います。
それでは、最後まで読んでいただきありがとうございました！
コメント
コメント一覧 （1件）
[…] あわせて読みたい 【WordPress】囲み枠のカスタマイズ方法【初心者向け】 囲み枠の付け方は分かったけど、色を変えたりカスタマイズ方法を知りたい！ 今回はそんな疑問に答えます […]