【CSS】コピペで簡単！文字(テキスト)の下にマーカーを引く方法

f:id:yuu-tunamayo:20171107123647j:plain

2017.11.28 更新ブログでもよく目にするマーカー風の装飾。←こんなやつ
これはcssを使って、コピペで設定することができます。見た目のクオリティーを簡単に上げることができ、とても便利なのでご紹介します。

はてなブログでは、編集画面のサイドメニュー内「デザイン」をクリック→サイドメニューのカスタマイズアイコンをクリック→「デザインCSS」から、サイト内のcssを編集することができます。

f:id:yuu-tunamayo:20171026170819g:plain

ここにcssをコピペ、または記述することで、自分のブログに設定することができます。

他者様のブログでもよく目にしますよね。実際に私のブログでもよく使用します。

設定するcssは以下の通り。上記の「デザインCSS」の欄にコピペして使用してください。

ここではセレクタを「strong」に設定しています。こうすることによって、記事編集画面の上部にある「太字」を適用させたときに、同時にマーカーも引くことができるようになります。Markdown記法を使用している場合は「strong」を「b」に変更してください。

f:id:yuu-tunamayo:20171107123434g:plain

サンプル（太）

strong {
    background: linear-gradient(transparent 55%, #88c1e2 55%);
}

サンプル（細）

.strong {
    background: linear-gradient(transparent 70%, #88c1e2 70%);
}

マーカーの太さを調整したい場合は、()内の%の数字を変更してください。数値が高いほどマーカーが細くなります。

色を変更する場合は、()内の「#49A0D3」という箇所を、お好きなカラーコードに変更することで調整できます。参考までに何点かサンプルをご用意いたしましたので、自身のサイトにあった色を使用していただければと思います。

サンプル（緑）

strong {
    background: linear-gradient(transparent 70%, #8be5b1 70%);
}

サンプル（緑2）

strong {
    background: linear-gradient(transparent 70%, #85eed9 70%);
}

サンプル（青）

strong {
    background: linear-gradient(transparent 70%, #87c2ea 70%);
}

サンプル（紫）

strong {
    background: linear-gradient(transparent 70%, #c49dd4 70%);
}

サンプル（黄）

strong {
    background: linear-gradient(transparent 70%, #f6db6c 70%);
}

サンプル（赤）

strong {
    background: linear-gradient(transparent 70%, #f08c82 70%);
}

サンプル（オレンジ）

strong {
    background: linear-gradient(transparent 70%, #f0b17a 70%);
}

場面によってマーカーの色を使い分けたい時は、各色のclassを用意しておくのも良いと思います。例としてオレンジのマーカーを別で記述しておいて、html上でclassを指定するという形ですね。

オレンジのマーカーを個別で指定する場合は↓こんな感じで指定することで使い分けができます。

css

strong.orange {
    background: linear-gradient(transparent 70%, #f0b17a 70%);
}

html

<p><strong class="orange">サンプル（オレンジ）</strong></p>

classの使い方については、こちらの記事で説明していますのでよかったらのぞいてみてください。

以上、最後まで読んでいただきありがとうございました！

気に入ってくださった方は、読者登録やブックマークなどしていただけると嬉しいです。（励みになっています！）
よろしくお願いいたします！m(_ _)m

YUUU BroG