こんな感じにテキストに蛍光ペン風の下線を入れる方法、探してこの記事にたどり着きましたか？笑
以前から、僕もこれやりたかったんですよ。
なんか色んなブログ見ると蛍光ペンマーカーやってる人多いですし、なんかスタイリッシュでカッコいいですよね。というか見やすい。
まあ普通にテキスト背景色入れるやり方もあるんですけど、コレジャナイ感がある。ここはコレジャナイ感が。
で、最近になってCSS編集とAddQuickTagというプラグインを使えばすぐ作れるってことを知ったんです。
「CSS？AddQuickTag？」…って不安にならなくも大丈夫です、意外と簡単なのでこの記事の手順通りに進めていきましょう。
追加CSSに蛍光ペン風マーカーの設定をする
WordPressブログのCSS編集が行えるページを開いてください。
お使いのテーマで見当たらない場合は、Wordpressの子テーマ「style.css」で編集が行なえます。
ちなみに僕はSTORKを使っているので「追加CSS」でCSS編集を行いました。
追加CSSの入力スペースに、下記のHTMLコードをコピペして保存してください。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | /* —– 可愛い蛍光下線（ピンク） —– */ .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色ですが、他の色も使いたい場合は自由に追加してください。
一例ですが、色見本はこんな感じに仕上がります。
下線ピンク
下線イエロー
下線ブルー
1 2 3 | <span class="pink">ここにテキストを入れる</span> <span class="yellow">ここにテキストを入れる</span> <span class="blue">ここにテキストを入れる</span> |
ブログ記事にHTMLコードを入力する
CSSのにマーカー設定を行えば、記事編集ページで下線マーカーが引けるようになります。
テキストモードで、
<span class=”pink”>ここにテキストを入れる</span>
このようにコードを入れて文字を入力すればOKです。
色を変えたい場合は、
<span class=”pink“>
赤文字の部分を変えればOKです。
1 2 3 | <span class="pink">ここにテキストを入れる</span> <span class="yellow">ここにテキストを入れる</span> <span class="blue">ここにテキストを入れる</span> |
AddQuickTagで蛍光ペン風マーカーの入力がカンタンに
CSS編集をして、記事投稿毎にHTMLを打ち込めば蛍光ペン風の下線は引けるんですが、さらに便利な方法があります。
HTMLコードの入力をショートカットするのに使える「AddQuickTag」です。
「プラグイン」→「新規追加」→「AddQuickTag」をインストールし、有効化を行ってください。
クイックタグの追加画面にて、上記のように各色毎にコードを登録していきます。
記事編集画面の「Quicktags」のボタンに登録したコード名が表示されていればOKです。
こちらの機能を使って下線を入れたいテキストの範囲を指定して、マーカを適用させていきます。
ビジュアルモード画面では見た目がわからないのでプレビューにて必ず確認を行ってください。
まとめ
CSSとかHTMLをいじるのに抵抗がある僕でしたが、意外とカンタンにできたのでホッとしました。笑
これで蛍光ペン風マーカーを使いまくって、ブログ記事をよりオシャレにスタイリッシュに仕上げていただければと思います。
恋愛、音楽、英語、カメラ、健康、筋トレ、イラスト、占い、コーチング、稼ぐ系など。
あなたの好きな事・特技・経験をお金に変える方法を学びませんか？
実績や知名度がない個人でも、自分の生き方（才能・経験・スキル）を仕事にして、人の役に立ちながらインターネットで収入を得ていく方法を無料メール講座で解説中。
「生き方マネタイズセミナー」3ステップ動画講座も、期間限定でプレゼント中です。プレゼントを受け取るには下記フォームから無料登録をしてください。
『生き方をお金に変える専門家』として、自分の生き方（才能・経験・スキル）を活かしてインターネットを使って収入を得る方法（情報発信ビジネス）を教えている。 健康、筋トレ、恋愛、カメラ、音楽、イラスト、占い、コーチング、稼ぐ系（転売、アフィリ）などジャンルを問わず、知名度や実績がない個人の方でも、0から好きなことで稼いでいくための方法をお伝えしています。 成功者のモノマネではなく「その人だからこそできる」ことで、人の役に立ちながらお金も心も満たせる人生を実現してもらうことが、僕のモットーです。
