The following two tabs change content below.
ブログを効率よく運営して、集客や収益化(マネタイズ)を全自動化させることが最も得意。たった1つのブログで、年間1億2,000万円を動かすまでになりました。かわいい愛娘が2人いて、現在子育てに奮闘中! ⇒詳しいプロフィールはここをクリック

ワードプレスのテーマ「ストーク」は、デフォルト(標準装備)で吹き出し機能が使えます。プラグイン(ワードプレスの拡張機能)を導入する必要はありません。

たとえば、以下のような会話風吹き出しです。

けんいち君
ストークなら、会話形式の吹き出しが、簡単にできるんですね!
よごさわ
左右に配置することで、会話形式に見せることも可能じゃよ。

キャラクターによる会話や解説があるだけで、親しみがわいたり、読んでいて飽きなかったりします。積極的に使用することで、読んでもらいやすくなり、ファンを獲得しやすくなります。

ただ、吹き出し機能のショートコードは張り付けるだけでは使用できません。

吹き出しもショートコードになっているものの、細かい設定があるため、初心者にとっては使いこなしづらいです。具体的には、画像の設定が絡んでくるため、ワードプレスを使い慣れていなければチンプンカンプンでしょう。

たとえば、先ほどの会話に出てきた「けんいち君」のショートコードは、以下の通りです。

会話風ショートコードのイメージ
けんいち君
っえ!? ショートコードとはいえ、複雑なんですね……。

これを見て設定方法がわからない場合、理解するまでに時間がかかるでしょう。

そこでこのページでは、吹き出しショートコードの使い方から、全種類を紹介させていただきます。それぞれを使いこなして、あなただけのオリジナルコンテンツの作成にお役立てください。

注意

ここで紹介する会話風吹き出しショートコードは、WordPressテーマ「ストーク」のものになります。他のテンプレートでは使用できないため、ご注意ください。

ストークの詳細については、以下の記事をご覧いただけますと幸いです。

ブログ初心者必見!wordpressのおすすめテーマはストークで決まり

2017.05.23

ストークの吹き出しショートコードの使い方

ストークで使用する基本となる吹き出しショートコードは、以下の通りです。

会話風ショートコード

会話風吹き出しショートコードを使うには、「画像」「名前」「会話テキスト」の3つを設定する必要があります。

  1. 画像
  2. 名前
  3. 会話テキスト

つまり、吹き出しショートコードを使う際、キャラクターが入る窓口に写真、あるいはイラストなどの画像を用意しなければ使えません。そして、使用するキャラクターの数と、表情のバリエーションに応じて設定しなければいけません。

顔出しをする方であれば、写真でもいいですし、嫌な人はイラストなどが必要になります。

オリジナルキャラクターを希望する場合、「ココナラ」であれば数千円程度で作ってもらえるのでおススメです。弊社でも、サイトで使用するオリジナルキャラは「ココナラ」のクリエイター様に依頼しています。

また、「ピクスタ」で購入して、それを使用しても良いです。イノバースの「けんいちくん」や先ほど出てきた「よごさわ」も、ピクスタで購入しました。

けんいち君
僕ってオリジナルじゃないんですね……( ;∀;)

とにかく、当てはめる画像がなければ始まらないため、何かしら用意しましょう。

吹き出しショートコードを使用する具体的な手順

まず、吹き出しショートコードの中から、「①使用したいものを選択」して「②コピー」してください。

次に、ワードプレスの投稿画面にて、吹き出しを追加したい任意の場所に先ほどコピーしたショートコードを貼り付けます。

ここまで来たら、吹き出しに使用する画像を用意する必要があります。

画像の用意ができた後は、ワードプレスにアップロードしましょう。

このとき、キャラクターの画像サイズが大きすぎる場合、小さくする必要があります。ファイルが大きいままだと、読み込みに時間がかかり、ページの表示速度が遅くなるからです。

吹き出しがたくさん出てくる際は、特に注意が必要です。

できれば、縦と横の幅(ピクセル)を「150 x 150」程度にすることをおススメします。このくらいのファイルサイズなら、読み込みに負荷がかからない上に、スマートに表示されます。

なお、画像ファイルの大きさを変更して投稿するやり方が分からない場合、以下のコンテンツを確認して下さい。Windows・Macのそれぞれパソコンにて、画像の作り方からピクセル数を小さくする方法までの使い方を解説しています。ぜひ、参考にしてください。

画像ファイルが完成したら、ワードプレスにアップロードしていきましょう。まず、「メディアを追加」をクリックします。

