stux / Pixabay

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

僕もかなりやっていました。

こんな感じ。

 

でもでも、人には好みがありまして、マーカー風のエフェクトが欲しいという方もいます。

文字に蛍光ペン風のマーカーこんな感じです。

 

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

こんな蛍光ペン風のマーカーを引くのもとっても簡単です。

 

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

 本記事の内容

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

この2点になります。

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

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

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

 

をする必要があります。

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

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

 

 AddQuickTagとは?

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

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

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

AddQuickTagでクラス名を指定する

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

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

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

こんな風に、

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

 

があります。

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

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

 

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

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

<span class="marker">

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

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

</span>

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

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

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

これをクリックします。

 

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

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

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

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

記述内容を解説すると…

このようになります。

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

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

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

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

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

先ほどの文字は…

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

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

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

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

 

新しく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でマーカーが引けるぜ

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

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

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

とまぁこんな感じです。

 

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

 

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

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

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

参照CSSで複数行に渡るテキストにマーカーを引いたようなエフェクトを付ける

 

じょさなん
  • ブログ収益化についての無料相談
  • 本格的なコンサルタント依頼
  • ブログやSEOについての質問
多数受け取っております。本当にありがとうございます! いつでもお待ちしておりますので、下記の記事を読んでいただけると幸いです(^o^)
おすすめの記事