\ ＳＨＡＲＥ /

こんにちはMayです。

私のこのサイトを見た人から、どうしたら可愛いアンダーラインが引けるのか教えてって言われてん。

WPとテーマは賢威を使用しての紹介となります。

記述場所がテーマに寄って違うと思うのですが、CSS表記内容は同じです。

 

スポンサーリンク

WordPress可愛いアンダーラインを引こう！

このサイトで用意しているアンダーラインはこんな感じ。

可愛いよな？　ちょっとしたアクセントになるし邪魔にならんから良いよな？

 

太いピンク太いピンク太いピンク

細いピンク細いピンク細いピンク

太いブルー太いブルー太いブルー

細いブルー細いブルー細いブルー

太い黄色太い黄色太い黄色

細い黄色細い黄色細い黄色

 

CSSの記述場所

下記のCSS言語を追加して可愛いアンダーラインが引けるようにしよう。

 

現在使用しているテーマ（テンプレート）によって記述する場所が違うので気を付けて。

賢威テーマを使用している場合、下記の場所に記述します。

 

賢威テーマとスタイルシートの場所

WPのサイドメニューから

『外観』⇒『カスタマイズ』⇒『追加CSS』

 

関連記事：

WordPressテーマ賢威の評判は正しいのか？利用者の感想

 

 

 

★その他代表的なテーマ

代表的なテーマとスタイルシートの場所

『外観』⇒『テーマエディタ』

Cocoon　→　「cocoon-child-master」

affinger4　→　「affinger4-child」

Simplicity2　→　「Simplicity2-child」

 

CSSに記述しよう

記述内容は下記の通り。

全文をコピペしてそのまま貼り付けましょう。

 

色を変えたい場合はカラーコード（シャープ記号と6文字のアルファベット）部分を変更すればOK。

 

◆　CSS　◆

/*————————————–
蛍光ペンのような下線を引く　　　↓
————————————–*/

/*ピンク（太め）*/
.pink_line {background:rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #FFDFEF 0%) repeat scroll 0 0;}

/*ブルー（太め）*/
.blue_line{background:rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #cce5ff 0%) repeat scroll 0 0;}

/*イエロー（太め）*/
.yellow_line {background:rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #ffffbc 0%) repeat scroll 0 0;}

/*ピンク（細め）*/
.pink_line_narrow{background:rgba(0, 0, 0, 0) linear-gradient(transparent 80%, #ffb2d8 0%) repeat scroll 0 0;}

/*ブルー（細め）*/
.blue_line_narrow {background:rgba(0, 0, 0, 0) linear-gradient(transparent 80%, #add6ff 0%) repeat scroll 0 0;}

/*イエロー（細め）*/
.yellow_line_narrow{background:rgba(0, 0, 0, 0) linear-gradient(transparent 80%, #ffff7f 0%) repeat scroll 0 0;}

 

ウェブサイトで使用するカラーコードを無料で提供しているサイトです。

 

 

 

自動化で簡単

アンダーラインを引く為に自分で記述するのは面倒なので、アンダーラインを引く為の命令ボタン作成しよう。

ってボタンを作成するわけちゃうけどな。

この仕組みがスタイルシート（CSS）というものです。

 

Addquicktagのインストール

アンダーラインの自動化を行うには便利なプラグインAddquicktagを使いましょう。

 

WP左メニューからプラグイン⇒新規追加で「AddQuicktag」検索

インストールできたら有効化する

 

Addquicktag設定方法

左メニュー　『設定』⇒『Addquicktag』選択

※設定をクリックすると下にズラーッと出てくる、下の方にAddquicktagがあるよ

 

入力する箇所は１つの命令に４箇所

 

◆　入力内容　◆

●ボタン名：ピンク太線とか分かる名前

●開始タグ：<span class=”pink_line“>赤文字部分はCSSタグの左部分

●終了タグ：</span>

●チェックマーク：一番右の緑丸部分クリックすると一括で入る

 

◆　入力終了　◆

６本の設定するのならばボタンラベルは６つ必要ですよ。

ちゃんと入力出来ました？

良かったら『変更を保存』クリック

 

これで

タグ登録は完成！！！！！

 

◆最後に確認◆

こんな風に登録したタグがプルダウンメニューに出てきてますか？

出てきたら、上手く登録できてます！

パチパチパチパチ（拍手）

 

WordPress可愛いアンダーラインを引こう！まとめ

どう？そんなに難しくなかったやんね？

このなんとも言えない絶妙な太さ！そして柔らかい感じの色合い！

これでブログのページも可愛くできると思うよ～

 

お役に立てたら嬉しいです。

 

\ ＳＨＡＲＥ /