ピンク系のシンプルな囲み枠線

ピンク系のシンプルな囲み枠線

2022.06.12

アメブロの文章に囲み枠を使うと、読みやすくわかりやすくなります。

囲み枠の下の『Copy』ボタンを押すとコードがコピーできるので、アメブロの『HTML表示』に貼り付けてくださいね。

シンプルな囲み枠

本文はここに入力してください。改行はShift+Enterで!
<p>&nbsp;</p><div style="border: 2px solid #FFD6EA; padding: 15px;">本文はここに入力してください。改行はShift+Enterで!</div><p>&nbsp;</p>
↑ Copy
本文はここに入力してください。改行はShift+Enterで!
<p>&nbsp;</p><div style="border: 2px solid #FFB6C8; padding: 15px;">本文はここに入力してください。改行はShift+Enterで!</div><p>&nbsp;</p>
↑ Copy
本文はここに入力してください。改行はShift+Enterで!
<p>&nbsp;</p><div style="border: 2px solid #FF7FAA; padding: 15px;">本文はここに入力してください。改行はShift+Enterで!</div><p>&nbsp;</p>
↑ Copy
本文はここに入力してください。改行はShift+Enterで!
<p>&nbsp;</p><div style="border: 2px solid #E37995; padding: 15px;">本文はここに入力してください。改行はShift+Enterで!</div><p>&nbsp;</p>
↑ Copy

二重線の囲み枠

本文はここに入力してください。改行はShift+Enterで!
<p>&nbsp;</p><div style="border: 4px double #FFD6EA; padding: 15px;">本文はここに入力してください。改行はShift+Enterで!</div><p>&nbsp;</p>
↑ Copy
本文はここに入力してください。改行はShift+Enterで!
<p>&nbsp;</p><div style="border: 4px double #FFB6C8; padding: 15px;">本文はここに入力してください。改行はShift+Enterで!</div><p>&nbsp;</p>
↑ Copy
本文はここに入力してください。改行はShift+Enterで!
<p>&nbsp;</p><div style="border: 4px double #FF7FAA; padding: 15px;">本文はここに入力してください。改行はShift+Enterで!</div><p>&nbsp;</p>
↑ Copy
本文はここに入力してください。改行はShift+Enterで!
<p>&nbsp;</p><div style="border: 4px double #E37995; padding: 15px;">本文はここに入力してください。改行はShift+Enterで!</div><p>&nbsp;</p>
↑ Copy

点線の囲み枠

本文はここに入力してください。改行はShift+Enterで!
<p>&nbsp;</p><div style="border: 2px dotted #FFD6EA; padding: 15px;">本文はここに入力してください。改行はShift+Enterで!</div><p>&nbsp;</p>
↑ Copy
本文はここに入力してください。改行はShift+Enterで!
<p>&nbsp;</p><div style="border: 2px dotted #FFB6C8; padding: 15px;">本文はここに入力してください。改行はShift+Enterで!</div><p>&nbsp;</p>
↑ Copy
本文はここに入力してください。改行はShift+Enterで!
<p>&nbsp;</p><div style="border: 2px dotted #FF7FAA; padding: 15px;">本文はここに入力してください。改行はShift+Enterで!</div><p>&nbsp;</p>
↑ Copy
本文はここに入力してください。改行はShift+Enterで!
<p>&nbsp;</p><div style="border: 2px dotted #E37995; padding: 15px;">本文はここに入力してください。改行はShift+Enterで!</div><p>&nbsp;</p>
↑ Copy

破線の囲み枠

本文はここに入力してください。改行はShift+Enterで!
<p>&nbsp;</p><div style="border: 2px dashed #FFD6EA; padding: 15px;">本文はここに入力してください。改行はShift+Enterで!</div><p>&nbsp;</p>
↑ Copy
本文はここに入力してください。改行はShift+Enterで!
<p>&nbsp;</p><div style="border: 2px dashed #FFB6C8; padding: 15px;">本文はここに入力してください。改行はShift+Enterで!</div><p>&nbsp;</p>
↑ Copy
本文はここに入力してください。改行はShift+Enterで!
<p>&nbsp;</p><div style="border: 2px dashed #FF7FAA; padding: 15px;">本文はここに入力してください。改行はShift+Enterで!</div><p>&nbsp;</p>
↑ Copy
本文はここに入力してください。改行はShift+Enterで!
<p>&nbsp;</p><div style="border: 2px dashed #E37995; padding: 15px;">本文はここに入力してください。改行はShift+Enterで!</div><p>&nbsp;</p>
↑ Copy
       
\ Share /
MENU