【ワードプレス】コピペで簡単にアンダーラインを引く方法

2018年11月13日 HTML/CSS, WordPress, プログラム関係

こんにちは、だいきです。

CSSの簡単設定

アンダーラインの種類

実際に表示されるアンダーラインは以下のとおりです。

蛍光ペン：シルバー
蛍光ペン：シルバー(太線)
蛍光ペン：ピンク
蛍光ペン：ピンク(太線)
蛍光ペン：水色
蛍光ペン：水色(太線)
蛍光ペン：紫
蛍光ペン：紫(太線)
蛍光ペン：緑
蛍光ペン：緑(太線)
蛍光ペン：赤
蛍光ペン：赤(太線)
蛍光ペン：青
蛍光ペン：青(太線)
蛍光ペン：黄
蛍光ペン：黄(太線)

今回は、１６種類のアンダーラインを用意しました。

色は8種類あり、太線と細線の２種類ありますので、

様々な場面で使うことができると思います。

今回用意した色は８種類だけですが、

他の色を使いたい場合はカラーコードを変更していただければ、

他の色にも変更して好きな色に設定することができます。

コード一覧

今回使用するコードは以下となります。

.yellow_line{
background: linear-gradient(transparent 55%, #ffffbc 0%);
}.yellow_line_narrow{
background: linear-gradient(transparent 75%, #ffffbc 0%);
}

.blue_line{
background: linear-gradient(transparent 55%, #A4C6FF 0%);
}

.blue_line_narrow{
background: linear-gradient(transparent 75%, #A4C6FF 0%);
}

.pink_line{
background: linear-gradient(transparent 55%, #FFDDFF 0%);
}

.pink_line_narrow{
background: linear-gradient(transparent 75%, #FFDDFF 0%);
}

.red_line{
background: linear-gradient(transparent 55%, #FF97C2 0%);
}

.red_line_narrow{
background: linear-gradient(transparent 75%, #FF97C2 0%);
}

.green_line{
background: linear-gradient(transparent 55%, #CBFFD3 0%);
}

.green_line_narrow{
background: linear-gradient(transparent 75%, #CBFFD3 0%);
}

.gray_line{
background: linear-gradient(transparent 55%, #EEEEEE 0%);
}

.gray_line_narrow{
background: linear-gradient(transparent 75%, #EEEEEE 0%);
}

.purple_line{
background: linear-gradient(transparent 55%, #EAD9FF 0%);
}

.purple_line_narrow{
background: linear-gradient(transparent 75%, #EAD9FF 0%);
}

.aqua_line{
background: linear-gradient(transparent 55%, #C2EEFF 0%);
}

.aqua_line_narrow{
background: linear-gradient(transparent 75%, #C2EEFF 0%);
}

コードを追加する

蛍光ペンのようなアンダーラインを使用するには、CSSを変更する必要があります。

（CSSは、Webページのスタイルを指定するための言語です。ホームページの見た目を変更するプログラミング言語です）

CSSを変更するためには、左のメニューから「外観」を選択し、「テーマの編集」を選択してください。

テーマの編集を選択すると、以上のような英語の画面が表示されます。

次に、以上の画面の右側にある「style.css」を選択してください。

以上のようなページが開いたら、そのまま一番下へ画面をスクロールさせて、

開いている所にコードをペーストしてください。

ペーストに成功したら、次は「ファイルを更新」をクリックして、

CSSの変更は完了になります。

プラグインの設定

AddQuicktagのインストール

プラグイン「AddQuicktag」をインストールしていきます。

プラグインを選択し、新規追加を選択してください。

次は、プラグインの検索フォームに「AddQuicktag」と打ち込み、検索を行うと以下のようなページが表示されます。

表示されたら、プラグインをインストールするを選び、インストール後、プラグインを有効にするというボタンを押してください。これで、プラグインのインストールは完了です。

AddQuicktagの使い方

左のメニューから設定を選び、AddQuicktagをクリックし、必須項目を記入する

左のメニューから設定を選び、AddQuicktagをクリックすると、以下のようなページが表示されます。

このページが表示されたら、次は必須項目を入力してください。

必須項目

ボタン名(自分がわかりやすい名前を記入)
開始タグと終了タグの記入
チェックマークを入れる（一番右のチェックボックスを押すと全てチェック）

開始タグには、

<span class=”red_line”>　などを入力してください。

classの後の文字は、コード一覧に書かれている「.~」の部分を１つずつ記入してください。

終了タグには、

</span>　を入力してください

必須項目を入力し終わると、保存ボタンを押して保存しましょう。

実際に使ってみる

以上の設定を終えると、ワンクリックでアンダーラインを使うことができます。

動作しない場合の対処法

CSSが上手いこと作動していない場合

テンプレートによっては、CSSがうまく反映されないため、

アンダーラインを使うことができない場合があります。

その場合は、「外観」＞「カスタマイズ」を選択し、

追加CSSにコードをペーストしてください。

以上のように書き込んで、公開をクリックしてください。

これで、アンダーラインを使うことができるようになります。

以上、だいきでした。