こんな方に読んで欲しい！
- Webサイトでよく使うデザインを簡単に使いまわしたい！
- いつも使う「タグ」を簡単に呼び出せるようにしたい！
- 「AddQuicktag（アドクイックタグ）」の使い方を知りたい！
WordPressで使うデザインを管理するのは、意外と大変ですよね。CSSで設定できればまだ手間は少なくて済みますが、CSSを扱えない方も多くいらっしゃいます。
あなたはどうですか？下のようなこと、していませんか？
- Excelで良く使うデザインを管理
- 過去の記事の中から探してコピペ
- windowsの「ユーザー辞書ツール」で登録して呼び出し
こんな方法で管理されている方に朗報です。もうこんな面倒くさい方法は必要ありません。
今回の記事では、AddQuicktagプラグインでいつも使うデザインを一発で呼び出す方法を徹底解説します！
1. AddQuicktagってどんなプラグイン？
AddQuicktag（アドクイックタグ）プラグインは、いつも使うデザインを簡単に呼び出すことができるプラグインです。
もう少し具体的に書けば、WordPressの記事作成画面の上の方に出てくる「クイックタグ」を作ることができるプラグインです。
クイックタグを作っておくと、毎回コードを書く（もしくはコピペする）手間が省けます。
間違う可能性もなくなり、使いたいデザインを確実に入れることができます。
小さなことと感じるかもしれませんが、こうした省力化（なるべく手をかけない方法）が、Webサイトの運営を続ける秘訣だったりします。
ここがポイント！
AddQuicktagプラグインは、エディタが旧バージョンだった時から存在するプラグインで、ブロックエディタ（Gutenberg）を想定していません。ブロックのフォーマットを「クラシック」にすれば使えなくもないですが、オススメはできません。
今回は、旧エディタを使うことを前提に書いています。
2. AddQuicktagの導入方法
AddQuicktagプラグインの導入方法です。ダッシュボードのプラグイン→新規追加をクリックします。
プラグインの検索ボックスが画面右にありますので、「AddQuicktag」を検索してプラグインを探しましょう。
AddQuicktagプラグインが画面に表示されます。似たプラグインもありますので注意してください。
「今すぐインストール」ボタンをクリックします。
インストールすると、ボタンが「有効化」に変わりますので、「有効化」ボタンをクリックして、有効化します。
3. AddQuicktagプラグインの設定方法
AddQuicktagプラグインを「インストール」後に「有効化」すると、ダッシュボードの設定画面にAddQuicktagが追加されます。
「設定 > AddQuicktag」を選択すると、クイックタグの追加と削除ができる画面が表示されます。
まず、クイックタグの追加と削除の設定画面を見ていきましょう。
3-1. クイックタグの追加
この画面でクイックタグを登録すれば、記事を編集する画面の上部に登録したクイックタグが追加で表示されます。
①ボタンのラベル（必須）
ビジュアルエディタのプルダウンや、テキストエディタのボタンに表示されます。「吹き出し」とか「黄マーカー」など簡単な言葉を入力しましょう。
②ダッシュアイコン
準備されているアイコンを選択すると、プルダウンのラベル横に表示されます。「①ボタンのラベル」を見ればわかるので、設定しなくても良いでしょう。
③ラベル名
ビジュアルエディタのプルダウンや、テキストエディタのボタンにマウスを乗せた時、説明として表示されます。「①ボタンのラベル」で判別できるので、こちらも基本的には入力不要です。
④開始タグ、⑤終了タグ（必須）
タグの開始部分、終了部分を入力します。具体例は「」を参照。
⑥アクセスキー
IE（インターネットエクスプローラー）を使っている場合は、ここにアクセスキーを登録しておけば、ショートカットキー（例：「Ctrl＋ｃ」でコピー）のように使えるようになります。（IE以外では使えません）
⑦順番
ビジュアルエディタのプルダウンや設定画面の順番を変える際に使用します。入力された数字の小さい順に並びます。連番である必要はありません！
⑧どこで使えるようにするか
「投稿」「固定ページ」「コメント」「ウィジェット」など、作成したクイックタグをどこで使えるようにするか設定します。基本的に全てにチェックを付けておけばOKです。右端の「✓」欄の四角にチェックを付けると、左側の四角全てにチェックが入ります。
さらに詳しく！
widgets：ウィジェットに表示されますが、ビジュアルエディタで使う場合には、別途「WP Editor Widget」が必要です。
さらに詳しく！
3-2. クイックタグの削除
登録したけど使わないクイックタグは消してしまいましょう。
消したいクイックタグの「①ボタンのラベル」や「④開始タグ」など、入力された文字を全て削除し、「⑧どこで使えるようにするか」のチェックも全てはずしてください。
「クイックタグの追加と削除」欄の下部に「変更を保存」ボタンがありますので、クリックして保存してください。
これで削除できます。
3-3. デフォルトのクイックタグを非表示にする
「クイックタグの追加と削除」欄の下には「デフォルトのクイックタグを非表示にする」という項目があります。
デフォルト（元から表示してある）クイックタグを表示させないこともできます。表示させたくないものにチェックを付けて、下部の「変更を保存」ボタンをクリックします。
3-4. 拡張コードクイックタグボタン
さらに下にスクロールすると「拡張コードクイックタグボタン」があります。
記事上にHTMLやCSSなどをコードとしてそのまま表示させるときに使用するものですが、この機能は「Crayon Syntax Highlighter」というソースコードを表示させるプラグインを使った方が便利です。
3-5. エクスポート・インポート
作成したクイックタグを他のサイトでも使えるようにエクスポート（出力）したり、他のサイトで作成したデータをインポート（入力）したりする時に使う機能です。
あらかじめエクスポート（出力）しておけば、間違って消してしまったタグをバックアップするようなこともできますね。
4. AddQuicktagプラグインの設定例
では、いくつか設定例を載せますので、一緒に操作してみてください！
4-1. クイックタグの追加例① 青枠で囲むデザイン
何かを強調したい時、何かを目立たせたい時、特定の意味がある時、ボタンなど、文字を枠で囲むことがあります。これをAddQuicktagで追加設定してみましょう。（※必須項目だけ記載します）
さらに詳しく！
「margin」や「padding」は、あなたが使っているテーマによって適切な値が違います。数値を調整してみてください。
4-1-1. 設定内容
①ボタンのラベル（必須）：青枠
④開始タグ ：
<div style="border: 1px solid #0033ff; padding: 10px; margin-top: -10px; margin-bottom: 10px;">
⑤終了タグ ：
</div>
⑧どこで使えるようにするか ： 右端の四角にチェック
4-1-2. サンプル
4-2. クイックタグの追加例② 青枠で囲むデザイン（角丸）
4-2-1. 設定内容
①ボタンのラベル（必須）：青枠
④開始タグ ：
<div style="border: 1px solid #0033ff; padding: 10px; border-radius: 10px; margin-top: -10px; margin-bottom: 10px;">
⑤終了タグ ：
</div>
⑧どこで使えるようにするか ： 右端の四角にチェック
4-2-2. サンプル
4-3. クイックタグの追加例③ ポイントボックス
4-3-1. 設定内容
①ボタンのラベル（必須）：ポイントボックス
④開始タグ ：
<fieldset style="border: 1px solid #ff0000; padding: 10px; margin-top: -10px; margin-bottom: 10px;"><legend>▼ポイント！</legend>
⑤終了タグ ：
</fieldset>
⑧どこで使えるようにするか ： 右端の四角にチェック
4-3-2. サンプル
4-4. クイックタグの追加例④ 緑塗りつぶしボックス
4-4-1. 設定内容
①ボタンのラベル（必須）：緑塗りつぶしボックス
④開始タグ ：
<div style="border: 1px solid #367f00; padding: 10px; border-radius: 10px; background: #cfffab; margin-top: -10px; margin-bottom: 10px;">
⑤終了タグ ：
</div>
⑧どこで使えるようにするか ： 右端の四角にチェック
4-4-2. サンプル
5. AddQuicktagプラグインの使い方
設定を終えたら、使ってみましょう！
記事を編集する際、設定したいデザインを適用したい文章があったら、以下のように操作します。
5-1. 適用したい場所を選択
まず適用したい文章を、マウスを左クリックしながら選択します。
色が青や灰色などになれば、選択していることになります。この状態になったら、左クリックは離してもOKです。
5-2. クイックタグを選ぶ
次に、選択した状態のまま「Quicktags」をクリックし、適用したいデザインを選択します。
選択した部分にだけ、「青枠で囲む（角丸）」デザインが適用されました。
プレビューを見ると、こんな感じに適用されています。
6、まとめ
Webサイトのデザインで重要なポイントの１つに、「統一性」があります。
「重要な部分はこのデザイン」「注意すべき部分はこのデザイン」というようにデザインを統一することで、ユーザ（読者）は自然と意味を理解し読み進めてくれますし、あなたのWebサイトの別の記事も抵抗感なく読んでくれるようになります。
毎回、コードを書いたり、コピペしていると、間違う可能性があります。そうすると、「統一性」が崩れてしまうわけです。
間違いなく確実に同じデザインを適用し、作業効率も上げるために「AddQuicktagプラグイン」を使いましょう！