雪をイメージした囲み枠

今回は雪をイメージした囲み枠を作ってみました！

ふんわりゆきの縁取り枠

<div style="border: 6px solid #ffffff; padding: 15px; box-shadow: 0 0 10px #a3cde8; background: linear-gradient(to bottom, #e3f7ff, #ffffff); border-radius: 15px;">ここにテキストを入力してください。</div>

ここにテキストを入力してください。

透明感のある氷の縁取り枠

<div style="border: 8px double rgba(173, 216, 230, 0.8); padding: 20px; background: rgba(240, 248, 255, 0.5); border-radius: 12px; backdrop-filter: blur(5px);">ここにテキストを入力してください。</div>

ここにテキストを入力してください。

雪のアイコンつき囲み枠

<div style="border: 3px solid #a3cde8; padding: 20px; background: #f0f8ff; border-radius: 10px; position: relative;">
<div style="position: absolute; top: -10px; left: 50%; transform: translateX(-50%); font-size: 24px; color: #6fc3df;">❄️ ❄️ ❄️</div>
<div style="position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); font-size: 24px; color: #6fc3df;">❄️ ❄️ ❄️</div>
ここにテキストを入力してください。</div>

❄️ ❄️ ❄️

❄️ ❄️ ❄️

ここにテキストを入力してください。

 

冬真っただ中。

日本海側は災害級の大雪になっています。

きれいだけど、降りすぎも困ったものですね。

たてストライプのレンガ壁風背景

今回は縦ストライプのレンガ壁風背景を作ってみました。

赤レンガの壁風

<div style="background: repeating-linear-gradient(90deg, #b22222, #b22222 20px, #8b0000 20px, #8b0000 40px), repeating-linear-gradient(0deg, #b22222, #b22222 20px, #8b0000 20px, #8b0000 40px); background-size: 40px 40px; padding: 20px;">
<div style="background-color: rgba(255, 255, 255, 0.8); border: none; width: 94%; padding: 10px;">ここに文字</div>
</div>

ここに文字

グレーのシンプルレンガ風

<div style="background: repeating-linear-gradient(90deg, #a9a9a9, #a9a9a9 30px, #808080 30px, #808080 60px), repeating-linear-gradient(0deg, #a9a9a9, #a9a9a9 30px, #808080 30px, #808080 60px); background-size: 60px 60px; padding: 20px;">
<div style="background-color: rgba(255, 255, 255, 0.8); border: none; width: 94%; padding: 10px;">ここに文字</div>
</div>

ここに文字

アイボリーの柔らかいレンガ風

<div style="background: repeating-linear-gradient(90deg, #f5f5dc, #f5f5dc 25px, #dcdcdc 25px, #dcdcdc 50px), repeating-linear-gradient(0deg, #f5f5dc, #f5f5dc 25px, #dcdcdc 25px, #dcdcdc 50px); background-size: 50px 50px; padding: 20px;">
<div style="background-color: rgba(255, 255, 255, 0.8); border: none; width: 94%; padding: 10px;">ここに文字</div>
</div>

ここに文字

ダークブラウンの重厚なレンガ風

<div style="background: repeating-linear-gradient(90deg, #3e2723, #3e2723 30px, #1b1b1b 30px, #1b1b1b 60px), repeating-linear-gradient(0deg, #3e2723, #3e2723 30px, #1b1b1b 30px, #1b1b1b 60px); background-size: 60px 60px; padding: 20px;">
<div style="background-color: rgba(255, 255, 255, 0.8); border: none; width: 94%; padding: 10px;">ここに文字</div>
</div>

ここに文字

自分で色を変えたい場合はこちらを参考に。

WEB色見本 原色大辞典 - HTMLカラーコード

レンガ風というよりただのストライプの枠になってるかも！？

チョコレート風飾り枠

もうすぐバレンタイン！ということでチョコレート風飾り枠を作ってみました

板チョコ風飾り枠

<div style="border: 10px solid #5a3e2b; background: linear-gradient(45deg, #8b5e3c 25%, #5a3e2b 25%, #5a3e2b 50%, #8b5e3c 50%, #8b5e3c 75%, #5a3e2b 75%); background-size: 40px 40px; padding: 20px; color: #ffffff; font-family: 'Arial', sans-serif; text-align: center; border-radius: 10px;">
<h2>🍫 チョコレートの甘いひととき 🍫</h2>
<p>美味しいチョコレートとともに、素敵な時間を過ごしましょう。</p>
</div>

