実践記録 061◆超便利!WordPressで簡単に「文字の下線を引く」方法・プラグイン

ネットで稼ぐ日々の実践記録
総合メニュー
ブログ概要稼ぐ準備稼ぎ方実践記録オススメHELPサイトマップ

WordPressの記事作成では、強調したい文字の「下線マーカー」やリンク先の案内用の「ボタン」などを使用して記事を読みやすくするため種々の修飾ができます。
しかし、何度も同じHtmlタグを使用する時や種々のコードを書き込むなど、時間と手間がかかってしまいます。
そこで、プラグインを使用して簡単に修飾できるようにしました。

 日々の実践記録                 

 「日々の実践記録の目次」へ戻る

実践記録◆超便利!Wordpressで簡単に「文字の下線を引く」方法・プラグイン

WordPressの記事作成時に文章の一部分を強調するするために色付の下線を付けて修飾したいと思う時がよくあります。
そこで、WordPressのプラグインのAddQuickTagを使用して、その設定画面より各種の下線用タグを設定して簡単に「文章の下線を引く」方法を解説します。

ここでは、すでにプラグインのAddQuickTagがインストールが完了していることを前提に解説します。
インストールがまだ未完了の場合は下記を参考にプラグインのAddQuickTagのインストールを完了させてください。

1.AddQuickTagの設定方法

設定する下線の種類は細線のカラー6種と太線のカラー6種の12種類で下記のようにラベルを設定しました。
(使用時の実施例も表記しました。)

1-01.▽下線・細 (赤)     実施例 ▽下線・細 (赤)
1-02.▽下線・細 (ピンク)   実施例 ▽下線・細 (ピンク) 
1-03.▽下線・細 (橙)     実施例 ▽下線・細 (橙)
1-04.▽下線・細 (黄)     
実施例 ▽下線・細 (黄) 
1-05.▽下線・細 (青)     実施例 ▽下線・細 (青)  
1-06.▽下線・細 (緑)     
実施例 ▽下線・細 (緑) 
1-07.▼下線・太 (赤)     
実施例 ▼下線・太 (赤) 
1-08.▼下線・太 (ピンク)   
実施例 ▼下線・太 (ピンク)  
1-09.▼下線・太 (橙)     
実施例 ▼下線・太 (橙) 
1-10.▼下線・太 (黄)     
実施例 ▼下線・太 (黄) 
1-11.▼下線・太 (青)      
実施例 ▼下線・太 (青)
1-12.▼下線・太 (緑)     
実施例 ▼下線・太 (緑)

それでは、プラグインのAddQuickTagの設定方法(上記の12種類)を解説します。

ダッシュボード>フラグイン>インストール済みプラグインからAddQuicktagの設定をクリックします。

次にAddQuicktagの「クイックタグの追加と削除」画面より設定を行います。

1-1) ▽下線・細 (赤)・・・AddQuicktagの設定項目の説明

設定項目は下記の5項目です。

1ボタン名、2開始タグ、3終了タグ、4並び順、5チェックの5項目です。

設定項目内容
ボタン名エディターに表示するボタンの名前
ダッシュアイコンボタン名の横に表示されるアイコン
ラベル名ボタンにカーソルを乗せたときに表示する補足テキスト
開始タグ開始タグ    例 <p>
終了タグ終了タグ     例   </p>
アクセスキーショートカットキーの設定
並び順エディターに表示するボタンの順序

具体的に説明しますと,下記のように設定します。(青字のみを設定)

設定項目内容
ボタン名▽下線・細 (赤)
ダッシュアイコンボタン名の横に表示されるアイコン
ラベル名ボタンにカーソルを乗せたときに表示する補足テキスト
開始タグ<span style=”border-bottom: solid 3px #ff0000;”>
終了タグ</span>
アクセスキーショートカットキーの設定
並び順110

実際の設定は下記のようにします。

これで、1セットの設定は完了です。

最後に右下の「変更を保存」ボタンをクリックします。

実施例 ▽下線・細 (赤)

このページの目次へ戻る▲

1-2) ▽下線・細 (ピンク)・・・AddQuicktagの設定項目の説明

設定項目のみを記載しておきます。
(設定方法の全容は、「1-1 ▽下線・細 (赤)」の場合と同様です。

具体的に説明しますと,下記のように設定します。(青字のみを設定)

設定項目内容
ボタン名▽下線・細 (ピンク)
ダッシュアイコンボタン名の横に表示されるアイコン
ラベル名ボタンにカーソルを乗せたときに表示する補足テキスト
開始タグ<span style=”border-bottom: solid 3px #ea93ac;”>
終了タグ</span>
アクセスキーショートカットキーの設定
並び順120

実施例 ▽下線・細 (ピンク) 

このページの目次へ戻る▲

1-3) ▽下線・細 (橙)・・・AddQuicktagの設定項目の説明

