どうも、とおる(@fukulog_toru)です。
今回は、入力が面倒な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タグを簡単に挿入できるので、効率よく記事が書けるようになります。
時短につながるので、うまく活用してもらって、どんどん記事を書いていきましょう。
