どうも、とおる(@toru_fukulog)です。
今回は、入力が面倒なHTMLやショートコードを、2クリックで簡単に挿入できる時短プラグイン「AddQuicktag」についてご紹介します!
僕がおすすめの吹き出しプラグインの設定やマーカー作成をしながら、同時に使い方をマスターして、効率よく記事を書けるように活用してみましょう!
好きな場所にジャンプできるよ!
AddQuicktagは時短プラグイン
Simplicity2のように、初めから実装されていないテーマでは、自分でCSSとHTMLやショートコードなどを実装する必要があります。
CSSは一度貼り付けるだけで導入できますが、HTMLやショートコードは記事を書く度に毎回貼り付ける必要がありますので、結構面倒です。
なので、AddQuicktagを導入することで、2クリックで表示させることができますので、かなり効率よく記事が書けるようになり、時短になります。
AddQuicktag設定と使い方
プラグインから新規追加で

AddQuicktagを検索して

見つけたらインストールして有効化します。

AddQuicktagで吹き出しを設定する
AddQuicktagは様々なクイックタグ設定できますが、今回は吹き出しを例に解説していきます。
ちなみに、Simplicity2のようにテーマによっては、吹き出し機能が実装されていないので、必要であれば導入してみてください。
今回は、RA’s(らす)さんが開発した、吹き出しを簡単に挿入できるプラグイン「WP-Speech-Balloon」をご紹介します。
5種類+グレーモード3種類(吹き出し背景グレー)のデザインがあるので、個性的な吹き出しで見栄えが良くなるはずです。








まず、下記のプラグインファイルをダウンロードして
プラグインファイルを、プラグイン→新規追加→プラグインのアップロードから

アップロードして、インストール後に

有効化してください。

次に、吹き出し用の画像(70px以上の正方形)を、メディア→新規追加から

アップロードします。

そして、その画像URLをコピーして、メモ帳などに貼り付けておきます。

AddQuicktagの設定から

ボタン名に分かりやすい名前を付けて、ダッシュアイコンとラベル名は何も入力しなくてOK。

今回はショートコードを入力するので、開始タグに下記のショートコードを入力します。
★部分は、デザインの数字を入力します。
例として、デザイン2の左吹き出しを入力すると、下記の画像のようになります。

ちなみに、このWP-Speech-Balloonでは、デザイン1~3の吹き出し背景の色は、左は青で、右はピンクとなっています。

色は変更できないみたいですが、グレーモード用に変更することで、デザイン1~3の吹き出しの背景色を、グレーに変更できます。
★マークのデザイン数字部分の直後に「_gray」を追加するだけです。
アクセスキーと順番に関しては、スルーでOK。

あとは、一番右のチェックを入れて、全てにチェックが入ったら

下の変更を保存をクリックします。

ここで、最低限一つのデザインと、左右のショートコードを入力しておけば楽になります。
エディターで数字部分だけを変更しても、デザインは簡単に変更できます。
いろいろ使いたいのであれば、ここで全てのデザインと左右のショートコードを全て、入力しておくことをオススメします。
そして、エディターを見ると「AddQuicktag」の項目が追加されていますので

その中から使用したい吹き出しをクリックすれば、タグが挿入されます。

吹き出し部分の文章を、入力したい内容に書き換えれば

吹き出し内容が表示されます。

AddQuicktagでマーカーを設定する
「コピペ」で簡単!Webパーツ屋さんで、マーカーのCSSとHTMLをゲットできます。
まずは、クラス名の説明をします。
今回は赤一色だけの流れで一通り解説していきますが、複数色追加したい場合はクラス名を、色ごとに変更する必要があります。
CSSにはクラス名が設定されていて、そのクラス名の内容をHTMLで記事の方に表示させます。
例えば青色なら、下記の図のように別のクラス名を付けるということです。

そして、変更後のHTMLとCSSをブログの方で追加すれば、それぞれの色のマーカーが表示されます。
とりあえず、一色でいいという方は、クラス名を変更する必要はありません。
あとは、背景色部分をクリックして色を選択します。

色を選んだら、下にあるCSSをコピーします。

今回は、Simplicity2を例に挙げます。
カスタマイズ→追加CSSへ。

CSSを貼り付けて

公開をクリックします。

次は、HTMLをコピーします。

AddQuicktagの設定へいって、ボタン名を入力します。

そして、今回はHTMLを入力するので、開始タグと終了タグに分けて入力します。
終了タグは「/」が付いている最後の部分です。

HTMLは開始タグと終了タグがあり、太字のHTMLの場合には、下記のようになります。
<strong>(開始タグ)太字になる文字</strong>(終了タグ)
となります。
あとは、吹き出しの時と同じように、右端にチェックを入れて、設定を保存してください。
エディターにいき、マーカーを装飾したい文字を選択し

AddQuicktagからマーカーをクリックすれば、マーカーが装飾されます。

エディターでは装飾されませんが、プレビューを見るとちゃんと装飾されています。

まとめ
テーマに実装されていない吹き出しや、マーカーなどを自分で実装するには、記事を書く度にHTMLタグを打ち込む面倒がありますが、それを解決してくれるのがAddQuicktagです。
導入することで、エディターから選択するだけで、HTMLタグを簡単に挿入できるので、効率よく記事が書けるようになります。
時短につながるので、うまく活用してもらって、どんどん記事を書いていきましょう。