【WordPress】簡単!文字にマーカーのような下線を引く方法

蛍光マーカーのように、文字に色付きの下線を付けると文字が強調され、メリハリがつくので記事が読みやすくなります。

初心者でも、手順通りにやれば難しいことはありません!ぜひ導入してみてください。

実際にWordPressで下線を付けよう

WordPressのダッシュボードにログインします。

WordPressに下線の設定をする(CSS)

「外観」→「カスタマイズ」を選択

「追加CSS」を選択

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

【CSSの詳細】

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


今回は緑の下線の場合ですが、自由に色・太さを変えることもできます。
>>下線の色・太さを変えるにスキップ

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

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

記事に設定を反映していく(HTML)

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

①テキストエディタを開きます。
②下線を引きたい部分を、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>