[PR]

2024年04月24日

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

【囲み枠】コピペで使える htmlを使用した[囲み枠]のサンプル集

記事を編集

アメブロはCSSで編集して囲み枠を設定しても、スマホからだと表示されない。
スマホでもPCと同じように表示させるのであればCSSを使用せず、htmlだけで装飾しなければならない。
-------------------------------------------------------------------------------

h3とstrongを使用して強調。

★h3見出し★

<h3><div style="font-size: 160%; padding: 10px; border: 2px solid #97CEC8; border-radius: 10px; color:#FFFFFF; background:#97CEC8;"><strong>★h3見出し★</strong></div></h3>

--------------------------------------------------------------------------------

★タイトル★

■本文■

<div style="background:#97CEC8; font-size:140%; padding:5px 10px; border:2px solid #97CEC8; border-radius:10px 10px 0px 0px; color:#fff; font-weight:bold;"><div>★タイトル★</div></div><div style="background:#ffffff; padding:10px; border-right:2px solid #97CEC8; border-bottom:2px solid #97CEC8; border-left:2px solid #97CEC8; border-radius:0px 0px 10px 10px;"><div>■本文■</div></div>

--------------------------------------------------------------------------

★テキスト★

--------------------------------------------------------------------

★タイトル★

■本文■

<div style="background:#ff9B2C; padding:5px 10px; border:2px solid #ff9B2C; border-radius:10px 10px 0px 0px; color:#fff; font-weight:bold;"><div>★タイトル★</div></div><div style="background:#ffffff; padding:10px; border-right:2px solid #ff9B2C; border-bottom:2px solid #ff9B2C; border-left:2px solid #ff9B2C; border-radius:0px 0px 10px 10px;"><div>■本文■</div></div>

Seesaaブログの自由形式や、アメブロのプラグインなどに記入する時はこっちの方が分かり易くて便利（表示は上と同じ）
↓

<div style="background:#ff9B2C; padding:5px 10px; border:2px solid #ff9B2C; border-radius:10px 10px 0px 0px; color:#fff; font-weight:bold;">

<div>

★タイトル★

</div></div>

<div style="background:#ffffff; padding:10px; border-right:2px solid #ff9B2C; border-bottom:2px solid #ff9B2C; border-left:2px solid #ff9B2C; border-radius:0px 0px 10px 10px;">

<div>

■本文■

</div></div>

-----------------------------------------------------------------------

★本文★

<div style="background:#ffffff; padding:5px 10px; border:2px solid #ff9B2C; border-radius:10px 10px 10px 10px; color:#333333; font-weight:nomal;"><div>★本文★</div></div>

----------------------------------------------------------------------