蛍光マーカー風の下線をCSSの文字装飾で作る方法

URLをコピーしました！

ブログ記事でよく使っている文字の装飾について、先日こんな質問をいただきました。

Mさん

ブログ記事で、本文にカラフルな下線を引いてアイキャッチを促してらっしゃいますが、あれって、WordPressのテーマの仕様ですか？それともCSSやHTMLなんでしょうか？

カラフルな下線というのは、このピンクのラインのこと。

強調したい箇所は赤文字にしたり太字にしたり、みなさん何かしら装飾していますよね。

最近のわたしのお気に入りは蛍光ペンで引いたような下線ライン。テーマの仕様ではなく、CSSとhtmlで指定をしています。

質問をいただいたので、今日はこの蛍光マーカー風の下線の作り方、使い方をお伝えしたいと思います。

CSS？ html？という人でも取り入れていただけるよう、出来るだけかみ砕いて説明していきますね。

蛍光ペン風マーカーをhtmlとCSSで表現する

いつもわたしが使っているピンクの下線は、下記のhtmlとCSSで表現されています。

【html】テキスト
【CSS】.pink_line {background:linear-gradient(transparent 60%, #ffdfef 0%) ;}

ラインの色や太さは自由に変えられるので、マーカーを自分のサイトでも取り入れたい人は、htmlとCSS両方を編集してください。

クラス名を付けてマーカーのスタイルを設定する

まずはCSSの設定から行います。

CSS編集ができるページを開きます。
WordPressを使っている場合は子テーマのstyle.cssに追加をするか、テーマによってはCSSを記述する部分が用意されているのでそこに書いていきます。

無料ブログを使っている人は、CSS編集ページに書いていきます。（CSS編集可能なテンプレートを使っていることが前提です）

マーカーを引くときに使うのは、「linear-gradient」属性。

例えばわたしがいつも使っているピンクの下線は、下記のようにCSSでスタイルを設定しているのですが、主な設定箇所は3つ。

1.クラス名（マーカーの装飾を呼び出すときに使う名前）、2.線の太さ、3.線の色です。

1.クラス名

分かりやすい名前を付けておきます。

2.線の太さ

ここの値は、0～100％の値を設定します。
数値が低いほど、太いラインになります。
0％にすると、文字の背景がべた塗りされた状態になります。

3.線の色

線の色を指定します。
文字の視認性を確保しないといけないので、色が目立ちすぎて読みづらくならないよう気を付けましょう。薄い色や淡い色がベターです。

色のコードはこちらを参考に

色の名前とカラーコードが一目でわかるWEB色見本

蛍光マーカー風CSSサンプル見本

自分でスタイルを設定するのは難しい！
という人は、下記にサンプルを用意したので、自由にコピペして使ってください。

ピンクの太マーカー
.pink_line {background:rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #FFDFEF 0%) repeat scroll 0 0;}

ブルーの太マーカー
.blue_line{background:rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #cce5ff 0%) repeat scroll 0 0;}

イエローの太マーカー
.yellow_line {background:rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #ffffbc 0%) repeat scroll 0 0;}

ピンクの細マーカー
.pink_line_narrow{background:rgba(0, 0, 0, 0) linear-gradient(transparent 80%, #ffb2d8 0%) repeat scroll 0 0;}

ブルーの細マーカー
.blue_line_narrow {background:rgba(0, 0, 0, 0) linear-gradient(transparent 80%, #add6ff 0%) repeat scroll 0 0;}

イエローの細マーカー
.yellow_line_narrow{background:rgba(0, 0, 0, 0) linear-gradient(transparent 80%, #ffff7f 0%) repeat scroll 0 0;}

ブログ記事にhtmlソースを記述する

マーカーの設定をCSSに記述したら、記事編集ページで、マーカーを使いたい箇所にクラス名（pink_lineなどの名前）を指定します。

WordPressの場合はテキストモードで、無料ブログの場合はhtml編集画面で編集してください。

太字にしたくない場合
テキスト

太字にしてSEO的にも強調したい場合（ストロングタグを使うと太字になります。）
テキスト

ワードプレスで使いたい人向け。ボタンひとつでマーカーを入れる方法

ここからは、Wordpressを使っている人へのお役立ち情報です。

毎回、強調したい箇所にhtmlソースを書かないといけないのは面倒くさいですよね。

なので、プラグインを使って挿入作業を簡単にします。

使うのは「AddQuickTag」というプラグイン。

これを使ってあらかじめマーカーの登録をしておくと、記事編集画面でテキストモードにしたときにボタンが出て来ます。わたしもこんな感じで使ってます。

「AddQuickTag」プラグインをインストールする

「AddQuickTag」プラグインのインストールから設定までを説明していきますね。

まず、ワードプレス管理画面のサイドメニュー「プラグイン」→「新規追加」で、「AddQuickTag」を検索します。

※プラグインのインストールは、念のためバックアップ作業を済ませてから行ってください。

検索したら、インストールして有効化。

ボタンで呼び出すhtmlソースを設定する

続いて、マーカーボタンの設定をします。

プラグインを有効化したら、サイドメニューの「設定」に「AddQuickTag」が追加されるので、クリック。

今回はピンクのマーカーをタグで入れます。

ボタン名　記事編集画面に表示されるボタンの名前。
ラベル名　タグの説明。未入力でもOKです。
開始タグと終了タグ　ボタンを押したときに挿入される開始タグと終了タグをそれぞれ入力します。終了タグはなくてもOKです（アイコンを挿入するときなど）
アクセスキーと注文　ボタンを表示する順番。「アクセスキー」はIEで使えるショートカットです。

ボタン名、ラベル名（任意）、開始・終了タグを入力して、右側のチェックボックスにチェックを入れて、「変更を保存」ボタンをクリックします。

ボタンの表示を確認する

ここまで出来たら、記事編集ページを開いてテキストモードにしてみましょう。

ボタンが表示されているはずです。

強調したいテキストを入力して選択→ボタンを押すと、htmlソースが自動的に挿入されます。

また、ビジュアルモードにすると、「Quicktags」というプルダウンメニューが表示されるので、テキストを選択して、プルダウンメニューを選択してもスタイルが適用されます。（スタイルを適用しても、編集画面で見た目は変わらないのでプレビューで確認してください。）

新エディタ「Gutenberg（グーテンベルク）」での使い方

WordPress5.0よりエディタが新しくなりました。

ここからは、新エディタ「Gutenberg（グーテンベルク）」でブログを書くときに下線をひく方法をお伝えしていきます。

以下の4STEPで進めます。

「カスタムhtmlブロック」で、よく使う下線のhtmlソースを入力する
「再利用可能ブロックに追加」を選択し、名前をつけて保存する
「再利用可能ブロック」を呼び出す
「通常のブロックへ変換」を選択し、編集する

動画で流れを確認したい方はこちら↓

よく使う文字装飾などは、再利用ブロックに追加をしておけば都度呼び出せます。慣れるまでは少々ややこしく感じられるかもしれませんが、慣れるとサクサク進められるようになるのでトライしてみてください。

それでも面倒くさい、使いづらいと感じる人は、「Classic Editor」プラグインをインストールすると以前のエディターに戻して使うことができます。

CSSで蛍光ペン風マーカーを引く方法まとめ

長くなりましたが、蛍光ペン風マーカーの使い方をまとめました。
ここぞ！の重要ポイントで、ぜひ使ってみて下さい。

WordPressのカスタマイズ記事、他にも色々書いています。