WordPressで蛍光ペン風の線を引く方法を誰よりもわかりやすく解説

先日WordPressでブログを書いていてふと、

てーちゃん
蛍光ペン風の線を引いて、文章を目立たせたいな~

と思いました。

そこで色々と調べた結果、2つの方法があることを知りました。そこで今回はWordPressで蛍光ペン風の線をひく方法を、誰よりもわかりやすくご紹介させていただきます。

今回ご紹介します方法を使えば、

黄色の蛍光ペン風

青色の蛍光ペン風

ピンク色の蛍光ペン風

という線や、

黄色の蛍光ペン風

青色の蛍光ペン風

ピンク色の蛍光ペン風

という感じで線を引けます。初心者の方にもとってもわかりやすく解説していますよ。

簡単に蛍光ペンを引く方法

まず最初に簡単に文字を強調する方法をご説明します。こちらの方法ではこのように

黄色の蛍光ペン風に書いたよ

こういう背景色をつけて蛍光ペン風にできるようになります。こちらの方法ではプラグインしか使わないのでとても簡単です。

TinyMCE Advancedの導入方法

これにはまず『TinyMCE Advanced』というプラグインを導入しておく必要があります。

まずダッシュボードの左側のメニューからプラグインを選択します。

そして左上の新規作成をクリックします。

そして右上に出るプラグインの検索欄に

TinyMCE Advanced

をコピペしてください。

するとこのような画面が現れますので、こちらの柄の「いますぐインストール」をクリックしてます。

インストールが終わると「有効化」というボタンに変わりますので、そちらをクリックして有効化します。

これでTinyMCE Advancedの導入はオッケーです!

実際に引いてみます

TinyMCE Advancedの導入が終わると、投稿編集画面がこのような画面に変わります。

『TinyMCE Advanced』で蛍光ペンを引く方法です。

やり方はまず左側のメニューの設定を選びその中にある、TinyMCE Advancedを選択します。

するとこのような画面が現れますので、使用しないボタンの中にある「背景色」というボタンを、上のこの列にドラッグします。それが終われば右側にある「変更を保存」を忘れずにクリックしてください。

そして投稿画面を開くと、先程のアイコンのボタンが追加されています。

現れない方は

設定を保存し忘れていないか
新規投稿画面もう一度ロードする

という点をチェックしてみてください。

この機能で線を引くには、書いた文字をドラッグして選択して、アイコンの中から好きな色を選びます。今回のように黄色だとこんな感じになります。

黄色の蛍光ペン風に書いてみるよ

というような線が引けます。この時点で、

もうこれでええやん

と言い放つ私の夫みたいな人はこれで設定を終わっていただき、これ以上お読みいただく必要はありません笑

しかし最初に書かせて頂いた方法でペンを引くとこれだけ違って見えます。こちらをご覧ください。

プラグインのみ CSSを追加
今日は昨日のワイドショーで紹介された絶品グルメを食べにお出掛けをしました。

外食に行くのは3ヶ月ぶりで、とってもワクワクしてお化粧をしました。

今日は昨日のワイドショーで紹介された絶品グルメを食べにお出掛けをしました。

外食に行くのは3ヶ月ぶりで、とってもワクワクしてお化粧をしました。

いかがでしょうか、右のほうがクドくなくて、オシャレで自然にまとまっている感じがしませんか?

