写真背景囲み枠を文字幅にする方法

昨日、写真背景囲み枠について

 

こういった、写真の囲み枠は
カードタイプのように文字幅で使うことは
困難なものでしょうか？

 

というコメントをいただきました！

ありがとうございますハート

 

写真背景囲み枠も

文字幅でお使いいただけます！

 

文字幅の囲み枠にする方法

 

たとえば、勿忘草の囲み枠でしたら

本文はここに入力してください。
改行はShift+Enterで！

 

<div style="padding:16px;background:url(https://stat.ameba.jp/user_images/20240415/21/atelier-plume-net/fd/97/j/o0650065015426365121.jpg);"><div style="background:rgba(255,255,255,0.6);border:4px double #D0E5EA;padding:20px;">本文はここに入力してください。改行はShift+Enterで！</div></div>

 

↓　↓　↓

 

2ヶ所の<div style="のあとに

display:inline-block;

を入れることで文字幅になります。

 

本文はここに入力してください。
改行はShift+Enterで！

 

<div style="display:inline-block;padding:16px;background:url(https://stat.ameba.jp/user_images/20240415/21/atelier-plume-net/fd/97/j/o0650065015426365121.jpg);"><div style="display:inline-block;background:rgba(255,255,255,0.6);border:4px double #D0E5EA;padding:20px;">本文はここに入力してください。改行はShift+Enterで！</div></div>

 

 

<div style="が1つしかない囲み枠は

display:inline-block;

も1つだけでOKグッ

 

 

文字幅の囲み枠を中央に配置する方法

 

囲み枠を文字幅にして

さらに中央に配置するには

<center></center>

で囲み枠のコードを囲んでくださいキラキラ

 

本文はここに入力してください。
改行はShift+Enterで！

 

<center><div style="display:inline-block;padding:16px;background:url(https://stat.ameba.jp/user_images/20240415/21/atelier-plume-net/fd/97/j/o0650065015426365121.jpg);"><div style="display:inline-block;background:rgba(255,255,255,0.6);border:4px double #D0E5EA;padding:20px;">本文はここに入力してください。改行はShift+Enterで！</div></div></center>

 

 

やり方はいろいろあるので

もしわかりにくい場合は

公式LINEかお問い合わせから

メッセージくださいね！

 

LINEの友だち追加で
「アメブロで使えるかわいいマーカー」
をプレゼントしています！

「マーカー」とメッセージを送ってねドキドキ

友だち追加

ID検索は @570smkow 

 

アメブロ囲み枠