ストークのテーマにある会話風吹き出しショートコードの使い方

The following two tabs change content below.

• この記事を書いた人
• 最新の記事

與五澤 憲一（よごさわ けんいち）

代表取締役社長 ： 株式会社イノバース

ブログを効率よく運営して、集客や収益化（マネタイズ）を全自動化させることが最も得意。YouTubeとブログを掛け合わせた新メディアを構築中！　かわいい愛娘が2人いて、現在子育てに奮闘中！ ⇒詳しいプロフィールはここをクリック

最新記事 by 與五澤 憲一（よごさわ けんいち） (全て見る)

• 普段の生活をブログで発信してお金に変える具体的な方法：広告収入の仕組み - 2019年3月20日
• ブログで月5万円を確実に稼ぐために避けられない○○とは - 2019年3月19日
• 最短の時間で知識量を最大化させる方法：アウトプットが知識を習慣化しよう - 2019年3月18日

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

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

ストークなら、会話形式の吹き出しが、簡単にできるんですね！

左右に配置することで、会話形式に見せることも可能じゃよ。

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

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

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

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

っえ！？　ショートコードとはいえ、複雑なんですね……。

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

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

注意

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

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

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

2017.05.23

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

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

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

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

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

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

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

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

ピクスタを覗いてみる

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

◆会話を入力◆

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

◆会話を入力◆

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

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

想像以上に大変なんですね……。

細かい設定は必要じゃが、こういった作業をコツコツと頑張れる人だけが勝ち残れるのじゃ。

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

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

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

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

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

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

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

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

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

2017.12.14

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

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

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

通常の吹き出しです。

右に配置パターンです。

LINE風です。

Facebook風です。

ドデカアイコンです。

アイコンの外枠黄色パターンです。

アイコンの外枠赤色パターンです。

アイコンの外枠青色パターンです。

アイコンの外枠黒色パターンです。

まとめ

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

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

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

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

• ワードプレスのテーマ「ストーク」で使えるショートコードの使い方一覧