これで便利!吹き出しを設定したい時のAddQuicktagの使い方 

これで便利! 吹き出しを設定したい時のAddQuicktagの使い方 WordPressの使い方
WordPressのプラグイン「AddQuicktag」で、吹き出しを使えるようにしたいから、その方法を教えてほしい!

↑まさにこんな吹き出しを手早く作りたい人のために、AddQuicktagの使い方を紹介します。

 

「AddQuicktag」とは、よく使うコードやタグを登録しておけるプラグインです。これを使えば記事を書くスピードがグンとアップできます。

一度設定すれば吹き出しを作成するのも楽になるので、ぜひ活用しましょう!

 

スポンサーリンク

AddQuicktagでHTMLを追加する

AddQuicktagのインストール

WordPress プラグイン 追加

まずはプラグインをインストールしていきます。WordPressの管理画面から「プラグイン>新規追加」をクリックします。

 

プラグインAddQuicktagのインストール

右上の検索ボックスに「AddQuicktag」と入力すると、その名前のプラグインが表示されるので「今すぐインストール」をクリックします。

 

プラグインAddQuicktagの有効化

インストールが完了したらボタンが「有効化」に変わるのでクリックします。これでインストールが完了です。

 

吹き出しの設定方法

プラグインAddQuicktagの設定

プラグインを有効化すると、プラグイン一覧の画面になります。AddQuicktagの「設定」をクリックしましょう。

 

AddQuicktag設定

ここでタグを登録します。入力していくのは↑上の3つだけでOKです。他の項目は必要ないので今回は入力しません。

 

①ボタン名

自分がわかるような名前を設定します。

WordPress ビジュアルエディタ

↑このように記事投稿画面で使う時に表示される名前になります。

 

②③開始タグ・終了タグ

吹き出しで使うコードが、例えば以下のような場合だったとして、説明していきます。(以下のコードは適当なので使えません。)

HTML
<div class="balloon">
ここに文字をいれる
</div>
CSS
.balloon {
width: 100%;
margin: 1.5em 0;
overflow: hidden;
}
  • 開始タグには:HTMLの<div class="balloon">(文字を入れる箇所の前まで
  • 終了タグには:HTMLの</div>文字を入れる箇所の後から最後まで

をそれぞれ入力します。

 

AddQuicktag設定

こんな感じで入力できたらOKです。

 

AddQuicktag設定

右側のチェック項目は、一番右側にチェックを入れればOKです。(すると全部にチェックが入ります。)

この項目では記事投稿画面でどこに表示するかを設定できるのですが、項目が多くて少しややこしいです。全部表示にしておけば困ることはないので、この設定にしておきます!

 

AddQuicktag変更を保存

入力が終わったら、左下の「変更を保存」を忘れずクリックしましょう。これでタグの登録が完了です。

 

CSSを追加する

タグ(HTML)を登録しただけだと吹き出しが反映されません。次はCSSを登録してきます。

すでにCSSを追加済みの人は、この項目は飛ばしてOKです。

WordPress カスタマイズ

WordPressの管理画面から「外観>カスタマイズ」をクリックします。

 

WordPress CSSの追加

サイト基本情報の中の「追加CSS」をクリックします。

 

WordPress CSSの追加

ここにCSSを追加します。(上にCSSの説明文が表示されていたら、見づらいので「閉じる」をクリックしましょう。)

白枠の中にCSSのコードを全てコピペします。

 

WordPress 追加CSSの公開

こんな感じで貼り付けられたら「公開」をクリックすると、CSSが保存されます。

これでタグが使用できるようになります。

 

投稿画面で使用する方法

WordPress投稿画面でAddQuicktagを使用

登録が完了したら、実際に記事の投稿で使用してみましょう。手順は簡単で、以下の通りです。

  1. 記事投稿画面で、吹き出しの中に入れたい文字を選択します。
  2. ツールバーに「Quicktag」が追加されているのでクリックします。
  3. 先ほど登録した名前のタグを選択します。

これでOKです!

あれ、投稿画面は何も変化がないけど…?

と思うかもしれませんが、大丈夫です。プレビューを確認してましょう。

 

AddQuicktag使用時のプレビュー

コードが正しく投稿出来ていれば、プレビューでちゃんと吹き出しになっていると思います。

これを使えば毎回コードを入力する必要なく、ワンクリックで吹き出しを作ることができるので便利です。

ここで使っている吹き出しのCSSはCSSで作る!吹き出しデザインのサンプル19選を参考にさせていただきました。

 

以上が「AddQuicktag」で吹き出しを使う方法でした。吹き出し以外のCSSデザインも登録できるので、ぜひ活用してみて下さい。

タイトルとURLをコピーしました