Bloggerの記事にコピペで「吹き出し」・「ふせん」・「色付きアンダーライン」 をつける

 

Bloggerの記事にコピペだけで使える囲み枠やアンダーラインを紹介します。

　 コードを張り付ける前に必ず、「HTML ビュー」に切り替えてください。

※編集画面の左上にある「鉛筆▼マーク」を押すと切り替えることができます。

    吹き出し囲み枠    

ここに文字を入れます。

 

この色の吹き出し は↓をコピペして、HTML ビューに張り付けてください。

<div style="display:inline-block; position: relative; margin: 1em 0 1em 20px; border-radius: 10px; border: 2px solid #2f4f4f; font-size: 100%; padding: 20px; "><span style=" position: absolute; display: block; left: -15px; top: 20px; border-right: 15px solid #2f4f4f; border-top: 15px solid transparent; border-bottom: 15px solid transparent; width: 0; height: 0; "></span>ここに文字を入れます。<span style="position: absolute; display: block; left: -12px; top: 20px; border-right: 15px solid #fff; border-top: 15px solid transparent; border-bottom: 15px solid transparent; width: 0; height: 0; "></span></div>

ここに文字を入れます。

 
 この色の吹き出し は↓をコピペして、HTML ビューに張り付けてください。

<div style="display:inline-block; position: relative; margin: 1em 0 1em 20px; border-radius: 10px; border: 2px solid #bbe2f1; font-size: 100%; padding: 20px; "><span style=" position: absolute; display: block; left: -15px; top: 20px; border-right: 15px solid #bbe2f1; border-top: 15px solid transparent; border-bottom: 15px solid transparent; width: 0; height: 0; "></span>ここに文字を入れます。<span style="position: absolute; display: block; left: -12px; top: 20px; border-right: 15px solid #fff; border-top: 15px solid transparent; border-bottom: 15px solid transparent; width: 0; height: 0; "></span></div>

  

ここに文字を入れます。

 
 この色の吹き出し は↓をコピペして、HTML ビューに張り付けてください。

<div style="display:inline-block; position: relative; margin: 1em 0 1em 20px; border-radius: 10px; border: 2px solid #ffd700; font-size: 100%; padding: 20px; "><span style=" position: absolute; display: block; left: -15px; top: 20px; border-right: 15px solid #ffd700; border-top: 15px solid transparent; border-bottom: 15px solid transparent; width: 0; height: 0; "></span>ここに文字を入れます。<span style="position: absolute; display: block; left: -12px; top: 20px; border-right: 15px solid #fff; border-top: 15px solid transparent; border-bottom: 15px solid transparent; width: 0; height: 0; "></span></div>

  

ここに文字を入れます。

 
  この色の吹き出し は↓をコピペして、HTML ビューに張り付けてください。

<div style="display:inline-block; position: relative; margin: 1em 0 1em 20px; border-radius: 10px; border: 2px solid #ffc0cb; font-size: 100%; padding: 20px; "><span style=" position: absolute; display: block; left: -15px; top: 20px; border-right: 15px solid #ffc0cb; border-top: 15px solid transparent; border-bottom: 15px solid transparent; width: 0; height: 0; "></span>ここに文字を入れます。<span style="position: absolute; display: block; left: -12px; top: 20px; border-right: 15px solid #fff; border-top: 15px solid transparent; border-bottom: 15px solid transparent; width: 0; height: 0; "></span></div>

  

ここに文字を入れます。

 この色の吹き出し は↓をコピペして、HTML ビューに張り付けてください。

<div style="display:inline-block; position: relative; margin: 1em 0 1em 20px; border-radius: 10px; border: 2px solid #dcdcdc; font-size: 100%; padding: 20px; "><span style=" position: absolute; display: block; left: -15px; top: 20px; border-right: 15px solid #dcdcdc; border-top: 15px solid transparent; border-bottom: 15px solid transparent; width: 0; height: 0; "></span>ここに文字を入れます。<span style="position: absolute; display: block; left: -12px; top: 20px; border-right: 15px solid #fff; border-top: 15px solid transparent; border-bottom: 15px solid transparent; width: 0; height: 0; "></span></div>

    ふせん囲み枠   

ここに文字を入れます。

この色のふせん は↓をコピペして、HTML ビューに張り付けてください。 

<div style="background: #ccccbb; opacity: 0.2; transform: rotate(3deg); width: 35%; height: 35px; margin: 0 auto -1em auto;"></div>
<div style="background: #f0ffff; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.15); padding: 25px 15px 15px 15px;">
<p style="margin: 0;">ここに文字を入れます。</p></div>
<p>&nbsp;</p>

ここに文字を入れます。

この色ふせん は↓をコピペして、HTML ビューに張り付けてください。 

<div style="background: #ccccbb; opacity: 0.2; transform: rotate(3deg); width: 35%; height: 35px; margin: 0 auto -1em auto;"></div>
<div style="background: #ffffb7; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.15); padding: 25px 15px 15px 15px;">
<p style="margin: 0;">ここに文字を入れます。</p></div>
<p>&nbsp;</p>

ここに文字を入れます。

 この色のふせん は↓をコピペして、HTML ビューに張り付けてください。 

<div style="background: #ccccbb; opacity: 0.2; transform: rotate(3deg); width: 35%; height: 35px; margin: 0 auto -1em auto;"></div>
<div style="background: #e9dfe5; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.15); padding: 25px 15px 15px 15px;">
<p style="margin: 0;">ここに文字を入れます。</p></div>
<p>&nbsp;</p>

    色付きアンダーライン    

 

ここに文字を入れます。 

 この色のアンダーラインは↓をコピペして、HTML ビューに張り付けてください。 

<span style="background: linear-gradient(transparent 50%, #ffffa3 0%);"> ここに文字を入れます。</span>

ここに文字を入れます。

この色のアンダーラインは↓をコピペして、HTML ビューに張り付けてください。 

<span style="background: linear-gradient(transparent 50%, #b2ffff 0%);"> ここに文字を入れます。</span>

 ここに文字を入れます。

この色のアンダーラインは↓をコピペして、HTML ビューに張り付けてください。

<span style="background: linear-gradient(transparent 50%, #ffb2d8 0%);"> ここに文字を入れます。</span>

　今日は英語とは関係のない内容でしたが、英語例文を書くにあたって、このような装飾をつけるのに毎回とても苦労するので、自分の備忘録としてもまとめてみました。

　もしお役に立てるのであれば、ぜひコピペして使ってみてください。