今日は半日、アメブロを弄っていました。←暇人とか言わないで

比較的新しめのbackdrop-filterが使えない訳がないと思い、粘り続け…何とか実装できました

【パターン１】

★ここに文章を入力★

背景に画像を指定してバナーのような見た目に編集できます。

HTML編集をしてから通常表示に切り替えればAmebaさんのUIを使用しての編集も可能です！

HTML編集画面にコピーペースト▼

<p> </p>
<div style="background:url('画像のURL') no-repeat center top; background-size:cover;">
<div style="padding:2em;">
<div style="padding:1em; backdrop-filter:brightness(30%);">
<p style="color:#fff;">★ここに文章を入力★</p>
<p style="color:#fff;">背景に画像を指定してバナーのように編集できます。</p>
<p style="color:#fff;">HTML編集をしてから通常表示に切り替えればAmebaさんのUIを使用しての編集も可能です！</p></div></div></div>
<p> </p>

【パターン２】

★ここに文章を入力★

背景に画像を指定してバナーのような見た目に編集できます。

HTML編集をしてから通常表示に切り替えればAmebaさんのUIを使用しての編集も可能です！

HTML編集画面にコピーペースト▼

<p> </p>
<div style="background:url('画像のURL') no-repeat center top; background-size:cover;">
<div style="padding:2em;">
<div style="padding:1em; backdrop-filter:blur(14px);">
<p style="color:#000;">★ここに文章を入力★</p>
<p style="color:#000;">背景に画像を指定してバナーのように編集できます。</p>
<p style="color:#000;">HTML編集をしてから通常表示に切り替えればAmebaさんのUIを使用しての編集も可能です！</p></div></div></div>
<p> </p>

【説明】

簡単に説明します。

backgroundが背景指定になります。

ここに、アップロードした画像が保管されている場所(URL)を記述。

これを1枚だけ、繰り返さないで～！と指示。(ノーリピート)

中央の上から表示してね！(center top) ←この辺は曖昧(ぇ

背景のサイズは幅に合わせて～(cover)…な、指示。←完璧に合わせるのではなく馴染ませてくれます。

ショートハンドで全項目記述しようとするとうまくいかなかったんで、如月が初回に見てたテキストを参考に若干分けたんです。

そしたら反映したという…

そして、構造は……

本当はこんな教え方する先生は居ないと思うんだけど、如月は引き出しやお道具箱を真上から見た感じを想像してもらっています。

引き出しの中の底板が、最初の<div style="～">(backgroundを指定してる部分)。

その中に入る収納容器が2個目の<div style="～">で、内側に2文字分の余白を設けてくれ～と指示を記述しています。←正確に2文字なのかは曖昧(ｫｨ

更に、その収納容器の中に入った収納容器が3個目の<div style="～">で、文字の背景にフィルターを付けて～(文章の入った容器の底板を加工してくれ～)って指示をしている感じです。

*文字の入った容器にも、内側に1文字分の余白を～と、記述しています。

背景の画像の種類によって使い分け、文章を読みやすくしましょう！

因みに！

cover を contain にすると、高さ(縦のサイズ)に合わせて背景が入ります。

如月はパターン１のブライトネスが大好きです

因みの、因み。

背景画像に使ったのはfondanに包まれたスムダさんです。

お顔が登場！

left bottom指定

こんな感じで表示されます。

被写体の位置に合わせて center top の部分を、center (画像中央から表示)にしたり、center left (左中央から表示)や、center right (右中央)にしたり…

使用したスムダさんの画像は左下にお顔があったので、 left bottom に書き変え。

背景が全然違うと思います。

バナーみたいなレイアウトでHTML編集♪

今日も楽しかった

これからも時々HTML編集してブログを更新しようと思っています。

応援してくれる方は、下にある『いいね』をポチっとお願いします。

Thanks！

背景画像にフィルターを実装する【HTML編集で入り組んだCSS装飾】