ピンク系のシンプルな囲み枠線
ピンク系のシンプルな囲み枠線
2022.06.12
アメブロの文章に囲み枠を使うと、読みやすくわかりやすくなります。
囲み枠の下の『Copy』ボタンを押すとコードがコピーできるので、アメブロの『HTML表示』に貼り付けてくださいね。
シンプルな囲み枠
本文はここに入力してください。改行はShift+Enterで！
<p> </p><div style="border: 2px solid #FFD6EA; padding: 15px;">本文はここに入力してください。改行はShift+Enterで！</div><p> </p>
↑ Copy
本文はここに入力してください。改行はShift+Enterで！
<p> </p><div style="border: 2px solid #FFB6C8; padding: 15px;">本文はここに入力してください。改行はShift+Enterで！</div><p> </p>
↑ Copy
本文はここに入力してください。改行はShift+Enterで！
<p> </p><div style="border: 2px solid #FF7FAA; padding: 15px;">本文はここに入力してください。改行はShift+Enterで！</div><p> </p>
↑ Copy
本文はここに入力してください。改行はShift+Enterで！
<p> </p><div style="border: 2px solid #E37995; padding: 15px;">本文はここに入力してください。改行はShift+Enterで！</div><p> </p>
↑ Copy
二重線の囲み枠
本文はここに入力してください。改行はShift+Enterで！
<p> </p><div style="border: 4px double #FFD6EA; padding: 15px;">本文はここに入力してください。改行はShift+Enterで！</div><p> </p>
↑ Copy
本文はここに入力してください。改行はShift+Enterで！
<p> </p><div style="border: 4px double #FFB6C8; padding: 15px;">本文はここに入力してください。改行はShift+Enterで！</div><p> </p>
↑ Copy
本文はここに入力してください。改行はShift+Enterで！
<p> </p><div style="border: 4px double #FF7FAA; padding: 15px;">本文はここに入力してください。改行はShift+Enterで！</div><p> </p>
↑ Copy
本文はここに入力してください。改行はShift+Enterで！
<p> </p><div style="border: 4px double #E37995; padding: 15px;">本文はここに入力してください。改行はShift+Enterで！</div><p> </p>
↑ Copy
点線の囲み枠
本文はここに入力してください。改行はShift+Enterで！
<p> </p><div style="border: 2px dotted #FFD6EA; padding: 15px;">本文はここに入力してください。改行はShift+Enterで！</div><p> </p>
↑ Copy
本文はここに入力してください。改行はShift+Enterで！
<p> </p><div style="border: 2px dotted #FFB6C8; padding: 15px;">本文はここに入力してください。改行はShift+Enterで！</div><p> </p>
↑ Copy
本文はここに入力してください。改行はShift+Enterで！
<p> </p><div style="border: 2px dotted #FF7FAA; padding: 15px;">本文はここに入力してください。改行はShift+Enterで！</div><p> </p>
↑ Copy
本文はここに入力してください。改行はShift+Enterで！
<p> </p><div style="border: 2px dotted #E37995; padding: 15px;">本文はここに入力してください。改行はShift+Enterで！</div><p> </p>
↑ Copy
破線の囲み枠
本文はここに入力してください。改行はShift+Enterで！
<p> </p><div style="border: 2px dashed #FFD6EA; padding: 15px;">本文はここに入力してください。改行はShift+Enterで！</div><p> </p>
↑ Copy
本文はここに入力してください。改行はShift+Enterで！
<p> </p><div style="border: 2px dashed #FFB6C8; padding: 15px;">本文はここに入力してください。改行はShift+Enterで！</div><p> </p>
↑ Copy
本文はここに入力してください。改行はShift+Enterで！
<p> </p><div style="border: 2px dashed #FF7FAA; padding: 15px;">本文はここに入力してください。改行はShift+Enterで！</div><p> </p>
↑ Copy
本文はここに入力してください。改行はShift+Enterで！
<p> </p><div style="border: 2px dashed #E37995; padding: 15px;">本文はここに入力してください。改行はShift+Enterで！</div><p> </p>
↑ Copy
#シンプル
＼ Share ／