設定項目のみを記載しておきます。
(設定方法の全容は、「1-1 ▽下線・細 (赤)」の場合と同様です。

具体的に説明しますと,下記のように設定します。(青字のみを設定)

設定項目内容
ボタン名▽下線・細 (橙)
ダッシュアイコンボタン名の横に表示されるアイコン
ラベル名ボタンにカーソルを乗せたときに表示する補足テキスト
開始タグ<span style=”border-bottom: solid 3px #f9b737;”>
終了タグ</span>
アクセスキーショートカットキーの設定
並び順130

実施例 ▽下線・細 (橙)

このページの目次へ戻る▲

1-4) ▽下線・細 (黄)・・・AddQuicktagの設定項目の説明

設定項目のみを記載しておきます。
(設定方法の全容は、「1-1 ▽下線・細 (赤)」の場合と同様です。

具体的に説明しますと,下記のように設定します。(青字のみを設定)

設定項目内容
ボタン名▽下線・細 (黃)
ダッシュアイコンボタン名の横に表示されるアイコン
ラベル名ボタンにカーソルを乗せたときに表示する補足テキスト
開始タグ<span style=”border-bottom: solid 3px #f0fa4f;”>
終了タグ</span>
アクセスキーショートカットキーの設定
並び順140

実施例 ▽下線・細 (黄)

このページの目次へ戻る▲

1-5) ▽下線・細 (青)・・・AddQuicktagの設定項目の説明

設定項目のみを記載しておきます。
(設定方法の全容は、「1-1 ▽下線・細 (赤)」の場合と同様です。

具体的に説明しますと,下記のように設定します。(青字のみを設定)

設定項目内容
ボタン名▽下線・細 (青)
ダッシュアイコンボタン名の横に表示されるアイコン
ラベル名ボタンにカーソルを乗せたときに表示する補足テキスト
開始タグ<span style=”border-bottom: solid 3px #1468e5;”>
終了タグ</span>
アクセスキーショートカットキーの設定
並び順150

実施例 ▽下線・細 (青)

このページの目次へ戻る▲

1-6) ▽下線・細 (緑)・・・AddQuicktagの設定項目の説明

設定項目のみを記載しておきます。
(設定方法の全容は、「1-1 ▽下線・細 (赤)」の場合と同様です。

具体的に説明しますと,下記のように設定します。(青字のみを設定)

設定項目内容
ボタン名▽下線・細 (緑)
ダッシュアイコンボタン名の横に表示されるアイコン
ラベル名ボタンにカーソルを乗せたときに表示する補足テキスト
開始タグ<span style=”border-bottom: solid 3px #0db20a;”>
終了タグ</span>
アクセスキーショートカットキーの設定
並び順160

実施例 ▽下線・細 (緑) 

このページの目次へ戻る▲

1-7) ▼下線・太 (赤)・・・AddQuicktagの設定項目の説明

設定項目のみを記載しておきます。
(設定方法の全容は、「1-1 ▽下線・細 (赤)」の場合と同様です。

具体的に説明しますと,下記のように設定します。(青字のみを設定)

設定項目内容
ボタン名▼下線・太 (赤)
ダッシュアイコンボタン名の横に表示されるアイコン
ラベル名ボタンにカーソルを乗せたときに表示する補足テキスト
開始タグ<span style=”border-bottom: solid 6px #ff0000;”>
終了タグ</span>
アクセスキーショートカットキーの設定
並び順210

実施例 ▼下線・太 (赤)

このページの目次へ戻る▲

1-8) ▼下線・太 (ピンク)・・・AddQuicktagの設定項目の説明

設定項目のみを記載しておきます。
(設定方法の全容は、「1-1 ▽下線・細 (赤)」の場合と同様です。

具体的に説明しますと,下記のように設定します。(青字のみを設定)

設定項目内容
ボタン名▼下線・太 (ピンク)
ダッシュアイコンボタン名の横に表示されるアイコン
ラベル名ボタンにカーソルを乗せたときに表示する補足テキスト
開始タグ<span style=”border-bottom: solid 6px #ea93ac;”>
終了タグ</span>
アクセスキーショートカットキーの設定
並び順220

実施例 ▼下線・太 (ピンク)

このページの目次へ戻る▲

1-9) ▼下線・太 (橙)・・・AddQuicktagの設定項目の説明

設定項目のみを記載しておきます。
(設定方法の全容は、「1-1 ▽下線・細 (赤)」の場合と同様です。

具体的に説明しますと,下記のように設定します。(青字のみを設定)

設定項目内容
ボタン名▼下線・太 (橙)
ダッシュアイコンボタン名の横に表示されるアイコン
ラベル名ボタンにカーソルを乗せたときに表示する補足テキスト
開始タグ<span style=”border-bottom: solid 6px #f9b737;”>
終了タグ</span>
アクセスキーショートカットキーの設定
並び順230

実施例 ▼下線・太 (橙) 

このページの目次へ戻る▲

1-10) ▼下線・太 (黄)・・・AddQuicktagの設定項目の説明

