ブログを書くときに、毎回吹き出しやボックスのコードをコピペしていませんか？特にJINテーマは装飾が豊富で、何度も同じコードを入力するのは手間がかかりますよね。
そんなときに役立つのが、「AddQuicktag」というプラグインです！
この記事では、初心者の方でもすぐに使えるように、 AddQuicktagの導入〜吹き出しショートコードの登録方法まで、画像を使ってわかりやすく解説します。
AddQuicktagとは？
AddQuicktagは、WordPressの投稿画面に「自分専用のボタン」を追加できるプラグインです。
これを使うと、よく使うHTMLタグやショートコードをボタン1つで挿入できるようになります。
STEP1：AddQuicktagをインストールしよう
まずは、WordPressに「AddQuicktag」をインストールしましょう。
インストール手順
- WordPress管理画面の左のメニューから「プラグイン」→「新規追加」をクリック
- 検索ボックスに「AddQuicktag」と入力
- プラグインが表示されたら【今すぐインストール】をクリック
- インストール後、【有効化】を押す
これで準備完了です！では、画像で見ていきましょう。
「AddQuicktag」のインストールができましたら、次にふきだし用の画像をアップロードしてみましょう。
STEP2：吹き出し用の画像をアップロードしよう
吹き出しを使うには、キャラクターの画像（アイコン）が必要です。ここでは、吹き出しで使う画像をWordPressに登録し、「URL」を取得する方法を解説します。
ふきだし用画像の登録手順
- WordPress管理画面の左メニュー「メディア」→「メディアファイルを追加」をクリック
- 吹き出し用に使いたい画像（顔写真やイラスト）をアップロード
- アップロード完了後、画像をクリック
- 右側に表示される「ファイルのURL」をコピー
- この「ファイルのURL」を、次のステップでショートコードに貼り付けます。
160px～200pxの正方形アイコンがバランスよく表示されます。
STEP3：吹き出しショートコードを確認しよう
画像のURLを取得できたら、いよいよ吹き出しコードを登録しますが、その前に吹き出しのコードとはどんなものか確認してみましょう。
① 吹き出しのショートコード
ふきだしを表示するショートコードはこちらになります。
吹き出しの内容
[/chat]
このコードに必要な情報を入力することで、ふきだしの位置や、ふきだしの色などを指定できます。
② ふきだしの画像情報を入力
STEP2でコピーした画像のURL情報をコードの「face=”画像情報”」に貼り付けましょう。 すると、画像を取得することができます。
ふきだしの画像に丸い枠をつけたい場合は、コードの最後に「style=”maru”」を追加すると表示することができます。
「style=”maru”」の前に半角スペースが入ります。
③ ふきだし画像の名前を入力
画像を取得したら、その画像の下に表示される名前を「name=”キャラクター名”」に入力しましょう。
④ ふきだしの配置を決める
ふきだしの配置を左にする場合は「left」、右にする場合は「right」を「 align=”配置”」に入力します。
⑤ ふきだしの枠の色を決める
ふきだしの枠の色を指定できます。
枠の色なしは「none」を、色をつけたい時は「gray」「blue」「red」「yellow」「green」のいずれかを「border=”枠の色”」に入力します。
⑥ ふきだしの背景色を決める
ふきだしの背景色を指定できます。枠の色なしは「none」を、色をつけたい時は「gray」「blue」「red」「yellow」「green」のいずれかを「bg=”背景色”」に入力します。
STEP4：吹き出しコードをAddQuicktagに登録しよう
「AddQuicktag」にふきだしのショートコードを登録する方法を画像を見ながら順番に解説していきます。
「AddQuicktag」登録手順
① WordPress管理画面左の「設定」→「AddQuicktag」をクリック
② 「クイックタグの追加と削除ページ」の「開始タグ」にふきだしのショートコードを入力します。
（終了タグの欄があるのですが、開始タグにすべて入力しても実行されるので、この方法で紹介しています）
③ ボタンラベルに「ふきだし」や「ふきだしのキャラクター名」など、自分が使う時にわかりやすいボタン名を入力します（ラベル名は自由）
④ 一番右にチェックを入れ、すべてにチェックが入るようにし、「変更を保存」ボタンをクリックします。
⑤ 設定が保存されると、「Quicktags」ボタンが設置されます
「AddQuicktag」応用方法
「ふきだし右」、「ふきだし左」など、いろんな種類を入力しておくことで、ブログ記事に合わせてふきだしを簡単に呼び出すことができます。
ボタン名にラベルをつけることもできます。
「AddQuicktag」使い方
「AddQuicktag」への登録ができましたら、次は実際にふきだしを呼び出して使ってみましょう。
①「Quicktags」ボタンをクリックし、作成したボタン名をクリックすると、ふきだしコードが入力されます。
② ”吹き出しの内容” に、ふきだしに入れたいコメントを入力すると、投稿画面に反映されます
まとめ
AddQuicktagでは、ふきだし以外にもよく使うコードを登録することができます。
手順は同じなので、ボックスコードやアイコンコードなどを登録して、ブログ記事作成の効率をアップしちゃいましょう。
▼こちらはJINテーマのショートコード一覧が載っています
https://jin-theme.com/manual/shortcord-list/
