簡単に会話のような吹き出しの記事を作ることができるプラグイン「Speech bubble」の設定方法




Speech bubbleとは

このプラグインは、ブログ投稿記事で会話のような吹き出しの記事を作ることができます。

通常の記事と違い、より閲覧者に近づいた記事を書くことができますし、会話に近いものですのでSNSのように楽しんで読むことができます。

また何か難しいことをわかりやすく説明するときなどに非常に便利なプラグインです。

これから「Speech bubble」のインストール方法や設定方法について解説していきます。

Speech bubbleのインストール方法

ダッシュボードの画面を開いてください。

左メニューの【プラグイン】にマウスカーソルを合わせてください。

【新規追加】という項目が出てきますので、クリックします。

プラグインを追加の画面が出てきます。

画面の右上をご覧ください。

【プラグインの検索】という所があります。

ここに、「Speech bubble」と入力してください。

入力すると自動で検索して表示します。

【今すぐインストール】をクリックし、【有効化】をクリックします。

クリックするとSpeech bubbleを使うことができます。

Speech bubbleの使い方について

ダッシュボード画面の左メニューの【投稿】をクリックし、【新規追加】で通常のブログ記事を書きます。

次にこのようなショートコードを入力してみてください。

この内容を実際の記事で見ると以下の通りです。

会話の吹き出しになっています。

これはほんの一例です。

ショートコードの説明をします。

ショートコードの解説

  1. ①は吹き出しの種類です。
  2. ②はキャラクターの場所です。
  3. ③はキャラクターの画像ファイル名です
  4. ④会話の内容です。

1、吹き出しの種類

①の吹き出しの種類は9種類あります。dropというのはその1つです。

このほかにstd】【fb】【fb-flat】【ln】【ln-flat】【pink】【rtail】【thinkがあります。

AさんのところをstdBさんをfbで試してみます。

いろいろと試してみてください。

2、キャラクターの場所

②はキャラクターの場所ですが、Lだと左です。L1というのは左側にキャラクター1を作ると思ってください。

Rは右です。では、Bさんも左にします。この場合Bさんのところは、L2としキャラクターを追加します。

L2の場合、考えているように表示されます。

また、吹き出しはAさんをfb-flatにし、Bさんをlnにします。

3、キャラクターの画像

③キャラクターの画像ですが、FTPソフトを使って画像をアップロードします。

残念なことにメディアではできません。画像ファイルはアルファベットがいいです。

FTPソフトもいろいろとありますが、今回はFileZilla Clientを使います。

設定はサーバーによって異なりますがだいたい同じです。

plugins→speech-bubble→imgのフォルダの中に画像ファイルを入れます。

赤枠にファイルを追加します。吹き出しはAさんはin-flatにして、Bさんをpinkにしました。

これを公開するとどうなるかですが以下の通りです。

このようにキャラクターの設定ができました。

4、会話の形式

④会話の内容は自由です。

このようなブログ投稿により、おもしろい記事や説明をする際に見た目がよくなります。

以上、「Speech bubble」の解説となります。

まとめ

いかがでしたでしょうか?

今回は、「Speech bubble」のインストール方法や設定方法について解説しました。

このプラグインを設定することで、簡単に会話のような吹き出しの記事を作ることができます。

通常の記事と違い、より閲覧者に近づいた記事を書くことができるので、何か難しいことをわかりやすく説明するときなどに非常に便利ですので、ぜひ設定して使ってみてください!

スポンサーリンク





あなたの”学び”につながったらシェア!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ABOUTこの記事をかいた人

普段はIT企業でメディア運営やセミナー講師の仕事をしている"コーディングもできるWEBマーケター"。アラサーで2児の父。基本的になんでも自分でやりたい人。2015年3月までITスキルがほぼ0だったが、そこから自身がWEBデザインやプログラミングなどITスキルを学び、結果手取り月収が10万円以上アップした経験から、スキルアップを考えている方にはまずはITスキルを勉強することを強く推奨している。