「保護中」のコンテンツは近日中に開放していきます

AddQuicktag設定と使い方!吹き出しやマーカーの追加方法も解説!

AddQuicktagの設定と使い方
あなた

ショートコードやHTMLを毎回のように挿入するの面倒くさい!簡単に呼び出せるプラグインないかな?AddQuicktagがいいって聞いたけど、使い方を知りたい!

こんな悩みを持つ方に、ぜひ読んでほしい記事です。

ショートコードやHTMLを多用する場合は、毎回コピペしたり打ち込んだりすると、かなり効率が悪いのでオススメしません。

そんな時に活用してほしいのが「AddQuicktag」というプラグインです。

この記事で分かること
  • AddQuicktagの設定方法
  • AddQuicktagの使い方

入力が面倒なHTMLやショートコードを「2クリックで簡単に挿入できる」ようになるので、ぜひ参考にしてみてください。

この記事を書いた人
とおる
  • ブログ実績:エンタメ系ブログ最高150万PV超&当ブログ最高10万PV超。
  • 仕事:メインはWEBライター・ブログ運営・YouTube(1800人ほど)・Twitter運用代行も経験あり
  • 趣味:筋トレ・食べ歩き・映画鑑賞など
目次

AddQuicktagは時短プラグイン

とおる
テーマに初めから実装されている、吹き出しやマーカーなどは、ショートコードで簡単に挿入できるようになっていますが・・・

Simplicity2のように、初めから実装されていないテーマでは、自分でCSSとHTMLやショートコードなどを実装する必要があります。

CSSは一度貼り付けるだけで導入できますが、HTMLやショートコードは記事を書く度に毎回貼り付ける必要がありますので、結構面倒です。

なので、AddQuicktagを導入することで、2クリックで表示させることができますので、かなり効率よく記事が書けるようになり、時短になります。

AddQuicktag設定と使い方

とおる
それでは、早速AddQuicktagを導入していきましょう!

プラグインから新規追加で

Contact Form7有効化

AddQuicktagを検索して

AddQuicktag有効化

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

AddQuicktag有効化1

AddQuicktagで吹き出しを設定する

AddQuicktagは様々なクイックタグ設定できますが、今回は吹き出しを例に解説していきます。

ちなみに、Simplicity2のようにテーマによっては、吹き出し機能が実装されていないので、必要であれば導入してみてください。

今回は、RA’s(らす)さんが開発した、吹き出しを簡単に挿入できるプラグイン「WP-Speech-Balloon」をご紹介します。

5種類+グレーモード3種類(吹き出し背景グレー)のデザインがあるので、個性的な吹き出しで見栄えが良くなるはずです。

WP-Speech-Balloon1
WP-Speech-Balloon2
WP-Speech-Balloon3
WP-Speech-Balloon4
WP-Speech-Balloon5
WP-Speech-Balloon gray1
WP-Speech-Balloon gray2
WP-Speech-Balloon gray3

まず、下記のプラグインファイルをダウンロードして

プラグインファイルを、プラグイン新規追加プラグインのアップロードから

WP-Speech-Balloonファイル

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

WP-Speech-Balloonファイル2

有効化してください。

WP-Speech-Balloonファイル3

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

WP-Speech-Balloon画像

アップロードします。

WP-Speech-Balloon画像1

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

WP-Speech-Balloon画像2

AddQuicktagの設定から

AddQuicktag設定

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

AddQuicktag設定1

今回はショートコードを入力するので、開始タグに下記のショートコードを入力します。

★部分は、デザインの数字を入力します。

左吹き出しのショートコード
[L★_wsbStart][L_wsbAvatar]画像URL[L_wsbName]表示したい名前[L_wsbText]吹き出しの内容[L_wsbEnd]

右吹き出しのショートコード
[R_wsbStart][R_wsbText]吹き出しの内容[R_wsbAvatar]画像URL[R_wsbName]表示したい名前[R_wsbEnd]

例として、デザイン2の左吹き出しを入力すると、下記の画像のようになります。

AddQuicktag設定2

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

WP-Speech-Balloon1

色は変更できないみたいですが、グレーモード用に変更することで、デザイン1~3の吹き出しの背景色を、グレーに変更できます。

★マークのデザイン数字部分の直後に「_gray」を追加するだけです。

グレーモード付きの左吹き出しショートコード
[L★_gray_wsbStart][L_wsbAvatar]画像URL[L_wsbName]アバター名[L_wsbText]会話の内容[L_wsbEnd]

グレーモード付き右吹き出しショートコード
[R★_gray_wsbStart][R_wsbText]吹き出しの内容[R_wsbAvatar]画像URL[R_wsbName]表示したい名前[R_wsbEnd]

アクセスキーと順番に関しては、スルーでOK。

AddQuicktag設定3

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

AddQuicktag設定4

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

AddQuicktag設定5

ここで、最低限一つのデザインと、左右のショートコードを入力しておけば楽になります。

エディターで数字部分だけを変更しても、デザインは簡単に変更できます。

いろいろ使いたいのであれば、ここで全てのデザインと左右のショートコードを全て、入力しておくことをオススメします。

そして、エディターを見ると「AddQuicktag」の項目が追加されていますので

AddQuicktag設定6

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

AddQuicktag設定7

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

AddQuicktag設定8

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

AddQuicktag設定9

AddQuicktagでマーカーを設定する

「コピペ」で簡単!Webパーツ屋さんで、マーカーのCSSとHTMLをゲットできます。

まずは、クラス名の説明をします。

今回は赤一色だけの流れで一通り解説していきますが、複数色追加したい場合はクラス名を、色ごとに変更する必要があります。

CSSにはクラス名が設定されていて、そのクラス名の内容をHTMLで記事の方に表示させます。

例えば青色なら、下記の図のように別のクラス名を付けるということです。

AddQuicktag設定マーカー11

そして、変更後のHTMLとCSSをブログの方で追加すれば、それぞれの色のマーカーが表示されます。

とりあえず、一色でいいという方は、クラス名を変更する必要はありません。

あとは、背景色部分をクリックして色を選択します。

AddQuicktag設定マーカー

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

AddQuicktag設定マーカー1

今回は、Simplicity2を例に挙げます。

カスタマイズ追加CSSへ。

AddQuicktag設定マーカー2

CSSを貼り付けて

AddQuicktag設定マーカー3

公開をクリックします。

AddQuicktag設定マーカー4

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

AddQuicktag設定マーカー5

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

AddQuicktag設定マーカー6

そして、今回はHTMLを入力するので、開始タグと終了タグに分けて入力します。

終了タグは「/」が付いている最後の部分です。

AddQuicktag設定マーカー7

HTMLは開始タグと終了タグがあり、太字のHTMLの場合には、下記のようになります。

<strong>(開始タグ)太字になる文字</strong>(終了タグ)

となります。

あとは、吹き出しの時と同じように、右端にチェックを入れて、設定を保存してください。

エディターにいき、マーカーを装飾したい文字を選択し

AddQuicktag設定マーカー8

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

AddQuicktag設定マーカー9

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

AddQuicktag設定マーカー10

まとめ

テーマに実装されていない吹き出しや、マーカーなどを自分で実装するには、記事を書く度にHTMLタグを打ち込む面倒がありますが、それを解決してくれるのがAddQuicktagです。

導入することで、エディターから選択するだけで、HTMLタグを簡単に挿入できるので、効率よく記事が書けるようになります。

時短につながるので、うまく活用してもらって、どんどん記事を書いていきましょう。

AddQuicktagの設定と使い方

この記事が気に入ったら
フォローしてね!

役に立ったらシェアしてね!

コメント

コメントする

目次