特定の見出しだけ目立たせたい

1ページの中で多用すると、効果が半減しますので注意して使いましょう。

見出し中(h2)を文章として利用した例
新着情報

<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>

上記のタグをコピーし、文章の『HTMLを編集』を開いて、貼り付けて、保存します。

 

このまま貼り付ければ、通常は、使用中の見出しと同じ用に表示され、右側に赤枠の白抜き文字を貼り付けることが出来ます。

 

見出し小にしたい時は、先頭と、末尾にある「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>


▼ タグの貼り付け方はここ マウスを当てると画像が開きます。

この記事がいいなと思ったらメールマガジンに登録していただけると嬉しいです。
メールアドレスを入力して登録ボタンを押してください。

株式会社 PIK

〒108-0075 港区港南3-4-12

TEL.03-6433-0422