調べものをする時ってネットはすごい便利！検索するとすぐにサイトに辿り着くのですが、そこで凄くわかりやすいサイトとすごく読みにくいサイトがありますよね・・・せっかくブログや記事を書いていても読みにくかったりするともったいないです。

人に伝えたいことや知って欲しいことなどはもっと目立つように記事を書いたほうが良いかなぁ～って思うのですがそんな時に便利なのが背景付囲み枠、蛍光ペン（マーカー）やアンダーライン（下線）です。

今回は簡単にコピペで使用できる蛍光ペンやアンダーライン、囲み枠などいろいろご紹介します。

 

蛍光ペン（マーカー）＆下線（アンダーライン）＋囲み枠などいろいろご紹介！
＃で始まる6文字のカラーコードを変えるといろんな色に変更できます。

 

 

水色のマーカー、下線、囲み枠。

●水色の背景付囲み枠

 

<fieldset style=”background: #99ffff; padding: 10px; border: none;”><strong><span style=”font-size: 20px;”>●水色の背景付囲み枠</span></strong></fieldset>

 

●全体にマーカー

<span style=”background: linear-gradient(transparent 0%, #99ffff 0%);”> ●全体にマーカー</span>

 

●半分薄いマーカー

<span style=”background: linear-gradient(transparent 0%, #99ffff);”>●半分薄いマーカー</span>

 

●アンダーライン

<span style=”background: linear-gradient(transparent 80%, #99ffff 80%); font-size: 20px;”>●アンダーライン</span>

 

●点線の罫線

---

<hr style=”border: 2px dashed #99ffff;” >

 

●タイトル付き囲み枠

 

<div style=”background: #99ffff; border: 1px solid #99ffff; padding-left: 10px; font-size: 1.16em;”><span style=”color: #ffffff; font-weight: bold;”>★タイトル</span></div>
<div style=”border: 1px solid #99ffff; padding: 10px; font-size: 1em;”>ラ・ラ・ライフ<br />
<br />
</div>

※改行は「Shift」キーを押しながら「Enter」キーを押すと改行が挿入されます。

 

●見出し枠

 

<div style=”border-left: 10px solid #99ffff; border-bottom: 3px solid #99ffff; padding-left: 10px; font-weight: bold; font-size: 130%; color: #000000;”>タイトル</div>

 

●見出し

 

<div style=”border-left: 7px solid #99ffff; padding: 13px;”><b>★タイトル</b></div>

これはよく見かけるパターンの見出しです。最初のPXは見出しの太さで⇓は10にしています。次の13pxは高さで⇓は20にしてみました。★タイトルは普通に文字の大きさを変えてください。

 

 

---

アンダーライン

 

★赤いアンダーライン

<span style=”border-bottom: 2px solid red;”>★赤いアンダーライン</span >

 

★赤いアンダーライン

<span style=”border-bottom: 2px solid #ff0000;”>★赤いアンダーライン</span >

※色はredでも＃で始まるカラーコードでもOKです。

 

 

★青いアンダーライン

<span style=”border-bottom: 2px solid blue;”>★青いアンダーライン</span >

 

★黄色いアンダーライン

<span style=”border-bottom: 2px solid #ffff00;”>★黄色いアンダーライン</span >

 

★緑のアンダーライン

<span style=”border-bottom: 2px solid green;”>★緑のアンダーライン</span >

 

いろんな色のアンダーラインや囲み枠、マーカーを使用して可愛くおしゃれなサイトを作ろう！

 

---

カワイイ色のコードをご紹介。

 

●ピンク：【#ffc0cb】

●オレンジ：【#ffa500】

●黄緑　：【#b8d200】

＃で始まる6文字がカラーコードでこれを変えると色を変更できます。

 

カラーコード

 

 

---

その他のアンダーライン

★太いアンダーライン

<span style=”border-bottom: 4px solid red;”>★太いアンダーライン</span >

 

★点線のアンダーライン

<span style=”border-bottom: 2px dotted red;”>★点線のアンダーライン</span >

 

★二重のアンダーライン

<span style=”border-bottom: 4px double red;”>★二重のアンダーライン</span >

 

★カラー（赤）罫線

---

<hr style=”border: 1px solid red;”>

 

---

終わりに。

ワードプレスではブロックエディタでマーカーやアンダーラインを使用できるのですが、ブロックエディタは正直使いづらいです。特にclassic editorに慣れている方は・・・。投稿記事をhtmlやインラインCSSで簡単にコピペしてマーカーやアンダーラインが使用できます。（ワードプレスやあめブロ、はてなブログなど。）

私はこれをＰＣの付箋に張付けてコピペしています。

プラグインなどいろいろあるのですが、正直あまりプラグインを増やしたくないし、CSSもごちゃごちゃにしたくないのです～そういう方多いのではないでしょうか～。

 

　可愛いくっておしゃれなサイトを作りましょう！