AddQuickTagとCSSのコピペで文字に蛍光ペン風のマーカーを引く方法。
Meditations / Pixabay
スポンサーリンク

記事の文字に、背景色を付けて、文字を目立たせる。

僕も結構やってたなぁ~うんうん。

こんな感じ。

でもでも、もっといい方法があったんだよねぇ~(^▽^)/

文字に蛍光ペン風のマーカーって、どう?

うんうん、なかなかいいよね!

自然な感じも出るし、それでいて見やすさもアップしているような…。

まぁこんな蛍光ペン風のマーカーを引くのもとっても簡単だったので…。

ここにやり方をメモしておこうかなぁと思います。

というわけで、今回の記事の内容としては…

 

本記事の内容

  • 文字に蛍光ペン風のマーカーが引けるようになる
  • AddQuickTagの使い方がわかる

この2点です!ではどうぞ!!

蛍光ペン風のマーカーを引くためには

bodobe / Pixabay

蛍光ペン風のマーカーを引くには、

  1. CSSの追記
  2. AddQuickTagの登録(便利)

をする必要があります。

仕組みとしては、HTMLでクラス名を指定してあげて、CSSでマーカーを引く…という感じです。

AddQuickTagというプラグインは、入れても入れなくても出来ますが、入れた方がかなり便利です!(笑)

 

AddQuickTagとは?

HTMLやショートコードなどの開始タグ・終了タグをワンクリックで追記するためのプラグイン

実際、マーカーを引く部分があるたびに、HTMLをいちいち打つのはめんどくさいですからねぇ…。

順を追って説明しますね。

AddQuickTagでクラス名を指定する

はいはいはい…では、プラグインをインストールしましょう。

このAddQuickTagをインストールして、有効化すると、Wordpressダッシュボードの「設定」欄に、「Add Quick Tag」という項目が追加されます。

では、設定欄を開いてみてください。

こんな風に、

  • クイックタグの名前
  • 開始タグ・終了タグ
  • チェック欄

があります。

先ほど説明した通り、このプラグインは、こういった開始タグ終了タグショートコードなどをワンクリックで追記するプラグインになります。

クイックタグの名前などは、あまりどうでもいいですが…。

蛍光ペンマーカーを引くには、開始タグ・終了タグでクラス名を指定する必要があります。

開始タグの欄には、こう記述しましょう。

<span class="marker">

終了タグには、こう記述します。

</span>

これで、「marker」というクラスを指定してくれます。

使い方は簡単。

新規投稿を追加画面には、新たに「Quicktags」というプルダウン式の項目が追加されてます。

さてさてクリックしてみましょうか。

はい、文字を選択して、そのままプルダウンすると、先ほど指定したクイックタグの名前があると思います。

これをクリックします。

すると、記事入力画面上では何も変わりないように見えますが…ちゃんと追記されています。

では、次にCSSの設定です。

スポンサーリンク

CSSで蛍光ペン風マーカーにする。

ではでは、CSSの追記欄に、新たに記述してもらいます!

記述内容を解説すると…

このようになります。

  • AddQuickTagで指定したクラス名
  • 透明部分の割合
  • マーカーの色

の3つの要素を編集することで、変幻自在にマーカーを引くことができます。

では、コードを記述しておきます!

span.marker {
background: linear-gradient(transparent 65%, #Fd3 0%);
display: inline;
/*横に余白をつけたり、下にずらしたりするときは以下のpaddingを調整してください*/
padding: 0 2px 3px;
}

これを追記CSS欄に記述してみると…

先ほどの文字は…

しっかりとマーカーが引かれます!

色の違うマーカーを引きたいとき

TeroVesalainen / Pixabay

ジョグ
色の違うマーカーを引きたいときはどうするんだ?

ということで、方法をメモしておきます!

ずばり…

新しくAddQuickTagにて、違うクラス名で追加する必要があります。

まぁ~これまでの画像を見てみると…「水色マーカーを引く」なんて欄もありましたもんね。

ではでは、さらっとコピペできるように、ここに記述していきたいと思います。

AddQuickTagの追加タグ

開始タグの欄

<span class="markerb">

終了タグ

</span>

追記CSSの記述

CSSの追記欄にはこう記述します。

span.markerb {
background: linear-gradient(transparent 65%, #87cefa 0%);
display: inline;
/*横に余白をつけたり、下にずらしたりするときは以下のpaddingを調整してください*/
padding: 0 2px 3px;
}

HTMLも、CSSも、「markerb」です。

黄色マーカーは「marker」なので、水色マーカーは「b」を加えて、「markerb」にしました。

分かりにくくてすみません…(笑)

まとめ:HTMLとCSSでマーカーが引けるぜ

AnnaD / Pixabay

ではでは…少し分かりにくいところもあったと思いますので…まとめておきます。

 

蛍光ペン風のマーカーを引くまでの手順

  1. AddQuickTagでHTMLを登録する
  2. 登録したクラス名でCSSを追記する
  3. 記事中の文字を選択し、Quicktagsから追記HTML名を選択

とまぁこんな感じかな?単純化すると。

AddQuickTagは、何度も言うように、設定しなくてもいいけど、設定するとかなり便利!というわけで、この記事に書いてます。

いやぁ~今はこのマーカー風記述式に、過去の記事をコツコツ変えているところです。

やっぱり見やすい方がいいもんね…!

ではまた!

参考にさせていただいたブログ

今回は、以下のブログさんからコードをもらったり、参考にさせていただきました!

ありがとうございました。

https://wemo.tech/270

スポンサーリンク
おすすめの記事