WordPressの記事でマーカー線を引く方法

文字に蛍光マーカーのような線を引くことで、強調したい文字にメリハリがつき、記事が読みやすくなります。

文字にマーカー線を引く手順

①CSSでマーカー線の設定をする
②HTMLで記事にCSSを反映する

①CSSでマーカー線の設定をする

WordPressの管理画面にログインします。
サイドメニューの「外観」→「カスタマイズ」を選択してください。

「追加CSS」を選択します。

実際にCSSを追加していきます。

【CSSの詳細】

.green {
background: linear-gradient(transparent 60%, #66cdaa 60%);
}


今回は緑のマーカーの場合ですが、自由に色・太さを変えることもできます。
詳しくはこちら>>
マーカー線の色・太さを変える

CSSを追加したら、忘れずに「公開」します。

これでWordPressの設定はできたので、記事に反映していきます。

②HTMLで記事にCSSを反映する

下線を追加したい記事を編集します。

①テキストエディタを開きます。
②マーカー線を引きたい部分を、HTMLタグではさみます。

【HTMLの詳細】

<span class="green">緑の下線</span>

文字をHTMLではさむことで、そこにCSSの設定が呼び出されて、一部だけ緑の下線が引かれます。

プレビューで確認


設定が反映されていることを確認します。

CSSとHTMLのしくみ

CSSで色や太さを設定してHTMLで呼び出すしくみ

①クラス名

自分が分かりやすい単語や言葉を自由に決められます。CSSでは「.」から始めますが、HTMLでは最初の「.」なしで書き始めます。

②色の指定

色は「WEB色見本 原色大辞典」から好きなものを選んでください。この部分を入れ替えると様々な色の下線ができます。

③パーセンテージの大きさ=線の太さ

この2つのパーセンテージを大きくしたり小さくしたりすると、線の太さが変えられます。

マーカー線の色・太さを変える

コピペで使える!線の色・太さのサンプル

ピンクの線(細)

  • CSS
.pink-1 {
background: linear-gradient(transparent 80%, #ffb6c1 80%);
}
  • HTML
<span class="pink-1">文章</span>


ピンクの線

  • CSS
.pink {
background: linear-gradient(transparent 60%, #ffb6c1 60%);
}
  • HTML
<span class="pink">文章</span>


水色の線(細)

  • CSS
.blue-1 {
background: linear-gradient(transparent 80%, #87cefa 80%);
}
  • HTML
<span class="blue-1">文章</span>


水色の線

  • CSS
.blue {
background: linear-gradient(transparent 60%, #87cefa 60%);
}
  • HTML
<span class="blue">文章</span>


黄色の線(細)

  • CSS
.yellow-1 {
background: linear-gradient(transparent 80%, #ffd700 80%);
}
  • HTML
<span class="yellow-1">文章</span>


黄色の線

  • CSS
.yellow {
background: linear-gradient(transparent 60%, #ffd700 60%);
}
  • HTML
<span class="yellow">文章</span>

HTMLはボタンでカンタンに呼び出せる

マーカー線を引きたいところに、毎回<span class="pink">文章</span>
のようにHTMLを打ち込むのは面倒です。

そこで便利なのがプラグイン「AddQuicktag(アドクイックタグ)」です。投稿画面にボタンを追加して、ボタンを押すだけでHTMLタグが挿入できます。

詳しくはこちら>>

http://pulpfingers-com.check-xserver.jp/2269