実践記録 063◆WordPressのプラグイン・AddQuickTagで簡単に「文章を囲む」設定方法

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

WordPressの記事作成時に記事の中で特に部分的に文章を強調したい場合がよくあります。
そこで、WordPressのプラグインのAddQuickTagを使用して、その設定画面より各種の「文章を囲む」ボタン用タグを設置して簡単に「文章を囲むボタンを作成する」方法を解説します。

 日々の実践記録                 

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

実践記録◆Wordpressのプラグイン・AddQuickTagで簡単に「文章を囲む」設定方法

WordPressの記事作成時に記事の中で特に部分的に文章を強調したい場合がよくあります。
そこで、WordPressのプラグインのAddQuickTagを使用して、その設定画面より各種の「文章を囲む」ボタン用タグを設置して簡単に「文章を囲むボタンを作成する」方法を解説します。

このボタンにより記事中の箇条書きした重要な部分などを色付きの枠で表示することが簡単にできるようになります。

具体的にはプラグインのAddQuickTagをを使用しますが、その設定について解説したいと思います。

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

AddQuickTagのインストール

1.AddQuickTagの設定方法

設定する文章を囲む枠の種類は全部で9種で、枠無し(色のみ)が3種類、枠あり(外枠ありで色つき)が6種類です。


1-1.  囲む・枠無(薄青)

xxxx
xxxx

1-2. 囲む・枠無(薄ピンク)

xxxx
xxxx

1-3. 囲む・枠無(薄橙)

xxxx
xxxx

1-4. 囲む・実線(ピンク )

xxxx
xxxx

1-5. 囲む・実線(青 )

xxxx
xxxx

1-6. 囲む・実線(青 背景–無)

xxxx
xxxx

1-7. 囲む・実線(橙)

xxxx
xxxx

1-8. 囲む・実線太(橙 背景–薄橙)

xxxx
xxxx

1-9. 囲む・実線太(青 背景–薄青)

xxxx
xxxx

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

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

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

1-1) 囲む・枠無(薄青)・・・AddQuicktagの設定項目の説明

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

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

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

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

設定項目内容
ボタン名囲む・枠無(薄青)
ダッシュアイコンボタン名の横に表示されるアイコン
ラベル名ボタンにカーソルを乗せたときに表示する補足テキスト
開始タグ<div style=”padding: 16px; border-radius: 10px; background-color: #bed6e5; margin-top: 30px; margin-bottom: 30px;”>button type=”button”>
終了タグ</div>
アクセスキーショートカットキーの設定
並び順310

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

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

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

実施例・・・囲む・枠無(薄青) 

xxxx
xxxx

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

1-2) 囲む・枠無(薄ピンク)・・・AddQuicktagの設定項目の説明

設定項目のみを記載しておきます。
(設定方法の全容は、「1-1 囲む・枠無(薄青)」の場合と同様です。

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

設定項目内容
ボタン名囲む・枠無(薄ピンク)
ダッシュアイコンボタン名の横に表示されるアイコン
ラベル名ボタンにカーソルを乗せたときに表示する補足テキスト
開始タグ<div style=”padding: 16px; border-radius: 10px; background-color: #f4dede; margin-top: 30px; margin-bottom: 30px;”>
終了タグ</div>
アクセスキーショートカットキーの設定
並び順320

実施例・・・囲む・枠無(薄ピンク)

xxxx
xxxx

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

1-3) 囲む・枠無(薄橙)・・・AddQuicktagの設定項目の説明

設定項目のみを記載しておきます。
(設定方法の全容は、「1-1 囲む・枠無(薄青)」の場合と同様です。

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

設定項目内容
ボタン名囲む・枠無(薄橙)
ダッシュアイコンボタン名の横に表示されるアイコン
ラベル名ボタンにカーソルを乗せたときに表示する補足テキスト
開始タグ<div style=”padding: 16px; border-radius: 10px; background-color: #ffe0b2; margin-top: 30px; margin-bottom: 30px;”>
終了タグ</div>
アクセスキーショートカットキーの設定
並び順330

実施例・・・ 囲む・枠無(薄橙)

xxxx
xxxx

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

1-4) 囲む・実線(ピンク )・・・AddQuicktagの設定項目の説明

設定項目のみを記載しておきます。
(設定方法の全容は、「1-1 囲む・枠無(薄青)」の場合と同様です。

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

設定項目内容
ボタン名囲む・実線(ピンク )
ダッシュアイコンボタン名の横に表示されるアイコン
ラベル名ボタンにカーソルを乗せたときに表示する補足テキスト
開始タグ<div style=”padding: 16px; border: solid 3px #e07fc1; border-radius: 10px; background-color: #f4dede; margin-top: 30px; margin-bottom: 30px;”>
終了タグ</div>
アクセスキーショートカットキーの設定
並び順410

実施例・・・ 囲む・実線(ピンク )

xxxx
xxxx

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

1-5) 囲む・実線(青 )・・・AddQuicktagの設定項目の説明

