記事の文字に、背景色を付けて、文字を目立たせる。
僕もかなりやっていました。
こんな感じ。
でもでも、人には好みがありまして、マーカー風のエフェクトが欲しいという方もいます。
文字に蛍光ペン風のマーカーこんな感じです。
自然な感じも出るし、それでいて見やすさもアップしているような。
こんな蛍光ペン風のマーカーを引くのもとっても簡単です。
というわけで、今回の記事の内容としては…
本記事の内容
文字に蛍光ペン風のマーカーが引けるようになる
AddQuickTagの使い方がわかる
この2点になります。
この記事の目次
蛍光ペン風のマーカーを引くためには
蛍光ペン風のマーカーを引くには、
CSSの追記
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でマーカーが引けるぜ
ではでは…少し分かりにくいところもあったと思いますので…まとめておきます。
蛍光ペン風のマーカーを引くまでの手順
AddQuickTagでHTMLを登録する
登録したクラス名でCSSを追記する
記事中の文字を選択し、Quicktagsから追記HTML名を選択
とまぁこんな感じです。
AddQuickTagは、何度も言うように、設定しなくてもいいけど、設定するとかなり便利！というわけで、この記事に書いてます。
参考にさせていただいたブログ
今回は、以下のブログさんからコードをもらったり、参考にさせていただきました！
ありがとうございました。
参照CSSで複数行に渡るテキストにマーカーを引いたようなエフェクトを付ける
