１ページの中で多用すると、効果が半減しますので注意して使いましょう。
見出し中（ｈ２）を文章として利用した例
新着情報
<h2 style="text-shadow: none; position: relative;">
最新情報
<span style="line-height: 1; font-size: 100%; background:
#f00; color: #fff; display: inline-block; position: absolute; top: -0.5em; right: 0.5em; padding: 0.5em; transform: rotate(-10deg);box-shadow:2px 2px 3px
rgba(0,0,0,0.3)">新着情報</span>
</h2>
上記のタグをコピーし、文章の『ＨＴＭＬを編集』を開いて、貼り付けて、保存します。
このまま貼り付ければ、通常は、使用中の見出しと同じ用に表示され、右側に赤枠の白抜き文字を貼り付けることが出来ます。
見出し小にしたい時は、先頭と、末尾にある「h2」の文字を「h3」に置き換えれるだけです。
見出し小（h3）として利用した例
新着情報
バリエーション｜赤文字の箇所を追加または書き換えるだけ
赤枠を角丸にした時の見え方
新着情報
<h2 style="text-shadow: none; position: relative; color:#fff;">赤枠を角丸にした時の見え方<br /> <span style="line-height: 1; font-size: 100%; background: #f00; color: #fff; display: inline-block; position: absolute; top: -0.5em; right: 0.5em; padding: 0.5em; transform: rotate(-10deg); box-shadow: 2px 2px 3px rgba(0,0,0,0.3); border-radius: 20px;"> 新着情報</span></h2>
赤枠の背景を白に、文字を赤にした見え方
新着情報
<h2 style="text-shadow: none; position: relative; color:#fff;">赤枠の背景を白に、文字を赤にした見え方<br /> <span style="line-height: 1; font-size: 100%; background: #FFF; color: #F00; display: inline-block; position: absolute; top: -0.5em; right: 0.5em; padding: 0.5em; transform: rotate(-10deg); box-shadow: 2px 2px 3px rgba(0,0,0,0.3);"> 新着情報</span></h2>
赤枠内の文章を前にもってきて、さらに長文にしてみた場合の見え方
結構長い文章でも全然イケちゃいます！
<h2 style="text-shadow: none; position: relative; color:#fff;">赤枠内の文章を前にもってきて、さらに長文にしてみた場合の見え方<br /><span style="position: absolute; top: -2em; left: -0.5em; line-height: 1; font-size: 100%; background: #F00; color: #fff; display: inline-block; padding: 0.5em; transform: rotate(-4deg); box-shadow: 2px 2px 3px rgba(0,0,0,0.3);">結構長い文章でも全然イケちゃいます！</span></h2>
上記の表示で文字を少し小さくしてみた場合
結構長い文章でも全然イケちゃいます！
<h2 style="text-shadow: none; position: relative; color:#fff;">上記の表示で文字を少し小さくしてみた場合<br /> <span style="position: absolute; top: -2em; left: -0.5em; ; line-height: 1; font-size: 70%; background: #F00; color: #fff; display: inline-block; padding: 0.5em; transform: rotate(-4deg); box-shadow: 2px 2px 3px rgba(0,0,0,0.3);"> 結構長い文章でも全然イケちゃいます！</span></h2>
▼ タグの貼り付け方はここ マウスを当てると画像が開きます。
コメントをお書きください