設定項目のみを記載しておきます。
(設定方法の全容は、「1-1 ▽下線・細 (赤)」の場合と同様です。

具体的に説明しますと,下記のように設定します。(青字のみを設定)

設定項目内容
ボタン名▼下線・太 (黄)
ダッシュアイコンボタン名の横に表示されるアイコン
ラベル名ボタンにカーソルを乗せたときに表示する補足テキスト
開始タグ<span style=”border-bottom: solid 6px #f0fa4f;”>
終了タグ</span>
アクセスキーショートカットキーの設定
並び順240

実施例 ▼下線・太 (黄) 

このページの目次へ戻る▲

1-11) ▼下線・太 (青)・・・AddQuicktagの設定項目の説明

設定項目のみを記載しておきます。
(設定方法の全容は、「1-1 ▽下線・細 (赤)」の場合と同様です。

具体的に説明しますと,下記のように設定します。(青字のみを設定)

設定項目内容
ボタン名▼下線・太 (青)
ダッシュアイコンボタン名の横に表示されるアイコン
ラベル名ボタンにカーソルを乗せたときに表示する補足テキスト
開始タグ<span style=”border-bottom: solid 6px #1468e5;”>
終了タグ</span>
アクセスキーショートカットキーの設定
並び順250

実施例 ▼下線・太 (青)

このページの目次へ戻る▲

1-12) ▼下線・太 (緑)・・・AddQuicktagの設定項目の説明

設定項目のみを記載しておきます。
(設定方法の全容は、「1-1 ▽下線・細 (赤)」の場合と同様です。

具体的に説明しますと,下記のように設定します。(青字のみを設定)

設定項目内容
ボタン名▼下線・太 (緑)
ダッシュアイコンボタン名の横に表示されるアイコン
ラベル名ボタンにカーソルを乗せたときに表示する補足テキスト
開始タグ<span style=”border-bottom: solid 6px #0db20a;”>
終了タグ</span>
アクセスキーショートカットキーの設定
並び順260

実施例 ▼下線・太 (緑)

このページの目次へ戻る▲

2.AddQuicktagの使い方

それでは、ここからは実際の記事作成時における登録したAddQuicktagの使い方について説明します。

2-1. 下線を引きたい文字の選択

線を引きたい文字をペーストします。

(例)

下線を引きたい文字はここです。

2-2) ビジュアルエディタの「Quicktags▼」をクリック

WordPressでは本文を編集する場合に使用するビジュアルエディタにQuicktagsと言うプルダウンメニューができていると思います。

「@Quicktags▼」をクリックします。

2-3) プルダウンメニューの「▽下線・細 (赤)」をクリック

次に、そのプルダウンメニューに今登録したボタン名の、▽下線・細 (赤)がありますので、下線を引きたい文字の部分をペーストして選択したあと▽下線・細 (赤)ボタンをクリックします。

すると、「下線を引きたい文字はここです。」のように、ペーストして選択した文字の下線を簡単に引くことができます。

実際に使用する下線の種類は細線2~3種、太線2~3種の4~6種ぐらいを選んで設定しておけばいいと思います。

このページの目次へ戻る▲

3.まとめ

今回は、AddQuicktagでの「文字の下線を引く方法」の設定をしましたが、AddQuicktagではよく使うタグを設定しておくだけで簡単に文字の下線を引くなどの文字装飾やボタンの作成など複数個の設定が可能です。

自分が良く使う記事の装飾を一度登録しておけば、使いたいデザインを使いた時にすぐに使用できますので大変便利です。

今後、徐々に私が現在使用している装飾タグの設定を紹介していきたいと思っています。

次回は、ボタンの作成について説明したいと思います。

参考・・・カーソルを載せると色が変わります。また、リンク先も設定できます。

ボタン 橙(上下)

ボタン 桃(色変)

ボタン 青(色変)

ボタン 橙(色変)

今日は、ここまでです。

このページの目次へ戻る▲

木のナビゲーションボタン「Next」

➤ next 実践記録 062◆Wordpressで簡単に「リンクボタンを作成する」方法

 「日々の実践記録の目次」へ戻る

====================

初心者はネットで稼ぐために何をすべきか。

総合メニュー
 Top (ブログの概要) 
ネットで稼ぐための準備
ネットで稼ぐ稼ぎ方
  日々の実践記録
オススメ情報
HELP・お助け情報
サイトマップ

「ブログの概要」へ戻る

====================

シェアする

フォローする

トップへ戻る