【Simplicity】文章の重要なところにマーカーのような線を引く方法

今回は「重要な文章をマーカーのようなラインで目立たせるカスタマイズ」を紹介したいと思います。

文章の重要ポイントをマーカーで際立たせることにより、長文がとても見やすくなるんですよ。マーカーの部分のみを追っていくことで、大体の内容が入ってきますからね。

長文が苦手なユーザーからすると非常にありがたい配慮。ユーザーの負担激減です。

簡単に出来るのでぜひやってみてください。

文字にマーカーのような線を引く方法

やることは単純。HTMLタグとCSSを使って実装します。

<HTML>

<strong class="half-marker">マーカーを引きたい文章</strong>

<CSS>

.half-marker{
   background: linear-gradient(transparent 70%,#c2f7ff 30%)
}

目立たせたい文章ということで「strongタグ」を使っています。

CSSの背景を操作するプロパティを使うことで、下半分にマーカーのような線を再現。

実際に使うとこんな感じ。

色は自分で好きなカラーコードに変えて使ってみてください。

過去に書いた記事の太字にもマーカーを引きたい場合は、「strongタグ」に直接CSSを適用させてあげればOK。

strong{
   background: linear-gradient(transparent 70%,#c2f7ff 30%)
}

コード作ってる時に分かったんですが、実はSimplicityには元からマーカー線を引く機能が備わっていたみたいです。

HTMLタグのクラス名を「marker」にするだけで、文字の背景が黄色くなります。

こんな感じに。

Simplicityに限らず他のテーマもそうなのかも。

最初はクラス名をmarkerにして作っていたので、CSSを書いてないのに背景が黄色になってちょっと驚きました（笑）

結局それと被らないように、クラス名は「half-marker」にしておきました。

自分で1からサイトを作った場合は心配ないんですが、WordPressのようにCSSとリンクされるHTMLタグの「ID名」や「クラス名」を全て把握しきれていない場合は気を付ける必要がありますね…。

今回のように、すでにあるクラス名の上に別のCSSを適用させると思わぬところでレイアウト崩れが起きかねません。

あの長すぎるスタイルシートに目を通すのは面倒なので、絶対に被らないような名前を付けるように心がけておきたい…。

合わせて読みたい