蛍光ペン風のテキスト下線をCSS編集とAddQuickTagで作ってみた

こんな感じにテキストに蛍光ペン風の下線を入れる方法、探してこの記事にたどり着きましたか？笑

以前から、僕もこれやりたかったんですよ。

なんか色んなブログ見ると蛍光ペンマーカーやってる人多いですし、なんかスタイリッシュでカッコいいですよね。というか見やすい。

まあ普通にテキスト背景色入れるやり方もあるんですけど、コレジャナイ感がある。ここはコレジャナイ感が。

で、最近になってCSS編集とAddQuickTagというプラグインを使えばすぐ作れるってことを知ったんです。

「CSS？AddQuickTag？」…って不安にならなくも大丈夫です、意外と簡単なのでこの記事の手順通りに進めていきましょう。

追加CSSに蛍光ペン風マーカーの設定をする

WordPressブログのCSS編集が行えるページを開いてください。

お使いのテーマで見当たらない場合は、Wordpressの子テーマ「style.css」で編集が行なえます。

ちなみに僕はSTORKを使っているので「追加CSS」でCSS編集を行いました。

追加CSSの入力スペースに、下記のHTMLコードをコピペして保存してください。

/* —– 可愛い蛍光下線（ピンク） —– */

.pink {
background: linear-gradient(transparent 60%, #FAD5DC 40%);
padding-bottom: .2em;
font-weight:bold;
}

/* —–可愛い蛍光下線（黄色） —– */

.yellow {
background: linear-gradient(transparent 60%, #ffff8e 40%);
padding-bottom: .2em;
font-weight:bold;
}

/* —–可愛い蛍光下線（青） —– */

.blue {
background: linear-gradient(transparent 60%, #CBE9F5 40%);
padding-bottom: .2em;
font-weight:bold;
}

このブログはコピペ禁止プラグイン入れていますが、コピーしたいならHTMLコード表の右上端のボタン押せばコピーできますよ。

一応、コードの説明しておくと

①タイトル名：変えるなら自分がわかるようにタイトルを入れてください

②線の太さ：0～100％の値を設定します。数字が0に近いほど太くなっていきます（60％が個人的にいい感じ）

③線の色：線の色を指定します。上記のHTMLコードは3色ですが、他の色も使いたい場合は自由に追加してください。

一例ですが、色見本はこんな感じに仕上がります。

下線ピンク

下線イエロー

下線ブルー

<span class="pink">ここにテキストを入れる</span>
<span class="yellow">ここにテキストを入れる</span> 
<span class="blue">ここにテキストを入れる</span> 

ブログ記事にHTMLコードを入力する

CSSのにマーカー設定を行えば、記事編集ページで下線マーカーが引けるようになります。

テキストモードで、

<span class=”pink”>ここにテキストを入れる</span>

このようにコードを入れて文字を入力すればOKです。

色を変えたい場合は、

<span class=”pink“>

赤文字の部分を変えればOKです。

<span class="pink">ここにテキストを入れる</span>
<span class="yellow">ここにテキストを入れる</span> 
<span class="blue">ここにテキストを入れる</span> 

CSS編集をして、記事投稿毎にHTMLを打ち込めば蛍光ペン風の下線は引けるんですが、さらに便利な方法があります。

クイックタグの追加画面にて、上記のように各色毎にコードを登録していきます。

記事編集画面の「Quicktags」のボタンに登録したコード名が表示されていればOKです。

こちらの機能を使って下線を入れたいテキストの範囲を指定して、マーカを適用させていきます。

まとめ

CSSとかHTMLをいじるのに抵抗がある僕でしたが、意外とカンタンにできたのでホッとしました。笑

これで蛍光ペン風マーカーを使いまくって、ブログ記事をよりオシャレにスタイリッシュに仕上げていただければと思います。