パニパニです😊
ワードプレスを始めたばかりの方でテンプレート【ストーク】を購入したはいいけど使い方が難しいッ💦
吹き出し画像も超簡単にできるって書いてあったからワクワクしてたんだけど・・あれっ？
ボタンないよー😭
吹き出し機能が最初から設定されていてボタンひとつでぽちっと簡単に作れると思っている人も多いみたいです。
吹き出しキャラ設定をするならワードプレステンプレート賢威の方が画像をアップロードするだけなので簡単かもしれませんね。
せっかくストークを購入したのに最初の初期設定でつまずいてしまうとなかなか前に進まず・・
早くブログを書きたいのに気持ちが焦りますよね😿
そこでストーク初心者にも安心😍
吹き出し画像を設定する方法をどこよりも簡単に画像付きで詳しく解説していきますので参考にしていただけたら幸いです。
目次
ストークで吹き出しキャラ画像を設定する手順
まずストークで吹き出しキャラ設定をする手順を説明していきます。
最初に吹き出しに使いたいキャラ画像を探しておくとスムーズにいきます。
- プラグインAddQuicktag（アドクイックタグ）のインストール
- 吹き出しに使う画像のURLを探す
- AddQuicktag（アドクイックタグ）に登録
吹き出しをボタンひとつで呼び出すプラグインを入れよう
ワードプレス初心者あるあるで「プラグインっていったいなに？？」から始まって・・
本当にとまどいますよね。
プラグインの意味や細かい説明を読んで理解するよりも、ワードプレスは実際に使っていくことで慣れていきます。
難しく考えずに手順通りに進めてくださいね♫
ではさっそくボタンひとつで呼び出しができるプラグインAddQuicktag（アドクイックタグ）をインストールしていきましょう。
まずはワードプレスの左にある
管理画面＞プラグイン＞新規追加＞AddQuicktagを検索＞今すぐインストール＞有効化します。
インストールをして有効化が終われば使い方は後ほどの説明になります。
早く吹き出しキャラを作りたいとは思いますが、順を追って行きましょうね😊
吹き出しにしたいキャラクター画像を決めよう
吹き出しにしたい画像は自分の顔写真でもいいしペットの画像でもいいし無料アイコンから拾ってきてもOKです♫
ココナラで自分の似顔絵を作ってもらっているブロガーさんも多いですね😊
ココナラなら自分好みのアイコンを見つけることができると思います♪
ココナラ→イラスト漫画→アイコン作成の順に行くといろんなイラストレーターさんのアイコンを見ることができます。
値段はピンキリですがリーズナブルなイラストレーターさんになると1000円～1500円ほどで作成してくれますよ♪
吹き出し画像URLの場所はどこ？
画像が決まったら左にあるワードプレス管理画面の
メディア＞新規追加＞ファイルを選択＞アップロードします。
アップロードが終わったらこんな画面↓になると思いますので右の下にある編集をクリック
編集をクリックすると右に画像URLが表示されています。↓
このURLは吹き出し画像をボタンひとつで表示させる設定に必要なURLになります。
AddQuicktag（アドクイックタグ）で吹き出しアイコンを表示させるボタンの設定方法
画像URLがわかったらさっそくワードプレスの投稿画面に吹き出しボタンひとつでキャラが呼び出せるように設定していきます。
今回はシンプルタイプの吹き出し画像を設定していきます。
いまは何もありませんね。↓
ここに吹き出しボタンを作っていきます♫
もう少しなのでがんばってくださいね😊
吹き出し画像を呼び出すにはショートコードというものが必要になります。
ショートコード[voice icon="アイコンURL" name="名前" type="l"]吹き出しの内容[/voice]
まず上のショートコードをまるごとコピーします。
メモ帳を起動させ（エクセルやワードでもOK）ショートコードを貼り付けます。
ショートコードを変更する場所は↓オレンジで囲った部分になります。
アイコンURLはこちらでしたね。↓ コピーします。
コピーした画像URLを貼り付けます。名前の変更も忘れずに♫
ワードプレス管理画面＞設定＞AddQuicktag（アドクイックタグ）を開きます。
オレンジで囲ったところを入力していきます。
ボタン名→自分のわかりやすいものでOK（例：うーちゃんママ）
順番→指示したい番号でOK（例：１）
ビジュアルエディター→いちばん右にチェックを入れると全部にチェックが入ります。
全部にチェックが入るようにしてくださいね。
開始タグ↓青く反転している範囲をコピーして貼り付け
終了タグ↓青く反転している範囲をコピーして貼り付け
最後に変更を保存を必ず忘れずにしてください。
投稿画面に行くと・・ボタンができましたね😊
ストークで吹き出しを作る方法まとめ
いかがでしたか？
吹き出し機能をテキストで使う場合は文章をドラッグしてポチッっとアイコンボタンを押すだけでOKです♫
ビジュアルで使う場合も文章をドラッグして右にあるボックスQuicktagsから吹き出しを選んで押すだけです♫
右と左で会話風にもできますよ♫
アイコンを右側に設定したい場合はこちら↓のショートコードで作成してくださいね。
初心者向けにストークのカスタマイズ、吹き出しの枠の色の変更なども解説していますのでよかったらご覧くださいね♫
ありがとうございました✨
ありがとうございました！
スワローの吹き出しキャラの設定が分からず6時間悩みました( ﾉД`)ｼｸｼｸ…
パニパニ様に感謝です( ^ω^ )ﾆｺﾆｺ
分かりやすかったです！本当にありがとうございました。
にゃんこ様
ご丁寧にお礼のメッセージ下さってありがとうございました。
この度はスワローの吹き出しキャラ設定の記事が参考になりまして幸いです。
今後ともよろしくお願い致します。
ぱにぱに様
はじめましておいたんと申します。
とてもわかりやすい記事なのでスイスイ進んでいたのですが、投稿画面へ行くとそもそもボタンの画面が表示されていません（泣）
ユーザー→プロフィール→ビジュアルエディタの欄へのチェックマークは外しております。
初歩的な質問で大変恐縮ですが、原因わかれば教えて頂けませんでしょうか。
よろしくお願い致します。
おいたん様
はじめまして。コメントありがとうございます。
投稿画面にボタン表示されないとのことですが、ユーザー→プロフィール→ビジュアルエディタの欄のチェックマークを外すのではなく、全てをチェックして保存してみてください。
うまくいくと思います♪
チェックを外した画像だった為、分かりづらく申し訳ありませんでした。
パニパニ様
ご丁寧に返信ありがとうございます。
やってみたのですがやはり表示されませんでした。。
1番最後のサムネではビジュアル・テキストと作業画面？を選べるようですが、私の方ですとそれがありません。
それが表示できればもしかするとパニパニ様のおっしゃる通りボタンが作成されているのかもしれません。
ご回答ありがとうございます！
おいたん様
コメントありがとうございます。
現在WordPressのバージョン5.0をご利用中でしょうか？
もしかするとWordPress5.0から導入されたブロックエディタが原因かもしれませんね。
参考までにクラシックエディタに戻すプラグインを分かりやすく解説してくれているブログがあるのでURLを貼らせていただきますね。
旧エディタに戻すプラグイン参考ブログ https://tcd-theme.com/2021/05/wp-editor-usage.html
私もWordPress5.0にバージョンアップしたところ以前と全く使い勝手が違った為、旧エディタに戻すプラグインを入れました。
ただ、おいたん様がWordPressのバージョン5.0に使い慣れていらっしゃるのであれば使い方も違ってくるため無理に旧エディタに戻す必要はないかと思います。
参考になれば幸いです。
パニパニ様
ご連絡遅くなりました。
困っていたことがまさにこれでした。
大変ご丁寧に教えて頂きまして本当にありがとうございました！