次に、「ファイルをアップロード」をクリックして、タブを切り替えてください。

タブの切り替えが終わったら、「ファイルを選択」をクリックして、吹き出しに使用したい画像をアップロードしてください。

アップロードが終わった後、「①使用する画像を選択」します。そして、画面に向かって右側のURLと書かれている部分の「②画像のURLを全選択してコピー」して下さい。コピー出来たら、「③『×』をクリックして戻りましょう。

記事投稿の画面に戻ったら、「◆画像のURLを張り付けてください◆」だけを選択して、削除しましょう。

余分なテキストが消えた後は、「voice icon=」の直後に続く「”」と「”」の間に、先ほどコピーした画像のURLを張り付けて下さい。

以下の画像のように、URLを貼り付けできたら画像の設定が完了です。

ここまでで、以下のように表示されます。

◆キャラクターの名前◆
◆会話を入力◆

「◆キャラクターの名前◆」を変更すれば、キャラクターの吹き出しショートコードが完成します。

よごさわ
◆会話を入力◆

上記のショートタグは、次のようになっています。

今回作成したショートコード

ここまで来れば、最後に会話の内容を入力して吹き出しの完成です。

けんいち君
想像以上に大変なんですね……。
よごさわ
細かい設定は必要じゃが、こういった作業をコツコツと頑張れる人だけが勝ち残れるのじゃ。

よごさわのおっしゃる通り、細かい作業を面倒くさがらずに設定できる人は強いです。大半の人は、適当に記事を作っているため、こういった小さな差が、後に大きな成果をもたらしてくれます。

ささいなことであっても、面倒くさがらずに取り組んでいきましょう。

吹き出しショートコードをワードプレスに記憶させて簡単に呼び起こす方法

細かい作業を行った人が勝てるとはいえ、ここまでの設定を毎回行うのはさすがに面倒くさいですよね。

特に、キャラクターが増えたり、表情にバリエーションを持たせたりする場合、1つずつ設定しなければいけません。

ただし、「AddQuicktag」というプラグインを入れれば、吹き出しショートコードの「画像」や「名前」を保存しておけます。一度、設定してしまえば、後はキャラクターの会話のテキストを書くだけでよくなるため、作業効率化ができるのでおススメです。

以下のようなイメージです

AddQuicktagを使用したときのイメージ

「AddQuicktag」のプラグインの詳細やインストールに関しては、以下のコンテンツを参考にしてください。

AddQuicktagの使い方:ストークのショートコードを登録する方法

2017.12.14

吹き出しショートコード一覧

最後に、ストークに備え付けられている吹き出しショートコード一覧を紹介させていただきます。

それぞれ、イメージの下にショートコードを貼り付けますので、気に入ったものを使用してください。以下の通りです。

けんいち君
通常の吹き出しです。
通常の吹き出しショートコード
よごさわ
右に配置パターンです。
右配置吹き出しショートコード
補足
「 type=” “」の「” “」の中身を、「l」にすれば左配置になり、「r」にすれば右配置になります。以下、同様ですので、割愛させていただきます。
けんいち君
LINE風です。
LINE風ショートコード
けんいち君
Facebook風です。
Facebook風ショートコード
けんいち君
ドデカアイコンです。
ドデカアイコンのショートコード
けんいち君
アイコンの外枠黄色パターンです。
外枠黄色ショートコード
けんいち君
アイコンの外枠赤色パターンです。
外枠黄\赤色ショートコード
けんいち君
アイコンの外枠青色パターンです。
外枠青色ショートコード
けんいち君
アイコンの外枠黒色パターンです。
外枠黒色ショートコード

まとめ

文字だけで構成された文章よりも、キャラクターがいてくれた方が圧倒的に見やすい文章になります。

また、キャラクターが登場することで、オリジナリティがでるため、差別化にも最適です。ブログ運営では、面倒くさがらずに、手間を多くかけられた人だけが成功できます。

吹き出しを有効に使用して、オンリーワンのブログを完成させてください。

>>以下でストークで使用できるショートコード一覧が確認できます

イノバース
イノバースでは、LINE@でブログには書けない最新のアクセスアップ(SEO)方法やブログの収益化方法を無料で配信させていただきます。

ぜひ、以下よりご登録ください。

友だち追加

無料メールマガジンにて、「ブログで稼ぐための全手順」を公開中

以下にいつも使っているメールアドレスを
正しくゆっくり入力し『登録ボタン』をクリックしてください。

メールアドレス
※必須※