こんにちは、パソコンワンポイントレッスン!
PCインストラクターの川上です。
※ 2014年05月17日(土) 12時00分16秒にアップしていた記事の再アップ記事です。
昨日、記事で使った囲い枠についてですが・・・
そう、このレインボー囲み枠・・・
なるものです(笑)
一応、リクエストありましたので、お知らせいたしますね^^;
レインボー囲み枠、虹色囲み枠、カメレオン囲み枠・・・
色んな呼び名がありそうですが(笑)
【レインボー(角丸)(影つき)(背景グラデーション)】
(IE10以降で有効、Chrome、Firefox、Safari有効)
(画像表示↓)
(現在のブラウザ表示↓)
○○○
○○○
○○○
○○○
<div style="background-image:linear-gradient(#F5B090,#FCD7A1,#FFF9B1,#A5D4AD,#A3BCE2,#A59ACA,#CFA7CD);background-color:#ffeeee; padding:10px; width: auto;margin-right:6px; border-radius: 10px;border: 2px dotted #ff0000; box-shadow: 5px 5px 5px #AAA;">○○○<br>○○○<br>○○○<br>○○○<br>○○○</div><br>
こちらのタグ↑を記事のHTML表示の方に、ペタっと貼り付けて、中の文字を入力し直すと、すぐできます!(タグ編集エディタの方は、そのまま貼り付けるとOKです。)
レインボーの色コードは
#F5B090,#FCD7A1,#FFF9B1,#A5D4AD,#A3BCE2,#A59ACA,#CFA7CD
になります。
ですので、
background-image:linear-gradient(#F5B090,#FCD7A1,#FFF9B1,#A5D4AD,#A3BCE2,#A59ACA,#CFA7CD);
をくっつければ、メッセージボードの枠の背景も、メニューの背景もレインボーにすることができます。
ただし、うるさいかもしれませんが(苦笑)
背景を、薄いレインボーでなく、普通のレインボーにすると↓↓↓
○○○
○○○
○○○
○○○
<div style="background-image:linear-gradient(#E60012,#F39800,#FFF100,#009944,#0068B7,#1D2088,#920783);background-color:#ffeeee; padding:10px; width: auto;margin-right:6px; border-radius: 10px;border: 2px dotted #ff0000; box-shadow: 5px 5px 5px #AAA;">○○○<br>○○○<br>○○○<br>○○○<br>○○○</div><br>
間違いなく、目にうるさい・・・ですから^^;(お気をつけてくさだいませ!)
ちなみに、色コードは、
です。
あ、そう言えば、この記事に追記してあります^^;
アメブロ 記事内に枠で囲む方法(囲い枠・囲み枠・枠囲い・枠囲み)
以上、アメブロ便利技でした。
LIDS札幌・ライフデザインスクール
川上 雄大