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

 日々の実践記録               　　

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

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

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

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

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

AddQuickTagのインストール

１．AddQuickTagの設定方法

設定する文章を囲む枠の種類は全部で9種で、枠無し（色のみ）が３種類、枠あり（外枠ありで色つき）が６種類です。

1-1.  囲む・枠無（薄青）

1-2. 囲む・枠無（薄ピンク）

1-3. 囲む・枠無（薄橙）

1-4. 囲む・実線（ピンク ）

1-5. 囲む・実線（青 ）

1-6. 囲む・実線（青 背景–無）

1-7. 囲む・実線（橙）

1-8. 囲む・実線太（橙 背景–薄橙）

1-9. 囲む・実線太（青 背景–薄青）

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

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

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

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

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

１ボタン名、２開始タグ、３終了タグ、４並び順、５チェックの５項目です。

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

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

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

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

実施例・・・囲む・枠無（薄青）　

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

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

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

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

実施例・・・囲む・枠無（薄ピンク）

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

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

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

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

実施例・・・　囲む・枠無（薄橙）

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

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

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

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

実施例・・・　囲む・実線（ピンク ）

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

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

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

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

実施例・・・囲む・実線（青 ）

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

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

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

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

実施例・・・囲む・実線（青 背景–無）

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

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

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

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

実施例・・・囲む・実線（橙）

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

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

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

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

実施例・・・囲む・実線太（橙 背景–薄橙）

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

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

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

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

実施例・・・囲む・実線太（青 背景–薄青）

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

２．AddQuicktagの使い方

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

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

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

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

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

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

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

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

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

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

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

３．まとめ

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

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

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

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

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

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

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

➤ 「ブログの概要」へ戻る

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