文字に蛍光マーカーのような線を引くことで、強調したい文字にメリハリがつき、記事が読みやすくなります。
コンテンツ
文字にマーカー線を引く手順
②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では最初の「.」なしで書き始めます。
②色の指定
色は「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
