ワードプレス

WordPress|蛍光ペン風下線マーカーのCSS設定方法をサクッと!

こんにちは、起業ママ応援サポーターのエリコです!

あなたはいろんなブログを見ている時に「こんな感じの」蛍光ペン風下線マーカーをご覧になったことはありませんか?

文字装飾で背景が丸っと塗りつぶされているよりも、かわいいしおしゃれですよね!

今回は私のブログにも使っている「蛍光ペン風下線マーカー」の設定方法を、初心者向けに分かりやすくお伝えしたいと思います^^

エリコ
エリコ
この記事では

・Wordpressで蛍光ペン風下線マーカーの設定方法

を、CSSに苦手意識がある人でも簡単にできるようわかりやすく解説しています!

 

WordPressで蛍光ペン風下線マーカーをCSSで設定する方法を分かりやすく解説

ブログで記事を書いていく上で文字装飾はとても大切ですよね?ただただ文字が並んでいるだけでは読みにくくてマズイです(笑)

そんな時あなたも太字、赤文字、背景色をつけるなどなど、いろいろと装飾されているとは思います。

 

ですがこの蛍光ペン風下線マーカーの方が断然かわいいし、さりげなくていい感じですよね!

あなたもどこかのブログで見かけて気になっていたのではないでしょうか?

 

実はこの蛍光ペン風下線マーカーは、プラグインとかではなくCSSとHTMLを使って設定していきます

ここでCSSなら面倒だからやめておこう…って思わないでくださいね!CSSって言葉のハードルが高いだけで、実はそんなに難しいことではないんです。

 

以前の私もCSSやHTMLと聞くとなるべく避けて通ってきましたが、いざ取り組んでみるとそんなに難しいことではありませんでしたよ!

そこで今回はCSSやHTMLに抵抗がある初心者の方でも、簡単に設定できるようなるべく分かりやすく解説していきますね!

WordPressの追加CSSから設定する

まずはWordpressのダッシュボードから、外観→カスタマイズをクリックしてください。

 

次にこの画面になりますので追加CSSをクリックします。

 

そして赤枠で囲っている部分にCSSコードを追加していきます。

 

CSSを追加した場合はこんな感じですので、最後に「公開」をクリックすればOKです!

 

WordPressのテーマによっては、この追加CSSを記載する部分がないものもあります。

その時は子テーマのstyle.cssにCSSを追加していってください(外観→テーマの編集→style.css)

 

蛍光ペン風下線マーカーのCSS見本

蛍光ペン風下線マーカーのCSS見本を載せておきますので、私と同じものでよければこのままコピペして使ってみてください!

ピンク蛍光ペン細め
.pinkline {background:rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #FFDFEF 0%) repeat scroll 0 0;}

黄色蛍光ペン細め
.yellowline {background:rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #ffffbc 0%) repeat scroll 0 0;}

ブルー蛍光ペン細め
.blueline {background:rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #cce5ff 0%) repeat scroll 0 0;}

ピンク蛍光ペン太め
.pinkline-s{background:rgba(0, 0, 0, 0) linear-gradient(transparent 80%, #FFDFEF 0%) repeat scroll 0 0;}

黄色蛍光ペン太め
.yellowline-s{background:rgba(0, 0, 0, 0) linear-gradient(transparent 80%, #ffffbc 0%) repeat scroll 0 0;}

ブルー蛍光ペン太め
.blueline-s{background:rgba(0, 0, 0, 0) linear-gradient(transparent 80%, ##cce5ff 0%) repeat scroll 0 0;}

 

ちなみにこのCSSコードの内容は以下のようになります!

赤枠→「 . 」の後ろは、名前の部分になりあなたが分かりやすいものでOKです。

青枠→線の太さになります

黄色枠→蛍光ペンの色です(色は原色大辞典を参考にしてみてください)

緑枠→透明度を表し、数が大きいほど透明度が上がります

 

蛍光ペン風下線マーカーのWordpress記事での使い方

蛍光ペン風下線マーカーをCSS追加できたらもう一安心です!

あとはそれぞれの記事で、蛍光ペン風下線マーカーを使いたい部分でタグを入れていくだけです。

WordPressのテキストモードで必ず入れるようにしてくださいね!

通常テキスト
<span class=”pinkline”>蛍光ペン風下線マーカーを使いたい文字をここへ</span>

太字にしたい場合
<strong class=”pinkline”>蛍光ペン風下線マーカーを使いたい文字をここへ</strong>

この「pinkline」の部分を上で記載したyellowline、blueline、pinkline-s、yellowline-s、blueline-sなど名前の部分だけ変更すればOKです!

 

ですが、このタグを毎回入力するのはやはり面倒ですよね?

ここで活躍するのが『AddQuicktag』です!AddQuicktagでは、あらかじめタグを登録しておくことができるので、使いたいときにボタンでサクッと操作できるので、ぜひこの蛍光ペン風下線マーカーのタグを登録しておいてくださいね!

Add Quicktagでグンと記事作成スピードが早くなる! こちらの記事でAddQuicktagのインストール方法から設定方法までお伝えしていますのでご参考になさって設定してみてください!

 

まとめ

今回は「Wordpress|蛍光ペン風下線マーカーのCSS設定方法をサクッと!」ということで、蛍光ペン風下線マーカーの設定方法をCSSやHTMLに抵抗がある初心者の方でも、簡単に設定できるように分かりやすくお伝えしてきました!

やはりただの赤文字や背景色を使うよりも、蛍光ペン風下線マーカーの方がかわいくておしゃれですから、ブログ記事を書くことに慣れてきたあなたは、文字装飾にぜひ取り入れてみてくださいね!

あなたのブログ記事がグンと見栄えがよくなるはずです!

 

「自宅でスキマ時間を使って稼ぐ」を叶える無料メルマガ講座
WEBビジネス初心者向けのガイドブックをプレゼント中