設定項目のみを記載しておきます。
(設定方法の全容は、「1-1 囲む・枠無(薄青)」の場合と同様です。

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

設定項目内容
ボタン名囲む・実線(青 )
ダッシュアイコンボタン名の横に表示されるアイコン
ラベル名ボタンにカーソルを乗せたときに表示する補足テキスト
開始タグ<div style=”padding: 16px; border: solid 3px #4169e1; border-radius: 10px; background-color: #bed6e5; margin-top: 30px; margin-bottom: 30px;”>
終了タグ</div>
アクセスキーショートカットキーの設定
並び順420

実施例・・・囲む・実線(青 )

xxxx
xxxx

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

1-6) 囲む・実線(青 背景–無))・・・AddQuicktagの設定項目の説明

設定項目のみを記載しておきます。
(設定方法の全容は、「1-1 囲む・枠無(薄青)」の場合と同様です。

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

設定項目内容
ボタン名囲む・実線(青 背景–無))
ダッシュアイコンボタン名の横に表示されるアイコン
ラベル名ボタンにカーソルを乗せたときに表示する補足テキスト
開始タグ<div style=”padding: 16px; border: solid 3px #4169e1; border-radius: 10px; background-color: #f0f8ff; margin-top: 30px; margin-bottom: 30px;”>
終了タグ</div>
アクセスキーショートカットキーの設定
並び順430

実施例・・・囲む・実線(青 背景–無)

xxxx
xxxx

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

1-7) 囲む・実線(橙)・・・AddQuicktagの設定項目の説明

設定項目のみを記載しておきます。
(設定方法の全容は、「1-1 囲む・枠無(薄青)」の場合と同様です。

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

設定項目内容
ボタン名囲む・実線(橙 )
ダッシュアイコンボタン名の横に表示されるアイコン
ラベル名ボタンにカーソルを乗せたときに表示する補足テキスト
開始タグ<div style=”padding: 16px; border: solid 3px #ff9933; border-radius: 10px; background-color: #ffe0b2; margin-top: 30px; margin-bottom: 30px;”>
終了タグ</div>
アクセスキーショートカットキーの設定
並び順440

実施例・・・囲む・実線(橙)

xxxx
xxxx

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

1-8) 囲む・実線太(橙 背景–薄橙)・・・AddQuicktagの設定項目の説明

設定項目のみを記載しておきます。
(設定方法の全容は、「1-1 囲む・枠無(薄青)」の場合と同様です。

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

設定項目内容
ボタン名囲む・実線太(橙 背景–薄橙)
ダッシュアイコンボタン名の横に表示されるアイコン
ラベル名ボタンにカーソルを乗せたときに表示する補足テキスト
開始タグ<div style=”padding: 16px; border: solid 8px #ff9933; border-radius: 10px; background-color: #fffacd; margin-top: 30px; margin-bottom: 30px;”>
終了タグ</div>
アクセスキーショートカットキーの設定
並び順510

実施例・・・囲む・実線太(橙 背景–薄橙)

xxxx
xxxx

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

1-9) 囲む・実線太(青 背景–薄青)・・・AddQuicktagの設定項目の説明

設定項目のみを記載しておきます。
(設定方法の全容は、「1-1 囲む・枠無(薄青)」の場合と同様です。

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

設定項目内容
ボタン名囲む・実線太(青 背景–薄青))
ダッシュアイコンボタン名の横に表示されるアイコン
ラベル名ボタンにカーソルを乗せたときに表示する補足テキスト
開始タグ<div style=”padding: 16px; border: solid 8px #4169e1; border-radius: 10px; background-color: #e0ffff; margin-top: 30px; margin-bottom: 30px;”>
終了タグ</div>
アクセスキーショートカットキーの設定
並び順520

実施例・・・囲む・実線太(青 背景–薄青)

xxxx
xxxx

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

2.AddQuicktagの使い方

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

2-1) ボタンを設置したい箇所にカーソルを移動

ボタンを設置したい箇所の先頭にカーソルを移動します。

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

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

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

2-3) プルダウンメニューの「囲む・枠無(薄青)」をクリック

次に、そのプルダウンメニューに今登録したボタン名の、囲む・枠無(薄青)がありますので、文章を囲みたい箇所を選択(ペースト)したあと「囲む・枠無(薄青)」のメニューをクリックします。

すると、下記のように、文章を読みやすくするために「文章を囲む」ことができます。

xxxx
xxxx

このように、プルダウンメニューから登録した「文章を囲む」種類を選択すれば、枠線の有無や文章を囲む色などを簡単に選択して記事を作成することができます。

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

3.まとめ

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

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

関連の記事を記載しておきます。

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

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

➤ next 実践記録 064◆Wordpressでの実践記録の記事作成用テンプテート

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

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

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

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

「ブログの概要」へ戻る

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

シェアする

フォローする

トップへ戻る