プラグイン

【プラグイン】超高性能な吹き出しが「Word Balloon」で簡単につくれた

僕が取り掛かっている作業に、「【無料で企業用サイト作成】国産の企業向け無料テーマを使ったホームページ制作」というものがあります。

国産の企業向け無料テーマを使ったホームページ制作

僕は自営業をしているんですが、自分お店のサイトを自分で作成しています。 理由は単純で「お金がもったいない」「自分で更新したい」からです。 業者に頼むとHP作成ってものすごく高額なんですよね。僕も開店し ...

続きを見る

これはドメイン代とサーバー代は別として他にかかる全ての費用をゼロ円にするため、無料テーマ&無料プラグインを使用して企業用サイトの作成を行っているものです。

 

話が一旦ずれます。

 

現在僕は「(AFFINGE5EXAFFINGER5)」という有料テーマを使用しています。

このAFFINGERはとても優秀で専用プラグインを導入すれば簡単にタグから吹き出しを挿入する事ができます。さすがに専用プラグインというだけあって費用がかかります。

アスグッド
クリックだけで吹き出しが作れて凄い便利です

 

話を戻します。

 

AFFINGERで企業用サイトを作成するのが一番手っ取り早いのですが、これでは無料で企業用サイトを作成するという訳にはいきません。

さらにこのサンプルサイトの中でお客様の声のページを作成していて購入者の意見を表現させるため「Word Balloon」という吹き出しプラグインを利用しています。

以前は「Speech Bubble」というプラグインが有名でしたが、2018年12月28日で公開停止になってしまいました。

話が長くなりましたが、今回はこの吹き出しプラグインについて解説していきます。

完成予定はこちら

Aさん
Aさん
今回はこんな感じの吹き出しの導入を説明していきます。
1分もあれば簡単に設定できるのでおススメですよ!

 

使用したプラグイン

Word Balloon

ココに注意

無料で登録できる画像(アバター)は3個までとなります。

プラグイン導入方法

左列のダッシュボートからプラグイン→新規追加を選択して下さい。

画面が切り替わったら、キーワードに「Word Balloon」と入力するとプラグインが出てきます。

「今すぐインストール」をクリックし、「有効化」というボタンが出現するのでクリックし有効化させます。

 

設定

画像の登録

左列の設定からWord Balloonをクリックします。

 

画面が切り替わったらまずは吹き出しに表示させたい写真の登録を行います。

「写真の選択」をクリックしてお好みの写真を選び右下にある「選択」をクリックしてください。
「名前」には写真の下に表示される名前になりますので、画像に関連する名前を入力してください。
「メモ」は入力しなくてもOKです。
最後に「アバターの登録」をクリックします。

 

僕は無料で利用できる上限の3人まで登録しました。

 

挿入方法

実際に挿入して表示させてみます。

ビジュアルエディタに吹き出しマークが表示されているのでそちらをクリックします。

 

すると上記画面が表示されるので表示させたい文章を入力して右下のブルーのボタンをクリックします。

 

自動でコードが入力されました

 

Aさん
Aさん
これは初期設定のまま投稿しています

ここに表示させたい文章を入力します

改行したい場合はエンターキーで改行します

実際に入力するとこのように表示されます

 

設定を変更する

設定はクリック一つで簡単に変更する事ができます。

 

吹き出しの枠を「考え事」、写真の位置を「右側」に配置しました。
アバターを編集しています。
写真の枠を「四角」、写真に「枠線」「影」、名前の位置を「アバターの上」、名前の色「赤」に設定しています。
Aさん
Aさん
アバターの設定の内容はこちらにして変更しました。

 

Aさん
Aさん
吹き出しの枠を「しっぽ」、写真の位置を「左側」に配置しました。
吹き出しを編集しています。
吹き出しの文字を「白」、背景を「ピンク」、文字サイズ「15」、配置「左」、影「あり」、全幅「ON」に設定しています。
吹き出しの設定の内容はこちらにして変更しました。

 

Aさん
Aさん
吹き出しの枠を「ぽっち」、写真の位置を「左側」に配置しました。
アイコンを編集しています。
アイコンは「はっ」、位置は「左上」、サイズは「大」、水平反転は「ON」に設定しています。
アイコンの設定の内容はこちらにして変更しました。

 

吹き出しの枠を「手書き風」、写真の位置を「右側」に配置しました。
効果を編集しています。
写真の効果は「ぶるぶる」、アイコンは「キラーン」にして効果を「点滅」、吹き出しの効果は「左右」に設定しています。
Aさん
Aさん
効果の設定の内容はこちらにして変更しました。

 

吹き出しの枠を「考え事2」、写真の位置を「右側」に配置しました。
フィルターを編集しています。
写真は「モノクロ」、吹き出しは「セピア」に設定しています。
Aさん
Aさん
フィルター設定の内容はこちらにして変更しました。

 

Aさん
Aさん
吹き出しの枠を「セリフ下側」写真の位置を「左側」に配置しました。
ステータスを編集しています。
コメントには「ステータスのコメントを入力しています」、文字色を「赤」に設定しています。
ステータスのコメントを入力しています

ステータス設定の内容はこちらにして変更しました。

 

設定の変更は以上になります。

 

まとめ

いかがでしたか?

このプラグインは非常に使い勝手がいいですよね。

僕はセンスが無いので初めから標準で入っている設定でしか使っていません。しかし設定の変更は非常に簡単なので使用用途によって様々な事に使い分ければ表現の方法がグッと良くなると思います。

アバターは3つまでしか登録できないのが残念ですが、そもそも3つも登録すれば事足りるはずなので無料プランでも全然問題ないですね。

吹き出しの表示をお悩みの方はぜひ一度お試しください。

  • この記事を書いた人

アスグッド

鍼灸師として鍼灸整体院を経営してます。

『明日がもっと良くなればいいなぁ』との願いから名前を付けました。

プロフィール詳細は→こちら

-プラグイン
-, ,

© 2021 千里の道も一歩から