ワードプレスで文字を入力していると、「ここの文字を囲んで目立たせたいな」とか「人物画像をいれたんだけど、吹き出しを入れて喋っているように見せたいな」とか思うことってありませんか。
普通はHTMLタグを入力して文字装飾をするわけですけど、そのたびにHTMLタグを入力するのは面倒ですね。
そんなときに便利なのがHTMLタグを２アクションで入力してくれるAddQuicktagというプラグインです。
ここでは、AddQuicktagにHTMLタグを設定する方法と文字囲みと吹き出しのHTMLタグをご紹介します。
長文になりますが、お付き合いください。
（本記事ではClassic Editorで書いています。）
AddQuicktagの設定方法
AddQuicktagを利用するためには、プラグインをインストールして有効化しないといけません。
プラグインのインストール方法や停止についてはワードプレス プラグインの入れ方・停止・アンインストールの方法で解説しているよ。
AddQuicktagの設定画面を出す
ダッシュボードの設定＞AddQuicktagをクリックして設定画面を出します。
（プラグイン＞インストール済プラグイン＞AddQuicktagの下の設定という文字をクリックしても同じです。）
すると、下図のようにHTMLタグを設定する画面になるので、一番左の列の「ボタン名」、その右の列の「開始タグ」と「終了タグ」を入力します。（右に並ぶチェックボタンは図の通りでかまいません。右端のチェックボタンをチェックすると全部にチェックが入ります。）
次に下の「変更を保存」ボタンをクリックします。
因みに、アクセスキーはここに登録したキーと「ALT」キーを同時に押すことで登録したHTMLタグが有効になります。
また、並び順は編集画面に表示される順番のことで、入力しないと登録順に並びます（後から登録したものが上）。
HTMLタグを登録する
ここでは試しに赤い太字を登録してみます（ほかに黄色マーカーと黒太字も登録してます。）
開始タグは「<span style=”color: #ff0000;”><b>」終了タグは「</b></span>」になります。（ひとつのタグの開始は常に「<」で始まって「>」で終わります。）
そうすると、編集画面にQuicktagのウィンドーが出てタグを選択できるようになりますので、文字を入力してから装飾したい文字を選択して、指定したいラベル名を選択すると装飾されます。
例として、下の文字を装飾してみました。
赤太字
赤太字
ちゃんと赤く太い文字に装飾されました。
囲み枠タグ
ここで囲み枠に関するタグについて、分かりにくいところを少し解説しておきます。
datted・・点線を表しています。
solid・・枠線を指しています。
padding・・枠の内側の余白を設定します。値が大きいほど広くなります。
margin-bottom・・下の余白のことです。
border・・線の太さを指定します。値が大きいほど太くなります。
radius・・枠の角の丸みの指定です。数字が大きいと丸みが大きくなります。
background・・枠の背景色を指定します。
＃から続く６桁の数字・アルファベット・・色の種類を表しています。（カラーコードはコチラを参照してください。）
それでは囲み枠のHTMLタグをいくつかご紹介しますが、終了タグはすべて</div>になります。
細かい点線の囲み枠
開始タグ・・<div style=”padding: 10px; margin-bottom: 10px; border: 1px dotted #000000;”>
破線の囲み枠
上より粗い破線の囲み枠にするには、dottedをdashedに書き換えて下さい。（dotted・・点線、dashed・・破線という意味です。）
開始タグ・・<div style=”padding: 10px; margin-bottom: 10px; border: 1px dashed #000000;”>
実線の囲み枠
開始タグ・・<div style=”border:1px solid #00000;padding:10px;border-radius: 0px;”>
細い点線の角丸枠
開始タグ・・<div style=”padding: 10px; margin-bottom: 10px; border: 1px dotted #000000; border-radius: 5px;”>
破線の角丸枠
開始タグ・・<div style=”padding: 10px; margin-bottom: 10px; border: 1px dashed #000000; border-radius: 5px;”>
実線の角丸枠
開始タグ・・<div style=”border:1px solid #000000;padding:10px;border-radius:10px;”>
細い点線の囲み枠（背景ブルー）
開始タグ・・<div style=”border:1px dotted #000000;padding:10px;border-radius: 0px;background:#ccffff;”>
破線の囲み枠（背景ブルー）
開始タグ・・<div style=”border:1px dashed #000000;padding:10px;border-radius: 0px;background:#ccffff;”>
実線の囲み枠（背景ブルー）
開始タグ・・<div style=”border:1px solid #000000;padding:10px;border-radius: 0px;background:#ccffff;”>
細い点線の角丸枠（背景ブルー）
開始タグ・・<div style=”border:1px dotted #000000;padding:10px;border-radius:10px;background:#ccffff;”>
破線の角丸枠（背景ブルー）
開始タグ・・<div style=”border:1px dashed #000000;padding:10px;border-radius:10px;background:#ccffff;”>
実線の角丸枠（背景ブルー）
開始タグ・・<div style=”border:1px solid #000000;padding:10px;border-radius: 10px;background:#ccffff;”>
吹き出し
ワードプレスで吹き出しを使えるようにするための３ステップ
ワードプレスで吹き出しを使えるようにするために必要なのは次の３ステップです。
- WP-Speech-Balloonをダウンロード
- ワードプレスに画像を追加する
- AddQuicktagにコードを設定する
WP-Speech-Balloonをダウンロード
ワードプレスで吹き出しを使うにはAddQuicktagにコードを追加するほかに、CSSを書き換えないといけません。
カスタマイズするわけなんですけど、初心者にはちょっとハードルが高く、もし間違ったときに元に戻せるか心配ですね。
でも、プラグインをもう一つダウンロードすれば難しいことをしなくても吹き出しを作れます。
そのプラグインがWP-Speech-Balloonで、ダッシュボードのプラグイン＞新規追加からプラグイン名で検索してダウンロードし、アップロードしてから有効化してください。
ワードプレスに画像を登録する
吹き出しを使うということは、喋るキャラクターがいないとおかしいですよね。
そのキャラクターをワードプレスに登録します。
ダッシュボードのメディア＞新規追加をクリック。
AddQuicktagにコードを設定する。
AddQuicktagの設定画面の「ボタン名」と「開始タグ」を入力します（それ以外は入れなくて大丈夫です）。
「ボタン名」は好きな名前（吹き出しの種類など）を入力します。
「開始タグ」↓
[L★_wsbStart][L_wsbAvatar]ファイルURL[L_wsbName]キャラクター名[L_wsbText]吹き出しの内容[L_wsbEnd]
（※ファイルURLには、さきほどメモしたものを入力します。）
注意①
上記のタグで赤字の部分「[」と書かれているところは「[」に、「]」と書かれているところは「]」に書き換えて下さい。
上記のように表記しないと「[」や「]」のショートコードがブラウザ上で実行されて、正しく表示されないためです。
申し訳ありませんが、単純なコピペはできません。
注意②
WP-Speech-Balloonでは吹き出しのパターンが５つあり、「★」のところには１から５までのいずれかの数字を記入します。
注意③
上記のタグの「L」の文字は、キャラクターが左にきて吹き出しが右にくることを示しています。
キャラクターが右に来て吹き出しが左に来るようにするタグは次の通りです。
[R★_wsbStart][R_wsbText]吹き出しの内容[R_wsbAvatar]ファイルURL[R_wsbName]キャラクター名[R_wsbEnd]
上と同様に、★のところには１から５までの数字のうちのひとつを入れます。
なお、AddQuicktagには一つずつしか登録できません。
登録が終わったら、確認してみます。
このサイトでは例として「わんこ」というキャラクターで、２番めのパターンの吹き出しを作ってみました。
わんこ
吹き出しの内容（ワードプレスの編集画面で変更してね）
吹き出しの内容（ワードプレスの編集画面で変更してね） わんこ
２番めのパターンでは、吹き出しの色が右はブルー、左はピンクになるようです。
AddQuicktagがビジュアルエディターに表示されないときは
記事編集画面にAddQuicktagのタグが表示されないときがときどきあります。
ネットで調べると、クイックタグの設定項目にチェックが入っていないとか、拡張コードクイックタグボタンのチェックが抜けているとか書かれていましたが、それらをすべて修正しても表示されないこともあります。
そんなときは、しょうがないからテキストエディターを使うしかありません。
テキストエディターにはAddQuicktagで設定した文字装飾スタイルがすべて表示されます。
上の画像はこのブログのものですが、ちょっと多いですかね。
ビジュアルエディターの場合は装飾したい文字を選択し、AddQuicktagをプルダウンさせて希望の装飾パターンを選べばいいんですけど、テキストエディターの場合は、先に装飾パターンを選んでおいてそこに文字を入れることになります。
ちょっとだけ面倒なんですけど、もしものときにはこの方法を使ってくださいね。
終わりに
ワードプレスで囲み枠や吹き出しが使えるようになると表示のバリエーションが増えて、記事を書いていても楽しくなります。
吹き出しの表示は単純なコピペはできなくて、ちょっと面倒くさいんですけど、一度設定してしまえばずっと使えるんで、トライしてみて下さい。
どんなキャラクターにするのか選ぶのも楽しいですね。
最後まで読んでいただき、ありがとうございました。