WordPress

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

AddQuicktagの設定と使い方

どうも、とおる(@toru_fukulog)です。

今回は、入力が面倒なHTMLやショートコードを、2クリックで簡単に挿入できる時短プラグイン「AddQuicktag」についてご紹介します!

僕がおすすめの吹き出しプラグインの設定やマーカー作成をしながら、同時に使い方をマスターして、効率よく記事を書けるように活用してみましょう!

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タグを簡単に挿入できるので、効率よく記事が書けるようになります。

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

ABOUT ME
とおる
人生を面白・可笑しく生きてます。 月間最高150万PV超え・1日16万PV超え 達成。日給8万円超え・月収60万超え達成。1ブログ770万円で売却成功。簡単なWordPressカスタマイズや画像制作、SEOライティング等を活かして副業系・求人系・投資系のライティング経験もあり。性格は温厚でかなりのマイペース。嫌なことは寝たら忘れるタイプ。食べること・筋トレ、神社など古き良き建物好き。詳細なプロフィールはこちら
ブログノウハウを無料でプレゼント中!

0から数ヶ月で月間150万PV、月収60万円超、日給8万円達成し、770万円で売却に成功したブログの作り方や、稼ぐために必要なマインドなど全て手に入れて、あなたの人生を面白・可笑しくしていきましょう!

 

COMMENT

メールアドレスが公開されることはありません。