私は右側の方が好きです(*´ω`*)

CSSを少しだけいじって蛍光ペン風にする

それでは今回私が使っている方法で蛍光ペン風のテキストを作る方法をご紹介します。

まずCSSに追加をするのですが、必ず子テーマで編集をしてください。

親テーマを編集してしまうと、テーマのバージョンアップの度にせっかく入力したCSSが消えてしまうので、必ず子テーマで編集をしてください。

メニューの外観から

まずはWordPress左側メニューの『外観』の中にある『テーマの編集』を選びます。

このとき『ご存知ですか?ここでCSSを変更する必要はありません』と注意書きがでますが、オッケーを押してください。他の場所では編集できません。

そして右上の子テーマを選択していることを確認してください。『◯◯custom』となっていれば大体子テーマです。

そしてテーマファイルの『スタイルシートstyle.css』を選びます。

そして③の一番下の部分にこちらのcssをコピペします。

/----------------
蛍光ペン風の線を引く
-----------------/

/*ピンク*/
.pink_line {background:rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #FFDFEF 0%) repeat scroll 0 0;}

/*ブルー*/
.blue_line{background:rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #cce5ff 0%) repeat scroll 0 0;}

/*イエロー*/
.yellow_line {background:rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #ffffbc 0%) repeat scroll 0 0;}

必ず漏れなく最初から最後まで貼り付けてください。

そして左下のファイルを更新をお忘れないようにお願いします。

この時点ですでにあなたのWordPressでは蛍光ペン風の文字を書くことができるようになっています。

しかし入力するには文字の前後に少し複雑なHTMLを入力する必要があり、毎回入力していては大変です。

そこで、あとひと手間かけることでさらに簡単に蛍光ペンを引くことができます。

手間を省くプラグイン

入力の手間を省くために登場するのが、『AddQuicktag』というプラグインです。色々とプラグインをご紹介していますが、誰もが使っている王道のプラグインばかりなので、安心してください。

こちらのプラグインですが、私が使っている『吹き出し』なども一瞬で呼び出せる大変便利なプラグインとなっています。

てーちゃん
こういうのです

方法は、まずこちらのプラグインをダウンロードします。

左側のメニューのプラグインから新規追加をクリック。右上のプラグインの検索から、

AddQuicktag

をコピペし検索。そしてAddQuicktagをインストールして有効化します。

プラグインのダウンロードは上のプラグインのダウンロード方法をご覧ください。

すると左側の『設定』のところに『AddQuicktag』という項目が出てきますので選びます。

すると下にあるような画面が現れますので、ひとつずつ設定していきます。

①まず左上のボタン名に『青蛍光ペン』と書きます。こちらの言葉は何でも良いです。自分がわかりやすい言葉にしてください。

②そして次のダッシュアイコンを右側の図形を選択して選びます。この図形もなんでもオッケーです。自分がわかりすいものにしてください。今回はペンのマークを選びます。

その下にあるラベル名は空白でオッケーです。

③そして真ん中の列の開始タグのところに、

<strong class="blue_line">

とコピペしてください。

④そして終了タグのところには、

</strong>

とコピペしてください。

右側の列のアクセスキーは空白でオッケーです。

⑤そしてその下の順番のところは表示するときの表示される順番がでます。特にこだわりがなければ空白にしておいてもオッケーです。後からでも順番は変えられます。

⑥そして右側の小さい箱が並んでいるところの、一番右をクリックします。すると全てのボックスにチェックが入りますのでそれでオッケーです。

それが終われば左下の『変更を保存』します。

これで青色の作業が終わりました。

あと黄色とピンクをやれば終了です。

黄色の設定

ボタン名『黄蛍光ペン』などにして、ダッシュアイコンを選んでください。

開始タグ

<strong class="yellow_line">

終了タグ

</strong>

右端のボックスを選ぶ

ピンク色の設定

ボタン名『ピンク蛍光ペン』などにしてダッシュアイコンを選んでください。

開始タグ

<strong class="pink_line">

終了タグ

</strong>

右端のボックスを選ぶ

そして変更を保存して全ての作業は終了です。

投稿画面を開いて書いてみる

それでは実際に書いて見ましょう

まず下の投稿画面に好きな文章を書いてください。

そして蛍光ペンを引きたい部分をドラッグして選択します。

そして『AddQuicktag』のプルダウンができているのがわかっていただけると思います。

そこを押すとあなたが先程書いたボタン名が出てきますので、プルダウンから好きな蛍光ペンの色を選びます。

成功すれば文字が少し太くなります。そして右上のプレビューボタンを押して、実際どのように表示されているかチェックしてください。

3色とも色がついていたら完成です。

できない場合ここをチェック

ここまでやってもできない場合は、

style.css設定の際、保存を忘れていないか
AddQuicktagの記載やチェックボックスの忘れがないか

をチェックしてみてください。

おわりに

いかがでしょうか。やってみれば結構簡単だったと思います。ぜひとも使って頂いて、キレイでオシャレなホームページを作って行きましょう。

私も使っているWordPressのテーマ『ストーク』とっても使いやすくてオススメですよ。


最後までご覧下さりありがとうございました。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です