🍫 チョコレートの甘いひととき 🍫

美味しいチョコレートとともに、素敵な時間を過ごしましょう。

つぶつぶチョコ付き飾り枠

<div style="padding: 20px; background: #ffe4c4; border: 2px solid #5a3e2b; border-radius: 10px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); position: relative; text-align: center; font-family: 'Arial', sans-serif; color: #5a3e2b;">
<h2>チョコソースの誘惑</h2>
<p>濃厚なチョコレートの香りに癒される時間。</p>
<div style="position: absolute; top: -20px; left: 50%; transform: translateX(-50%); width: 100%; height: 20px; background: radial-gradient(circle, #5a3e2b 60%, transparent 70%); background-size: 20px 20px; z-index: 1;"> </div>
</div>

チョコソースの誘惑

濃厚なチョコレートの香りに癒される時間。

 

トリュフ風円形飾り枠 

<div style="padding: 20px; background: radial-gradient(circle, #8b5e3c, #5a3e2b); border: 5px solid #3e2a1f; border-radius: 50%; width: 300px; height: 300px; display: flex; justify-content: center; align-items: center; margin: 20px auto; text-align: center; color: #ffffff; font-family: 'Georgia', serif;"> <div> <h2>トリュフの魔法</h2> <p>心もとろけるスイーツの魅力。</p> </div> </div>

トリュフの魔法

心もとろけるスイーツの魅力。

チョコの香りが漂ってきそう。おいしそうですね！

２重線を使った囲み枠

今回は２重線を使った囲み枠を作ってみました！

２重線と点線の組み合わせ

ピンク

<div style="border-top: 5px double #ffb6c1; border-bottom: 5px double #ffb6c1; border-left: 3px dashed #ff69b4; border-right: 3px dashed #ff69b4; padding: 20px; text-align: center;">パステルカラーのかわいい枠です</div>

パステルカラーのかわいい枠です

ミント

<div style="border-top: 5px double #98fb98; border-bottom: 5px double #98fb98; border-left: 3px dashed #2ecc71; border-right: 3px dashed #2ecc71; padding: 20px; text-align: center;">ミントグリーンの爽やかな枠です</div>

ミントグリーンの爽やかな枠です

パープルとイエロー

<div style="border-top: 5px double #8e44ad; border-bottom: 5px double #8e44ad; border-left: 3px dashed #f1c40f; border-right: 3px dashed #f1c40f; padding: 20px; text-align: center;">パープルとイエローのポップな枠です</div>

パープルとイエローのポップな枠です

内側にシャドウ

パープル

<div style="border: 5px double #8e44ad; padding: 20px; text-align: center; box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);">シャドウをつけた二重線の枠です</div>

シャドウをつけた二重線の枠です

 

ピンク

<div style="border: 5px double #f5b1aa; padding: 20px; text-align: center; box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);">シャドウをつけた二重線の枠です</div>

シャドウをつけた二重線の枠です

シャドウが入るとちょっと立体的にみえますね！

新年がいつのまにかスタートしていた

🌸 謹賀新年 🌸

今年も素敵な一年になりますように。

梅 花

クリスマス風の囲い枠とか、用意していたにもかかわらずいつの間にか年が明けて新年になっていました。

あけましておめでとうございます🎍

昨年後半はばたばたとして落ち着かない日々でしたが

またぼちぼちとやっていけたらと思っております。

今年もどうぞよろしくお願いいたします

宝石をイメージした背景

今回は宝石をイメージした背景を作ってみました！

落ち着いたダイアモンド

<div style="background-image: linear-gradient(to bottom right, #ffffff, #e0e0e0, #b0b0b0); padding: 20px; color: #000;">
<p style="text-align: center;">ここに本文</p>
</div>

ここに本文

落ち着いたダイアモンドのイメージ。

輝くダイヤモンド

<div style="background-image: linear-gradient(to right, #c9c9c9, #ffffff, #c9c9c9, #ffffff, #c9c9c9); padding: 20px; color: #000;">
<p style="text-align: center;">ここに本文</p>
</div>

ここに本文

輝くダイアモンドのイメージ

ゴールドとシルバー

<div style="background-image: linear-gradient(to bottom, #ffd700, #ffffff, #c0c0c0); padding: 20px; color: #000;">
<p style="text-align: center;">ここに本文</p>
</div>

