今回は、以下のように、
wordpressで文章にアンダーラインをつける方法
について解説したいと思います。
目次
wordpressで文章にアンダーラインをつける方法
wordpressで文章にアンダーラインをつける方法は、
1.自分好みのアンダーラインを作成する。 2.wordpressのダッシュボードから『テーマエディター』を開く。 3.CSSに、アンダーラインのクラスを設定する。 4.投稿画面を開き、CSSで設定したアンダーラインを実際に使う。 |
この4ステップで、自分好みのアンダーラインが使えるようになります！
1.自分好みのアンダーラインを作成する。
テキストにアンダーラインをつけるためには、CSSにアンダーラインを設定しないといけません。
設定方法に関しては、次の章から紹介します。
そのCSSの中に、以下のように記述します。
//赤い線
//細い線
red-line-10 {background: rgba(0, 0, 0, 0) linear-gradient(transparent 90%, #FFDFEF 0%) repeat scroll 0 0;}
//50％の線
red-line-50 {background: rgba(0, 0, 0, 0) linear-gradient(transparent 50%, #FFDFEF 0%) repeat scroll 0 0;}
//太い線
red-line-90 {background: rgba(0, 0, 0, 0) linear-gradient(transparent 10%, #FFDFEF 0%) repeat scroll 0 0;}
ブラウザでの表示
赤く細いアンダーライン
赤く半分のアンダーライン
赤く太いアンダーライン
アンダーラインの線の太さと線の色の変更方法は、以下の画像の矢印のところで行います。
・太さの調整・・・0〜100%の値 ・色の調整・・・#〜で調整 ※以下のリンクのサイトから自分好みの色を見つけて設定しましょう！ |
『Web色見本 原色大辞典』から自分好みのカラーコードを見つけましょう！
2.wordpressのダッシュボードから『テーマエディター』を開く
ここからは、CSSにアンダーラインの設定をしていきます。
まずは、ダッシュボードから『テーマエディター』を開きます。
3.CSSに、アンダーラインのクラスを設定する
CSSのエディター（以下の画像では、style.css）を開きます。
その中に、以下のように、記述をして『ファイルを更新』をクリックする。
4.投稿画面を開き、CSSで設定したアンダーラインを実際に使う
ダッシュボードから投稿画面を開き、『新規追加』をクリックする。
『カスタムHTML』をクリックする。
以下のように記述すればアンダーラインの設定は完了です！
ブラウザで確認してみましょう！
アンダーラインが反映されてないという方は、キャッシュを削除してみましょう！
キャッシュの削除方法は、以下の記事で解説しています。
まとめ
1.自分好みのアンダーラインを作成する。 2.wordpressのダッシュボードから『テーマエディター』を開く。 3.CSSに、アンダーラインのクラスを設定する。 4.投稿画面を開き、CSSで設定したアンダーラインを実際に使う。 5.完成！（アンダーラインが反映されてない場合、キャッシュを削除してみる） |
それでは、最後まで読んでいただきありがとうございました。
タグ
