パニパニです😊
ワードプレスを始めたばかりの方でテンプレート【ストーク】を購入したはいいけど使い方が難しいッ💦
吹き出し画像も超簡単にできるって書いてあったからワクワクしてたんだけど・・あれっ?
ボタンないよー😭
吹き出し機能が最初から設定されていてボタンひとつでぽちっと簡単に作れると思っている人も多いみたいです。
吹き出しキャラ設定をするならワードプレステンプレート賢威の方が画像をアップロードするだけなので簡単かもしれませんね。
せっかくストークを購入したのに最初の初期設定でつまずいてしまうとなかなか前に進まず・・
早くブログを書きたいのに気持ちが焦りますよね😿
そこでストーク初心者にも安心😍
吹き出し画像を設定する方法をどこよりも簡単に画像付きで詳しく解説していきますので参考にしていただけたら幸いです。
目次
ストークで吹き出しキャラ画像を設定する手順
まずストークで吹き出しキャラ設定をする手順を説明していきます。
最初に吹き出しに使いたいキャラ画像を探しておくとスムーズにいきます。
- プラグインAddQuicktag(アドクイックタグ)のインストール
- 吹き出しに使う画像のURLを探す
- AddQuicktag(アドクイックタグ)に登録
吹き出しをボタンひとつで呼び出すプラグインを入れよう
ワードプレス初心者あるあるで「プラグインっていったいなに??」から始まって・・
本当にとまどいますよね。
プラグインの意味や細かい説明を読んで理解するよりも、ワードプレスは実際に使っていくことで慣れていきます。
難しく考えずに手順通りに進めてくださいね♫
ではさっそくボタンひとつで呼び出しができるプラグインAddQuicktag(アドクイックタグ)をインストールしていきましょう。
まずはワードプレスの左にある
管理画面>プラグイン>新規追加>AddQuicktagを検索>今すぐインストール>有効化します。

インストールをして有効化が終われば使い方は後ほどの説明になります。
早く吹き出しキャラを作りたいとは思いますが、順を追って行きましょうね😊
吹き出しにしたいキャラクター画像を決めよう
吹き出しにしたい画像は自分の顔写真でもいいしペットの画像でもいいし無料アイコンから拾ってきてもOKです♫
ココナラで自分の似顔絵を作ってもらっているブロガーさんも多いですね😊
暗い画像だと何だかよくわからないので、できるだけ明るい画像を選んだほうがいいと思います♪
吹き出し画像URLの場所はどこ?
画像が決まったら左にあるワードプレス管理画面の
メディア>新規追加>ファイルを選択>アップロードします。
アップロードが終わったらこんな画面↓になると思いますので右の下にある編集をクリック

編集をクリックすると右に画像URLが表示されています。↓

このURLは吹き出し画像をボタンひとつで表示させる設定に必要なURLになります。
AddQuicktag(アドクイックタグ)で吹き出しアイコンを表示させるボタンの設定方法
画像URLがわかったらさっそくワードプレスの投稿画面に吹き出しボタンひとつでキャラが呼び出せるように設定していきます。
今回はシンプルタイプの吹き出し画像を設定していきます。
いまは何もありませんね。↓

ここに吹き出しボタンを作っていきます♫
もう少しなのでがんばってくださいね😊
吹き出し画像を呼び出すにはショートコードというものが必要になります。
ショートコード[voice icon="アイコンURL" name="名前" type="l"]吹き出しの内容[/voice]
まず上のショートコードをまるごとコピーします。
メモ帳を起動させ(エクセルやワードでもOK)ショートコードを貼り付けます。
ショートコードを変更する場所は↓オレンジで囲った部分になります。

アイコンURLはこちらでしたね。↓ コピーします。
コピーした画像URLを貼り付けます。名前の変更も忘れずに♫
ワードプレス管理画面>設定>AddQuicktag(アドクイックタグ)を開きます。
オレンジで囲ったところを入力していきます。
ボタン名→自分のわかりやすいものでOK(例:うーちゃんママ)
順番→指示したい番号でOK(例:1)
ビジュアルエディター→いちばん右にチェックを入れると全部にチェックが入ります。
全部にチェックが入るようにしてくださいね。
開始タグ↓青く反転している範囲をコピーして貼り付け
終了タグ↓青く反転している範囲をコピーして貼り付け
最後に変更を保存を必ず忘れずにしてください。
投稿画面に行くと・・ボタンができましたね😊
ストークで吹き出しを作る方法まとめ
いかがでしたか?
吹き出し機能をテキストで使う場合は文章をドラッグしてポチッっとアイコンボタンを押すだけでOKです♫
ビジュアルで使う場合も文章をドラッグして右にあるボックスQuicktagsから吹き出しを選んで押すだけです♫
右と左で会話風にもできますよ♫


アイコンを右側に設定したい場合はこちら↓のショートコードで作成してくださいね。
初心者向けにストークのカスタマイズ、吹き出しの枠の色の変更なども解説していますのでよかったらご覧くださいね♫
ありがとうございました✨
ありがとうございました!
スワローの吹き出しキャラの設定が分からず6時間悩みました( ノД`)シクシク…
パニパニ様に感謝です( ^ω^ )ニコニコ
分かりやすかったです!本当にありがとうございました。
にゃんこ様
ご丁寧にお礼のメッセージ下さってありがとうございました。
この度はスワローの吹き出しキャラ設定の記事が参考になりまして幸いです。
今後ともよろしくお願い致します。