ここに本文

ゴールドとシルバーのイメージ。

ダイヤモンドとリングの絵文字をちりばめた背景

<div style="border: 5px solid #ffffff; padding: 20px; background-color: #f0f8ff; background-image: url('\'\''); font-size: 20px; text-align: center;">💎💍💎💍💎💍💎💍💎💍
<p>ダイヤモンドの輝き</p>
💍💎💍💎💍💎💍💎💍💎</div>

💎💍💎💍💎💍💎💍💎💍

ダイヤモンドの輝き

💍💎💍💎💍💎💍💎💍💎

カラフルな宝石箱の背景

<div style="border: 5px double #ff69b4; padding: 20px; background-color: #fff0f5; text-align: center;">💎🔷🔶🟢💎🔷🔶🟢💎 
<p>カラフルな宝石箱</p>
💎🔶🟢🔷💎🟢🔶🔷💎</div>

💎🔷🔶🟢💎🔷🔶🟢💎 

カラフルな宝石箱

💎🔶🟢🔷💎🟢🔶🔷💎

ゴールドと宝石の背景

<div style="border: 5px solid gold; padding: 20px; background-color: #fffbe6; text-align: center;">💎🟡🔷💍💎🟡🔷💍💎🟡🔷
<p>宝石とゴールドの輝き</p>
🟡💍💎🔷🟡💍💎🔷🟡💍💎</div>

💎🟡🔷💍💎🟡🔷💍💎🟡🔷

宝石とゴールドの輝き

🟡💍💎🔷🟡💍💎🔷🟡💍💎

ゴールドとダイヤの背景

<div style="border: 5px solid #4b0082; padding: 20px; background-color: #f0e68c; text-align: center;">💠💎💠💎💠💎💠💎💠💎
<p>ここに本文</p>
💠💎💠💎💠💎💠💎💠💎</div>

💠💎💠💎💠💎💠💎💠💎

ここに本文

💠💎💠💎💠💎💠💎💠💎

今日の話題

アメリカの次期大統領はトランプさんにほぼ決まったようですね！

いろんな罪で裁判を受けても、どんな嘘をついても、その人気は衰えることがありません。

ある意味スーパーマンです。

尊敬できる人ではまったくないですが、あの破天荒さには目を離せなくなる魅力があるのも確か。

世界の平和や調和にはまったく興味がなく、アメリカだけよくすることを目指すアメリカ第一主義のトランプさん。

今後の世界の行く末が波乱に満ちたものになるのは間違いなさそうです。

夢をイメージした囲み枠

今回は夢をイメージした囲み枠を作ってみました。

青空の夢枠

<div style="border: 5px dashed #add8e6; background-color: #f0f8ff; padding: 20px; font-size: 20px; text-align: center;">☁️🌙✨ あなたの夢が叶いますように ✨🌙☁️</div>
<div> </div>

☁️🌙✨ あなたの夢が叶いますように ✨🌙☁️

 

水色と夜空の絵文字で夢の世界を表現した囲み枠。

 

 

虹の夢枠

<div style="border: 5px solid #ffb6c1; background-image: linear-gradient(to right, #ffb6c1, #add8e6, #d8bfd8); padding: 20px; font-size: 20px; text-align: center; color: white;">🌈 夢の中で広がるカラフルな世界 🌈</div>
<div> </div>

🌈 夢の中で広がるカラフルな世界 🌈

 

虹色の絵文字とグラデーションで夢の雰囲気を演出した囲み枠。

 

 

夜の夢枠

<div style="border: 5px solid #4b0082; background-color: #1e1e2f; color: #f0e68c; padding: 20px; font-size: 20px; text-align: center;">🌟 夜空に輝く夢 🌟</div>
<div> </div>

🌟 夜空に輝く夢 🌟

 

夜に見る夢の中をイメージした囲み枠。

 

兵庫県知事選挙、パワハラ疑惑で辞めた斎藤さんが出馬してますね。

あんなにいろいろ悪い材料が出ていたのに、すっかり風向きが変わって結構な人気だとか。

不思議です。

さすがに報道されていたことのすべてが嘘で、ほんとはいい人、なんてことはないと思うんですが・・・

世間のイメージってこんなにも簡単に変わってしまうものなんだなあ。

特に今は自分で発信者になることができるので、なにがほんとなのか見極めるのはほんとに難しくなりましたね。