ゆうう兄のまったり奮闘記

ゲームしたりイラスト描いたり、まったりと更新してます。

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

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

ブログでもよく目にするマーカー風の装飾。こんなやつ
これは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の使い方については、こちらの記事で説明していますのでよかったらのぞいてみてください。

【初心者必見】ブログを書く上で便利な5つのCSSとclassについて説明する

 

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

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

ブログ カテゴリーの記事一覧