最近、ブログの文章において、蛍光ペンで下線を引くようなものが多いです。

例えば以下のような感じ。

ブログの文章の下線を蛍光ペンにする

どうでしょうか、なかなかオシャレですよね。しかも、文章も読みやすいし、何かと目立っています。この手法をブログに取り入れない手はありません。

というわけで今回は、ブログの文章に蛍光ペンで下線を引く方法を紹介していきます。

CSSに蛍光ペンコードを追加

まず、文章の下線を蛍光ペンにするにはコードが必要です。そのコードにはたくさんの種類がありますが、以下のものがシンプルで使い勝手がいいです。

.keikou {
background: linear-gradient(transparent 60%, #ffff99 40%);
}

このコードをワードプレスの管理画面から追加していきます。

蛍光ペンのコードを追加する方法

まず、ワードプレスの管理画面の中から「外観」そして「カスタマイズ」へと以降します。

外観 > カスタマイズ

蛍光ペンのコードを追加するためにワードプレスの外観からカスタマイズへ移行する。

次に、追加CSSをクリックし、この中で上述したコードをコピペします。

蛍光ペンのコードを追加CSSにコピペする。

これで公開をクリックすれば設定は完了です。

蛍光ペンのコードの解説

ここで少し蛍光ペンコードの解説をしていきます。

上述した蛍光ペンのコードは3つの分かれています。

蛍光ペンのコードの解説

具体的には、

  1. 透明度の幅
  2. 下からの色の幅

です。

このようなシンプルなコードになっているので、お好みに合わせてカスタマイズすることが可能です。

例えば、今回紹介したコードは色が黄色ですが、他の色にも変更ができるということです。その場合「#ffff99」の「#」から後ろを変えれば色の変更ができます。

また、色の幅も同様に太くしたり細くしたりできます。現在は、透明度が60%で蛍光ペンの幅が40%です。この数値を変更すれば、蛍光ペンを太くしたり細くしたりできます。なお、この数値は合計で100%にならないと表示することができませんので、その辺は注意して設定しましょう。

以上が蛍光ペンのコードの解説です。

蛍光ペンのコードの使い方

さて、蛍光ペンのコードを追加CSSに追加したら、実際に使ってみましょう。

蛍光ペンのコードを使う場合にもちょっとしたコードが必要です。つまり、文章をコードで囲むことをしないと蛍光ペンの下線が表示することができないのです。

では、どんな風にして表示させるのかといえば、

<span class=”keikou”>ここに文章を入れる</span>

のように文章を囲むことで蛍光ペンを表示することができます。このコードで文章を囲む場合、投稿画面のテキストモードで書き込まないと使えませんので、注意してください。

蛍光ペンのコードを簡単に使用する方法

上記のように、文章にコードを囲むのもいいのですがもっと簡単な方法があります。それは「AddQuicktag」のプラグインを使う方法です。

「AddQuicktag」については「ワードプレスの文章を枠に入れる方法を徹底解説。2つのプラグインで簡単表示!」にも解説しているのでよかったら参考にしてみてください。


 

以上が、ブログの文章に蛍光ペンで下線を引く方法です。

なお、今回の内容は以下のサイト

【CSS】ブログの文章を下線だけ蛍光ペンを引いたように装飾する方法

を参考にさせていただきました。

関連記事はこちら