ブログにご訪問くださりありがとうございます！
ブログを書いていると
定型文やメニュー紹介などに
囲み枠を使いますねよ！
「アメブロ囲み枠」で検索すると
沢山の囲み枠のコードが出てきます。
コードをコピペして
HTML表示に貼り付ければ
簡単に囲み枠をブログに入れることができます。
でも、
「自分好みの色じゃない・・・」
「もっと自分らしい色に変えたい・・・」
そんな風に思ったりしませんか？
とは言っても
HTML表示の
たくさんの記号の羅列を目にすると
「難しそう・・・」と思ってしまって
なかなか自分でカスタマイズできない・・・
私も初めはそうでした！
でも実は、とっても簡単なんです。
本日は
囲み枠の色を
自分好みに変える方法をご紹介しますね！
まず
こちらのピーチという色名の下に
何やら＃がついた６桁の文字列がありますね。
この頭に「 # 」がついていて
その次に６桁の数字とアルファベットが並んでいる文字列
#fbd8b5
これが「カラーコード」です。
色にはそれぞれの
コードがあるのですが
webに表示されている色は
このコードを機械が読み取って
そのコードの色を
表示してくれているという仕組みです。
私はいつもこちらのサイトを参考に
色を選んでいます↓
WEB色見本 原色大辞典
原色だけでなく
パステルカラーや和色、洋色、ビビットカラーなど
種類は豊富です。
好みのカラーが見つかります♡
使い方は簡単！
たくさんある色見本から
好きなカラーを選び
クリックします。
すると
クリックした色の詳細が表示されます。
#から始まるカラーコードを
コピーして使用することができます。
次に囲み枠のコードをみてみましょう。
例えばこちらの枠。
<div style="background:#bed2c3; border: 2px solid #f8b862; padding:10px;">テキスト</div>
マーカーで色がついている部分が
カラーコードですね。
このカラーコードが
どの部分の色なのか分かれば、
囲み枠を好きな色に
変えることができますよね！
アルファベットや数字がたくさん並んでいて
苦手な方は「うっ・・・」となってしまいそうですが、
「<div style="」 から「 " > 」に囲まれている記号達
これらが囲み枠の色や形などの
スタイルを決めています。
ざっくりというと
何を ： どうする ；
というコードをいくつも組み合わせて
囲み枠は作られています。
「何を」の後には「：」
「どうする」の後には「 ; 」がついています。
この記号も大切です。
それを踏まえて、
もう一度コードを見てみます。
このグリーンのマーカー部分、
<div style="background:#bed2c3; border: 2px solid #f8b862; padding:10px;">テキスト</div>
↓
background: #bed2c3 ;
(background-color:の場合もあります）
についているカラーコードは
囲み枠の中の背景色を設定している部分です。
背景色を ： ○○色にする ；
という意味です。
こちらのイエローのマーカー部分
<div style="background:#bed2c3; border: 2px solid #f8b862; padding:10px;">テキスト</div>
↓
★ border: 2px solid #f8b862;
（border-color:の場合もあります）
についているカラーコードは
囲み枠の外側の枠線の色を設定しています。
枠線を : 線の太さを○pxにする 線の種類を○○にする 線を○○色にする ;
こういった意味になっています。
＼線の種類も色々選べます！／
- 実線 solid
- 二重線 double(こちらは3px以上の太さに設定しないと二重線になりません。）
- 点線 dotted
- 破線 dashed
それではいよいよ
実際にカラーコードを自分の好きな色に
変えてみましょう。
背景のbackgroundをグリーン#bed2c3から
生成色#fbfaf5に
外側の枠線をオレンジ#f8b862から
水色#c1e4e9にしてみました。
<div style="background:#bed2c3; border: 2px solid #f8b862; padding:10px;">テキスト</div>
↓↓↓
<div style="background:#fbfaf5; border: 2px solid #c1e4e9; padding:10px;">テキスト</div>
線の種類を実線solidから
点線dottedに変えるとこんな風になります。
<div style="background:#fbfaf5; border: 2px solid #c1e4e9; padding:10px;">テキスト</div>
↓↓↓
<div style="background:#fbfaf5; border: 2px dotted #c1e4e9; padding:10px;">テキスト</div>
いかがでしたでしょうか？
囲み枠で色を変える部分
背景色の background
枠線の border
この２種類のコードがわかれば
自分の好きな色に変えるのも簡単です！
他のコードには手をつけないようにしましょう♪
＼最後に注意点！／
コピペするときに
「 : 」や「 ; 」の記号を
うっかり消してしまわないように
ご注意くださいね！
うまく反映されない時は
細かい記号が消えてしまっていないか？
スペースが入りすぎていたりしていないか？
チェックしてみてください＾＾
●水彩画を添えた世界にひとつだけのデザインを作りたい
●サロンやブランドイメージを水彩画のロゴにして優しさをプラスしたい
●人の手のぬくもりが感じられるブログに整えたい
●もらった人が思わず飾りたくなるような水彩画のDMや名刺を作りたい
そんな方はぜひ、お問い合わせください＾＾
※リブログやシェアはご自由にどうぞ。事前連絡等は必要ありません。