囲み枠を改行で失敗せずにキレイに入れられる方法！

 

囲み枠を使って

ブログを書いていると

改行で変な形になってしまうことってありますよね。

 

 

そんなときは

囲み枠のコードを分けて

入れてみるのがオススメです。

 

 

文章を書いてから囲み枠を入れるので

改行で失敗することがありませんよ音譜

 

 

囲み枠のコードを分けて使う方法
 
① 囲み枠に入れたい文章を先に書く

 

（例）

文字数に合わせてサイズが変わります。

メッセージボードや

記事下定型文におすすめです。

  • グリーン系ストライプ背景
  • グリーン系ストライプ背景と二重線
  • グリーン系ストライプ背景とゴールド直線があります♥
 
 
② 使う囲み枠を選ぶ
 
グリーン①
ストライプ

 

<div style="display:inline-block;padding:8px;background:url(https://stat.ameba.jp/user_images/20200906/19/atelier-plume-net/c3/8a/g/o0050005014815581219.gif);border:1px solid #E8F8FA;"><div style="background:rgba(255,255,255,0.9);padding:20px;border:1px solid #E8F8FA;">本文はここに入力してください。改行はShift+Enterで！</div></div>

 

↑「本文はここに入力してください。

改行はShift+Enterで！」の前までを選択して

 
コピーします。
 
 
③「ブログを書く」のHTML表示をクリック
 
 
 
入れたい文章の<p>の前に
コピーしたコードを貼り付けます。
 
 
③「ブログを書く」の通常表示をクリック
 
 
＼　完成　／
 
通常表示をクリックすることで
「本文はここに入力してください。
改行はShift+Enterで！」の後ろのコードは自動で入ります。
 

ただし
囲み枠を入れる文章の下にも文章があると
その部分も囲んでしまうので
心配な場合はHTML表示のときに
後ろのコードも入れてくださいね！
 
 
 
 
GoogleChromeならコチラが便利
↓↓↓

 

 

 

 

 

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

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

友だち追加

ID検索は @570smkow