こんにちは
未来のあなたを
笑顔にするお手伝い
スピリチュアルハッピーライフ
アドバイザー&占い教室講師
杏純(アンジュ)・ケイトです
日々の出来事や毎日の暦など
アメブロでほぼ毎日更新中。
「アンジュケイト」で検索してみてね。
こちらはクスっと笑える楽しい話題をほぼ毎日書いてます。
こっちも見てね
アメブロで可愛い囲み枠を使ってみたけど
こんなお悩みが…
お客様からのお声です。
せっかくコピペして枠は作ったんですが、そもそも自分の思う色じゃないんですよね。
もっと自分のイメージにあった色の囲み枠が欲しいけど、自分で作成するとなんだかビミョー。
そう!色って案外難しい!
文字、線、べた塗りなど、
同じ色でも使うものによってイメージが変わってきます。
いちいち試してみるのは面倒です
そんなあなたに、
そして
囲み枠を作った場合のイメージ
をコレクションしていきますよ。
気に入れば、そのままコピペ出来ますよ!
ほかの色が見たい方、印刷用色見本ダウンロードはこちらから探してください。(毎日更新中)
緑色系統の色
アメブロ・ブログスタンプ中の緑系統の色です。
それぞれの色で作った囲み枠サンプル付きです。
7月3日:ソフトクリームの日(枠の色)
#4dac26
rgb(77,172,38)
シンプルな囲み枠(角が丸・文字によって長さが変わるタイプ)
イメージ
改行はShift+Enter
<div style="border: 5px solid #4dac26; padding: 10px; border-radius: 10px; display: inline-block;"><span style="color: #000000;">ここに文字を入力<br />改行はShift+Enter</span></div>
ポイント付き付せん風囲み枠(文字によって長さが変わるタイプ)
イメージ
サンプルです
<div style="border: #4dac26 solid 1px; border-left: #4dac26 solid 13px; padding: 10px; background: #ffffff; display: inline-block;">ポイント付き付せん風囲み枠<br />サンプルです</div>
タイトル付き囲み枠(文字によって長さ変化なしタイプ)
イメージ
<div><div style="background: #4dac26; border: 1px solid #4dac26; padding-left: 10px; color: #ffffff; font-weight: bold;"><span style="font-size: 1.4em;"><span style="font-weight: bold;">タイトル入力</span></span></div>
<div style="border: 1px solid #4dac26; padding: 10px; color: #000000; font-weight: bold;">ここに文字を入力<br />改行はShift+Enter</div></div>
7月4日:なしの日(梨の葉っぱ部分の色)
梨の葉の色はこれ
#2e7c11
rgb(46,124,17)
シンプルな囲み枠(角が丸・文字によって長さが変わるタイプ)
イメージ
改行はShift+Enter
<div style="border: 5px solid #2e7c11; padding: 10px; border-radius: 10px; display: inline-block;"><span style="color: #000000;">ここに文字を入力<br />改行はShift+Enter</span></div>
ポイント付き付せん風囲み枠(文字によって長さが変わるタイプ)
イメージ
サンプルです
<div style="border: #2e7c11 solid 1px; border-left: #2e7c11 solid 13px; padding: 10px; background: #ffffff; display: inline-block;">ポイント付き付せん風囲み枠<br />サンプルです</div>
タイトル付き囲み枠(文字によって長さ変化なしタイプ)
イメージ
<div><div style="background: #2e7c11; border: 1px solid #2e7c11; padding-left: 10px; color: #ffffff; font-weight: bold;"><span style="font-size: 1.4em;"><span style="font-weight: bold;">タイトル入力</span></span></div>
<div style="border: 1px solid #2e7c11; padding: 10px; color: #000000; font-weight: bold;">ここに文字を入力<br />改行はShift+Enter</div></div>
7月6日:記念日の日(枠の色)
#4ca335
rgb(76,163,53)
シンプルな囲み枠(角が丸・文字によって長さが変わるタイプ)
イメージ
改行はShift+Enter
<div style="border: 5px solid #4ca335; padding: 10px; border-radius: 10px; display: inline-block;"><span style="color: #000000;">ここに文字を入力<br />改行はShift+Enter</span></div>
ポイント付き付せん風囲み枠(文字によって長さが変わるタイプ)
イメージ
サンプルです
<div style="border: #4ca335 solid 1px; border-left: #4ca335 solid 13px; padding: 10px; background: #ffffff; display: inline-block;">ポイント付き付せん風囲み枠<br>サンプルです</div>
タイトル付き囲み枠(文字によって長さ変化なしタイプ)
イメージ
<div><div style="background: #4ca335; border: 1px solid #4ca335; padding-left: 10px; color: #ffffff; font-weight: bold;"><span style="font-size: 1.4em;"><span style="font-weight: bold;">タイトル入力</span></span></div>
<div style="border: 1px solid #4ca335; padding: 10px; color: #000000; font-weight: bold;">ここに文字を入力<br />改行はShift+Enter</div></div>
7月11日:真珠記念日の日(真珠貝の色)
真珠貝の色はこれ
#17e3d8
rgb(23,227,216)
シンプルな囲み枠(角が丸・文字によって長さが変わるタイプ)
改行はShift+Enter
<div style="border: 5px solid #17e3d8; padding: 10px; border-radius: 10px; display: inline-block;"><span style="color: #000000;">ここに文字を入力<br />改行はShift+Enter</span></div>
ポイント付き付せん風囲み枠(文字によって長さが変わるタイプ)
イメージ
サンプルです
<div style="border: #17e3d8 solid 1px; border-left: #17e3d8 solid 13px; padding: 10px; background: #ffffff; display: inline-block;">ポイント付き付せん風囲み枠<br>サンプルです</div>
タイトル付き囲み枠(文字によって長さ変化なしタイプ)
イメージ
<div><div style="background: #17e3d8; border: 1px solid #17e3d8; padding-left: 10px; color: #ffffff; font-weight: bold;"><span style="font-size: 1.4em;"><span style="font-weight: bold;">タイトル入力</span></span></div>
<div style="border: 1px solid #17e3d8; padding: 10px; color: #000000; font-weight: bold;">ここに文字を入力<br />改行はShift+Enter</div></div>
7月28日:第一次世界大戦の日(プロペラ機本体の色)
プロペラ機本体の色はこれ
#55663c
rgb(85,102,60)
シンプルな囲み枠(角が丸・文字によって長さが変わるタイプ)
イメージ
改行はShift+Enter
<div style="border: 5px solid #55663c; padding: 10px; border-radius: 10px; display: inline-block;"><span style="color: #000000;">ここに文字を入力<br />改行はShift+Enter</span></div>
ポイント付き付せん風囲み枠(文字によって長さが変わるタイプ)
イメージ
サンプルです
<div style="border: #55663c solid 1px; border-left: #55663c solid 13px; padding: 10px; background: #ffffff; display: inline-block;">ポイント付き付せん風囲み枠<br />サンプルです</div>
タイトル付き囲み枠(文字によって長さ変化なしタイプ)
イメージ
<div><div style="background: #55663c; border: 1px solid #55663c; padding-left: 10px; color: #ffffff; font-weight: bold;"><span style="font-size: 1.4em;"><span style="font-weight: bold;">タイトル入力</span></span></div>
<div style="border: 1px solid #55663c; padding: 10px; color: #000000; font-weight: bold;">ここに文字を入力<br />改行はShift+Enter</div></div>
7月31日:パラグライダーの日(パイロットの服の色)
パイロットの服の色はこれ
#27b495
rgb(39,180,149)
シンプルな囲み枠(角が丸・文字によって長さが変わるタイプ)
イメージ
改行はShift+Enter
<div style="border: 5px solid #27b495; padding: 10px; border-radius: 10px; display: inline-block;"><span style="color: #000000;">ここに文字を入力<br />改行はShift+Enter</span></div>
ポイント付き付せん風囲み枠(文字によって長さが変わるタイプ)
イメージ
サンプルです
<div style="border: #27b495 solid 1px; border-left: #27b495 solid 13px; padding: 10px; background: #ffffff; display: inline-block;">ポイント付き付せん風囲み枠<br />サンプルです</div>
タイトル付き囲み枠(文字によって長さ変化なしタイプ)
イメージ
<div><div style="background: #27b495; border: 1px solid #27b495; padding-left: 10px; color: #ffffff; font-weight: bold;"><span style="font-size: 1.4em;"><span style="font-weight: bold;">タイトル入力</span></span></div>
<div style="border: 1px solid #27b495; padding: 10px; color: #000000; font-weight: bold;">ここに文字を入力<br />改行はShift+Enter</div></div>
違う色はこちらから
ほかの色が見たい方、印刷用色見本ダウンロードはこちらから探してください。(毎日更新中)
いいなぁ、あんなのどうしたらできるんだろ~
と
指をくわえて見てる方、
「よし、私もやってみよう!」
となりましたか?
【おまけ】自分で好きな色の枠を作りたい方へ
現在アメブロのブログスタンプのカラーコードを集める「アメブロブログスタンプコレクション」を作成中。
プロが作る絶妙な色合いのスタンプ枠の色が一目でわかる優れものですよ。
でもとりあえず、枠の色を自分で変えたい方はこちらがおススメ。
dashed #cbdcf6;やなど、ピンク文字のところにコードを書き替えるだけ!
その他の教室支援記事はこちら
③アメブロテンプレート別メニューバーの色が変更できます。今使ってる素敵なテンプレートにそのままコピペでOK
④アメブロのブログスタンプの色コレクション♡お気に入りの色があったら、囲み枠やメニューバーの色に使ってみてね。(日々更新中)
①Skypeの無料会議室「Meet Now」の使い方を丁寧に解説。オンラインサロンを始めてみたい、Zoomから乗り換えたい方必見。
②【windows10】Skypeの無料会議室「Meet Now」で音声が聞こえない時に試してほしい事。最後の手段です。
①LINE公式アカウントに登録して、オンラインサロンに来てもらおう。登録方法を画面で分かりやすく説明します。
②【LINE公式アカウント登録マニュアル②】アカウントを登録したら、個人用LINEを使って応答のテストをしてみましょう。
①誰でも先生に!Zoomの無料アカウントで『90分のオンライン教室』を作る方法
アメブロではその日のラッキーデーのポイントや、ちょっとしたことを更新しています。
よろしければこちらもご覧ください。
今日も最後までお読みいただきありがとうございました。
サロン経営での困ったをお助けします。
浮いた時間であなたのやりたいことができますように。
あなたの才能をパソコン仕事で削らないで。
あなたしか出来ないことに力を注いでくださいね。
あなたの心に優しく寄り添います。
講師:杏純(アンジュ)・ケイト
今すぐアフィリエイトをしてみたい初心者におすすめ!
登録無料・審査なし!
セルフバックですぐにブログからの収入が得られるんですよ。
しかも今ブログを持っていなくても登録できるんです。
一度覗いてみる価値ありますよ。
まずはここから始めてみるのがいいですよ。
ここもお勧め。
キャッシュバックも充実。
チリも積もれば山となる。
そして何より「報酬振込手数料」が「もしも」負担。
全額自分の報酬になるのが、何気にうれしい♡
ここは審査結構厳しめです。
でもふるさと納税や
ぐるなび、食べログ、一休をいつも使ってる方は必見!
広告を作成しなくても、自己購入で収入が発生。
しかも振込手数料は無料。
1000円から収入をもらえます。
思った以上にちょっとしたお小遣いになりますよ
エックスサーバーは質問すると、ホントにすぐ丁寧なお返事がきました。
ビックリ!
時々キャンペーンやってます。
そういうキャンペーン中に申し込むのが一番お得!
しかもWordPressクイックスタート実施中!月額900円(税抜)から、高速・多機能・高安定レンタルサーバー『エックスサーバー』