![](https://pasokon-kasegu.com/wp-content/uploads/2021/04/gimon.png)
ショートコードやHTMLを毎回のように挿入するの面倒くさい!簡単に呼び出せるプラグインないかな?AddQuicktagがいいって聞いたけど、使い方を知りたい!
こんな悩みを持つ方に、ぜひ読んでほしい記事です。
ショートコードやHTMLを多用する場合は、毎回コピペしたり打ち込んだりすると、かなり効率が悪いのでオススメしません。
そんな時に活用してほしいのが「AddQuicktag」というプラグインです。
- AddQuicktagの設定方法
- AddQuicktagの使い方
入力が面倒なHTMLやショートコードを「2クリックで簡単に挿入できる」ようになるので、ぜひ参考にしてみてください。
![](https://pasokon-kasegu.com/wp-content/uploads/2023/12/dd58270eb324af9192060c3af9c80a35.png)
![](https://pasokon-kasegu.com/wp-content/uploads/2023/12/dd58270eb324af9192060c3af9c80a35.png)
- ブログ実績:エンタメ系ブログ最高150万PV超&当ブログ最高10万PV超。
- 仕事:メインはWEBライター・ブログ運営・YouTube(1800人ほど)・Twitter運用代行も経験あり
- 趣味:筋トレ・食べ歩き・映画鑑賞など
AddQuicktagは時短プラグイン
![](https://pasokon-kasegu.com/wp-content/uploads/2021/04/Blogger.jpg)
![](https://pasokon-kasegu.com/wp-content/uploads/2021/04/Blogger.jpg)
![](https://pasokon-kasegu.com/wp-content/uploads/2021/04/Blogger.jpg)
Simplicity2のように、初めから実装されていないテーマでは、自分でCSSとHTMLやショートコードなどを実装する必要があります。
CSSは一度貼り付けるだけで導入できますが、HTMLやショートコードは記事を書く度に毎回貼り付ける必要がありますので、結構面倒です。
なので、AddQuicktagを導入することで、2クリックで表示させることができますので、かなり効率よく記事が書けるようになり、時短になります。
AddQuicktag設定と使い方
![](https://pasokon-kasegu.com/wp-content/uploads/2021/04/Blogger.jpg)
![](https://pasokon-kasegu.com/wp-content/uploads/2021/04/Blogger.jpg)
![](https://pasokon-kasegu.com/wp-content/uploads/2021/04/Blogger.jpg)
プラグインから新規追加で
![Contact Form7有効化](https://pasokon-kasegu.com/wp-content/uploads/2019/04/96be8efb4c8f5c8ed72d782339766f65.png)
![Contact Form7有効化](https://pasokon-kasegu.com/wp-content/uploads/2019/04/96be8efb4c8f5c8ed72d782339766f65.png)
AddQuicktagを検索して
![AddQuicktag有効化](https://pasokon-kasegu.com/wp-content/uploads/2019/04/e2f7eb2be60dba319196baaf10d1efe9.png)
![AddQuicktag有効化](https://pasokon-kasegu.com/wp-content/uploads/2019/04/e2f7eb2be60dba319196baaf10d1efe9.png)
見つけたらインストールして有効化します。
![AddQuicktag有効化1](https://pasokon-kasegu.com/wp-content/uploads/2019/04/bae2758cde0a8f1b3e3a966ff5766a04.png)
![AddQuicktag有効化1](https://pasokon-kasegu.com/wp-content/uploads/2019/04/bae2758cde0a8f1b3e3a966ff5766a04.png)
AddQuicktagで吹き出しを設定する
AddQuicktagは様々なクイックタグ設定できますが、今回は吹き出しを例に解説していきます。
ちなみに、Simplicity2のようにテーマによっては、吹き出し機能が実装されていないので、必要であれば導入してみてください。
今回は、RA’s(らす)さんが開発した、吹き出しを簡単に挿入できるプラグイン「WP-Speech-Balloon」をご紹介します。
5種類+グレーモード3種類(吹き出し背景グレー)のデザインがあるので、個性的な吹き出しで見栄えが良くなるはずです。
![WP-Speech-Balloon1](https://pasokon-kasegu.com/wp-content/uploads/2019/04/WP-Speech-Balloon1.png)
![WP-Speech-Balloon1](https://pasokon-kasegu.com/wp-content/uploads/2019/04/WP-Speech-Balloon1.png)
![WP-Speech-Balloon2](https://pasokon-kasegu.com/wp-content/uploads/2019/04/WP-Speech-Balloon2.png)
![WP-Speech-Balloon2](https://pasokon-kasegu.com/wp-content/uploads/2019/04/WP-Speech-Balloon2.png)
![WP-Speech-Balloon3](https://pasokon-kasegu.com/wp-content/uploads/2019/04/WP-Speech-Balloon3.png)
![WP-Speech-Balloon3](https://pasokon-kasegu.com/wp-content/uploads/2019/04/WP-Speech-Balloon3.png)
![WP-Speech-Balloon4](https://pasokon-kasegu.com/wp-content/uploads/2019/04/WP-Speech-Balloon4.png)
![WP-Speech-Balloon4](https://pasokon-kasegu.com/wp-content/uploads/2019/04/WP-Speech-Balloon4.png)
![WP-Speech-Balloon5](https://pasokon-kasegu.com/wp-content/uploads/2019/04/WP-Speech-Balloon5.png)
![WP-Speech-Balloon5](https://pasokon-kasegu.com/wp-content/uploads/2019/04/WP-Speech-Balloon5.png)
![WP-Speech-Balloon gray1](https://pasokon-kasegu.com/wp-content/uploads/2019/04/WP-Speech-Balloon-gray1.png)
![WP-Speech-Balloon gray1](https://pasokon-kasegu.com/wp-content/uploads/2019/04/WP-Speech-Balloon-gray1.png)
![WP-Speech-Balloon gray2](https://pasokon-kasegu.com/wp-content/uploads/2019/04/WP-Speech-Balloon-gray2.png)
![WP-Speech-Balloon gray2](https://pasokon-kasegu.com/wp-content/uploads/2019/04/WP-Speech-Balloon-gray2.png)
![WP-Speech-Balloon gray3](https://pasokon-kasegu.com/wp-content/uploads/2019/04/WP-Speech-Balloon-gray3.png)
![WP-Speech-Balloon gray3](https://pasokon-kasegu.com/wp-content/uploads/2019/04/WP-Speech-Balloon-gray3.png)
まず、下記のプラグインファイルをダウンロードして
プラグインファイルを、プラグイン→新規追加→プラグインのアップロードから
![WP-Speech-Balloonファイル](https://pasokon-kasegu.com/wp-content/uploads/2019/04/e37ba7f33cfebeb6277a2a4148e9f2b1.png)
![WP-Speech-Balloonファイル](https://pasokon-kasegu.com/wp-content/uploads/2019/04/e37ba7f33cfebeb6277a2a4148e9f2b1.png)
アップロードして、インストール後に
![WP-Speech-Balloonファイル2](https://pasokon-kasegu.com/wp-content/uploads/2019/04/88bfe6c737142422777ebb25da9ad292.png)
![WP-Speech-Balloonファイル2](https://pasokon-kasegu.com/wp-content/uploads/2019/04/88bfe6c737142422777ebb25da9ad292.png)
有効化してください。
![WP-Speech-Balloonファイル3](https://pasokon-kasegu.com/wp-content/uploads/2019/04/17bc86734e976e57e586066b084698c4.png)
![WP-Speech-Balloonファイル3](https://pasokon-kasegu.com/wp-content/uploads/2019/04/17bc86734e976e57e586066b084698c4.png)
次に、吹き出し用の画像(70px以上の正方形)を、メディア→新規追加から
![WP-Speech-Balloon画像](https://pasokon-kasegu.com/wp-content/uploads/2019/04/314549d3d20766906dda96379835e6d1.png)
![WP-Speech-Balloon画像](https://pasokon-kasegu.com/wp-content/uploads/2019/04/314549d3d20766906dda96379835e6d1.png)
アップロードします。
![WP-Speech-Balloon画像1](https://pasokon-kasegu.com/wp-content/uploads/2019/04/75df0dfddd7510b049b534cca11dccc8.png)
![WP-Speech-Balloon画像1](https://pasokon-kasegu.com/wp-content/uploads/2019/04/75df0dfddd7510b049b534cca11dccc8.png)
そして、その画像URLをコピーして、メモ帳などに貼り付けておきます。
![WP-Speech-Balloon画像2](https://pasokon-kasegu.com/wp-content/uploads/2019/04/4d019d9aecf07b73b8e22fe59c6464dc.png)
![WP-Speech-Balloon画像2](https://pasokon-kasegu.com/wp-content/uploads/2019/04/4d019d9aecf07b73b8e22fe59c6464dc.png)
AddQuicktagの設定から
![AddQuicktag設定](https://pasokon-kasegu.com/wp-content/uploads/2019/04/c2bdefe27edeb44cf40d04be89d51919.png)
![AddQuicktag設定](https://pasokon-kasegu.com/wp-content/uploads/2019/04/c2bdefe27edeb44cf40d04be89d51919.png)
ボタン名に分かりやすい名前を付けて、ダッシュアイコンとラベル名は何も入力しなくてOK。
![AddQuicktag設定1](https://pasokon-kasegu.com/wp-content/uploads/2019/04/92fa2cbced44b0f2faea877de2aa4867.png)
![AddQuicktag設定1](https://pasokon-kasegu.com/wp-content/uploads/2019/04/92fa2cbced44b0f2faea877de2aa4867.png)
今回はショートコードを入力するので、開始タグに下記のショートコードを入力します。
★部分は、デザインの数字を入力します。
例として、デザイン2の左吹き出しを入力すると、下記の画像のようになります。
![AddQuicktag設定2](https://pasokon-kasegu.com/wp-content/uploads/2019/04/a05eabe35f13038cdd9949dd73886cd8.png)
![AddQuicktag設定2](https://pasokon-kasegu.com/wp-content/uploads/2019/04/a05eabe35f13038cdd9949dd73886cd8.png)
ちなみに、このWP-Speech-Balloonでは、デザイン1~3の吹き出し背景の色は、左は青で、右はピンクとなっています。
![WP-Speech-Balloon1](https://pasokon-kasegu.com/wp-content/uploads/2019/04/WP-Speech-Balloon1.png)
![WP-Speech-Balloon1](https://pasokon-kasegu.com/wp-content/uploads/2019/04/WP-Speech-Balloon1.png)
色は変更できないみたいですが、グレーモード用に変更することで、デザイン1~3の吹き出しの背景色を、グレーに変更できます。
★マークのデザイン数字部分の直後に「_gray」を追加するだけです。
アクセスキーと順番に関しては、スルーでOK。
![AddQuicktag設定3](https://pasokon-kasegu.com/wp-content/uploads/2019/04/63b5b8e0d4afbbcac4aaedee9c53cb79.png)
![AddQuicktag設定3](https://pasokon-kasegu.com/wp-content/uploads/2019/04/63b5b8e0d4afbbcac4aaedee9c53cb79.png)
あとは、一番右のチェックを入れて、全てにチェックが入ったら
![AddQuicktag設定4](https://pasokon-kasegu.com/wp-content/uploads/2019/04/d8e8d7ec736e21c45095a129a21f032d.png)
![AddQuicktag設定4](https://pasokon-kasegu.com/wp-content/uploads/2019/04/d8e8d7ec736e21c45095a129a21f032d.png)
下の変更を保存をクリックします。
![AddQuicktag設定5](https://pasokon-kasegu.com/wp-content/uploads/2019/04/43f18ae44da06c69eb2e47be5a9c1211.png)
![AddQuicktag設定5](https://pasokon-kasegu.com/wp-content/uploads/2019/04/43f18ae44da06c69eb2e47be5a9c1211.png)
ここで、最低限一つのデザインと、左右のショートコードを入力しておけば楽になります。
エディターで数字部分だけを変更しても、デザインは簡単に変更できます。
いろいろ使いたいのであれば、ここで全てのデザインと左右のショートコードを全て、入力しておくことをオススメします。
そして、エディターを見ると「AddQuicktag」の項目が追加されていますので
![AddQuicktag設定6](https://pasokon-kasegu.com/wp-content/uploads/2019/04/7c326a30a95d01aace361b5eaf90dd13.png)
![AddQuicktag設定6](https://pasokon-kasegu.com/wp-content/uploads/2019/04/7c326a30a95d01aace361b5eaf90dd13.png)
その中から使用したい吹き出しをクリックすれば、タグが挿入されます。
![AddQuicktag設定7](https://pasokon-kasegu.com/wp-content/uploads/2019/04/8096dc5697372c228af22a4c4abbdfd3.png)
![AddQuicktag設定7](https://pasokon-kasegu.com/wp-content/uploads/2019/04/8096dc5697372c228af22a4c4abbdfd3.png)
吹き出し部分の文章を、入力したい内容に書き換えれば
![AddQuicktag設定8](https://pasokon-kasegu.com/wp-content/uploads/2019/04/e27cb2762dbf786ca01e98562d1295df.png)
![AddQuicktag設定8](https://pasokon-kasegu.com/wp-content/uploads/2019/04/e27cb2762dbf786ca01e98562d1295df.png)
吹き出し内容が表示されます。
![AddQuicktag設定9](https://pasokon-kasegu.com/wp-content/uploads/2019/04/1b1f6b46d44d9133c6b5ab52051958b1.png)
![AddQuicktag設定9](https://pasokon-kasegu.com/wp-content/uploads/2019/04/1b1f6b46d44d9133c6b5ab52051958b1.png)
AddQuicktagでマーカーを設定する
「コピペ」で簡単!Webパーツ屋さんで、マーカーのCSSとHTMLをゲットできます。
まずは、クラス名の説明をします。
今回は赤一色だけの流れで一通り解説していきますが、複数色追加したい場合はクラス名を、色ごとに変更する必要があります。
CSSにはクラス名が設定されていて、そのクラス名の内容をHTMLで記事の方に表示させます。
例えば青色なら、下記の図のように別のクラス名を付けるということです。
![AddQuicktag設定マーカー11](https://pasokon-kasegu.com/wp-content/uploads/2019/04/dd938577b75028122caffbbfb5900d65.png)
![AddQuicktag設定マーカー11](https://pasokon-kasegu.com/wp-content/uploads/2019/04/dd938577b75028122caffbbfb5900d65.png)
そして、変更後のHTMLとCSSをブログの方で追加すれば、それぞれの色のマーカーが表示されます。
とりあえず、一色でいいという方は、クラス名を変更する必要はありません。
あとは、背景色部分をクリックして色を選択します。
![AddQuicktag設定マーカー](https://pasokon-kasegu.com/wp-content/uploads/2019/04/5dfb0a14175b76a103326c9a97fe5da2.png)
![AddQuicktag設定マーカー](https://pasokon-kasegu.com/wp-content/uploads/2019/04/5dfb0a14175b76a103326c9a97fe5da2.png)
色を選んだら、下にあるCSSをコピーします。
![AddQuicktag設定マーカー1](https://pasokon-kasegu.com/wp-content/uploads/2019/04/05921c0c569e4264fa12edec5753ada4.png)
![AddQuicktag設定マーカー1](https://pasokon-kasegu.com/wp-content/uploads/2019/04/05921c0c569e4264fa12edec5753ada4.png)
今回は、Simplicity2を例に挙げます。
カスタマイズ→追加CSSへ。
![AddQuicktag設定マーカー2](https://pasokon-kasegu.com/wp-content/uploads/2019/04/39ccd340a65f16182f4cad09fa6ad071.png)
![AddQuicktag設定マーカー2](https://pasokon-kasegu.com/wp-content/uploads/2019/04/39ccd340a65f16182f4cad09fa6ad071.png)
CSSを貼り付けて
![AddQuicktag設定マーカー3](https://pasokon-kasegu.com/wp-content/uploads/2019/04/63306730781fc89be9c3b78a3df1ab97.png)
![AddQuicktag設定マーカー3](https://pasokon-kasegu.com/wp-content/uploads/2019/04/63306730781fc89be9c3b78a3df1ab97.png)
公開をクリックします。
![AddQuicktag設定マーカー4](https://pasokon-kasegu.com/wp-content/uploads/2019/04/1843c6714f65b1a32d413f7dcb1a7bc9.png)
![AddQuicktag設定マーカー4](https://pasokon-kasegu.com/wp-content/uploads/2019/04/1843c6714f65b1a32d413f7dcb1a7bc9.png)
次は、HTMLをコピーします。
![AddQuicktag設定マーカー5](https://pasokon-kasegu.com/wp-content/uploads/2019/04/51c89a48435188bcb4719ce08bc585e7.png)
![AddQuicktag設定マーカー5](https://pasokon-kasegu.com/wp-content/uploads/2019/04/51c89a48435188bcb4719ce08bc585e7.png)
AddQuicktagの設定へいって、ボタン名を入力します。
![AddQuicktag設定マーカー6](https://pasokon-kasegu.com/wp-content/uploads/2019/04/40dedb986273ba8b9652e6e6db0f1383.png)
![AddQuicktag設定マーカー6](https://pasokon-kasegu.com/wp-content/uploads/2019/04/40dedb986273ba8b9652e6e6db0f1383.png)
そして、今回はHTMLを入力するので、開始タグと終了タグに分けて入力します。
終了タグは「/」が付いている最後の部分です。
![AddQuicktag設定マーカー7](https://pasokon-kasegu.com/wp-content/uploads/2019/04/376996521b752ce33e730494bfcb034d.png)
![AddQuicktag設定マーカー7](https://pasokon-kasegu.com/wp-content/uploads/2019/04/376996521b752ce33e730494bfcb034d.png)
HTMLは開始タグと終了タグがあり、太字のHTMLの場合には、下記のようになります。
<strong>(開始タグ)太字になる文字</strong>(終了タグ)
となります。
あとは、吹き出しの時と同じように、右端にチェックを入れて、設定を保存してください。
エディターにいき、マーカーを装飾したい文字を選択し
![AddQuicktag設定マーカー8](https://pasokon-kasegu.com/wp-content/uploads/2019/04/bb5b8db41160a42a3d2157609340e795.png)
![AddQuicktag設定マーカー8](https://pasokon-kasegu.com/wp-content/uploads/2019/04/bb5b8db41160a42a3d2157609340e795.png)
AddQuicktagからマーカーをクリックすれば、マーカーが装飾されます。
![AddQuicktag設定マーカー9](https://pasokon-kasegu.com/wp-content/uploads/2019/04/4e6aad4255fff31199b8b65d9501a8c6.png)
![AddQuicktag設定マーカー9](https://pasokon-kasegu.com/wp-content/uploads/2019/04/4e6aad4255fff31199b8b65d9501a8c6.png)
エディターでは装飾されませんが、プレビューを見るとちゃんと装飾されています。
![AddQuicktag設定マーカー10](https://pasokon-kasegu.com/wp-content/uploads/2019/04/ac2a41ce80ae3ed42d645f986835f743.png)
![AddQuicktag設定マーカー10](https://pasokon-kasegu.com/wp-content/uploads/2019/04/ac2a41ce80ae3ed42d645f986835f743.png)
まとめ
テーマに実装されていない吹き出しや、マーカーなどを自分で実装するには、記事を書く度にHTMLタグを打ち込む面倒がありますが、それを解決してくれるのがAddQuicktagです。
導入することで、エディターから選択するだけで、HTMLタグを簡単に挿入できるので、効率よく記事が書けるようになります。
時短につながるので、うまく活用してもらって、どんどん記事を書いていきましょう。
コメント