ワードプレス

ワードプレス 道 簡単に使用できるアンダーラインを紹介

今回はブログなどで簡単に使用できるアンダーライン(下線)を紹介していきます。

 

意外とアンダーラインの使い方を分からない方多いと思いますので、どうしたら簡単に使用できるかを紹介しますのでそちらを使ってより良いブログにしてください。

 

 

CSS込みですので別で設定する必要はありません。

 

アンダーライン(下線)の仕組み

 

まずはベーシックなアンダーラインの仕組みを理解する事で変更も自分の好みに仕上げることも可能になります。

 

 

<span style="background: linear-gradient(transparent 60%, #FFFF99 50%);"> </span>

上記はCSS込みの設定になっていますのでCSS部分を触れば色の変更、線の太さの変更も可能です。

 

ポイントはbackgroundの設定のlinear-gradient(transparent 60%, #FFFF99 50%);

 

linear-gradientは線形のCSSになります。

線の太さの変更は2つの60%と50%の数値を下げると太くなります。

それで数値が上がればアンダーラインになり、数値が下げれば背景色にもなりますよ。

 

色の変更は#FFFF99をカラーチャートから好きな色を選び変更してください。

 

カラーチャートはコチラ

 

アンダーラインの場合

 

 

アンダーラインの場合の線の太さ

 

 

 

色も変更してみました

 

背景色の場合

 

 

 

背景色の場合の線の太さ

 

 

 

色も変更してみました

 

AddQuicktagでいつでも簡単に使用する方法

 

 

『AddQuicktag』は、タグ登録ができるプラグインでます。

一度、登録すると次からはボタン一つで使用することができますので是非登録してください。

 

設定から上記のコードの開始部分と終了部分を事前に登録しておくと次回からはツールバーに出てきます。

下記のように登録したら変更を保存することをお忘れなく。

 

開始タグ

 

 

 

終了タグ

 

 

 

 

これで皆さんの自由なアンダーラインや背景色を作成する事が出来ます。

今回は下線、背景色などを紹介してきましたが、文字の強弱などインパクトがとてもありますので是非使用してみてください。

 

ご購読ありがとうございました。
ワードプレス道 「機能編」記事の強調部分に下線と背景色の設定方法!!

続きを見る

  • この記事を書いた人
NAO

NAO

NAOです。 DTPデザイナー、ワードプレスを愛するWEBデザイナー// 世の中のお得な情報、DTP、WEB、ブログに関して発信してまいります。 「使用ソフト」Illustrator Photoshop DreamWEAVER「使用プログラミング」HTML/CSS/ワードプレス/Jquery/PHP 「企業実績」販売促進に関係するアイテム作成 実績多数 「個人実績」 ココナラ 名刺作成・ロゴ作成 400件以上 広告 50件以上 販売実績

-ワードプレス

© 2024 TSUTAERU BLOG