僕が取り掛かっている作業に、「【無料で企業用サイト作成】国産の企業向け無料テーマを使ったホームページ制作」というものがあります。
-
-
国産の企業向け無料テーマを使ったホームページ制作
僕は自営業をしているんですが、自分お店のサイトを自分で作成しています。 理由は単純で「お金がもったいない」「自分で更新したい」からです。 業者に頼むとHP作成ってものすごく高額なんですよね。僕も開店し ...
続きを見る
これはドメイン代とサーバー代は別として他にかかる全ての費用をゼロ円にするため、無料テーマ＆無料プラグインを使用して企業用サイトの作成を行っているものです。
話が一旦ずれます。
現在僕は「（AFFINGE5EX・AFFINGER5）」という有料テーマを使用しています。
このAFFINGERはとても優秀で専用プラグインを導入すれば簡単にタグから吹き出しを挿入する事ができます。さすがに専用プラグインというだけあって費用がかかります。
話を戻します。
AFFINGERで企業用サイトを作成するのが一番手っ取り早いのですが、これでは無料で企業用サイトを作成するという訳にはいきません。
さらにこのサンプルサイトの中でお客様の声のページを作成していて購入者の意見を表現させるため「Word Balloon」という吹き出しプラグインを利用しています。
以前は「Speech Bubble」というプラグインが有名でしたが、2018年12月28日で公開停止になってしまいました。
話が長くなりましたが、今回はこの吹き出しプラグインについて解説していきます。
完成予定はこちら
1分もあれば簡単に設定できるのでおススメですよ！
使用したプラグイン
Word Balloon
ココに注意
無料で登録できる画像（アバター）は3個までとなります。
プラグイン導入方法
左列のダッシュボートからプラグイン→新規追加を選択して下さい。
画面が切り替わったら、キーワードに「Word Balloon」と入力するとプラグインが出てきます。
「今すぐインストール」をクリックし、「有効化」というボタンが出現するのでクリックし有効化させます。
設定
画像の登録
左列の設定からWord Balloonをクリックします。
画面が切り替わったらまずは吹き出しに表示させたい写真の登録を行います。
「写真の選択」をクリックしてお好みの写真を選び右下にある「選択」をクリックしてください。
「名前」には写真の下に表示される名前になりますので、画像に関連する名前を入力してください。
「メモ」は入力しなくてもOKです。
最後に「アバターの登録」をクリックします。
僕は無料で利用できる上限の3人まで登録しました。
挿入方法
実際に挿入して表示させてみます。
ビジュアルエディタに吹き出しマークが表示されているのでそちらをクリックします。
すると上記画面が表示されるので表示させたい文章を入力して右下のブルーのボタンをクリックします。
自動でコードが入力されました
ここに表示させたい文章を入力します
改行したい場合はエンターキーで改行します
実際に入力するとこのように表示されます
設定を変更する
設定はクリック一つで簡単に変更する事ができます。
アバターを編集しています。
写真の枠を「四角」、写真に「枠線」「影」、名前の位置を「アバターの上」、名前の色「赤」に設定しています。
吹き出しを編集しています。
吹き出しの文字を「白」、背景を「ピンク」、文字サイズ「15」、配置「左」、影「あり」、全幅「ON」に設定しています。
アイコンを編集しています。
アイコンは「はっ」、位置は「左上」、サイズは「大」、水平反転は「ON」に設定しています。
効果を編集しています。
写真の効果は「ぶるぶる」、アイコンは「キラーン」にして効果を「点滅」、吹き出しの効果は「左右」に設定しています。
フィルターを編集しています。
写真は「モノクロ」、吹き出しは「セピア」に設定しています。
ステータスを編集しています。
コメントには「ステータスのコメントを入力しています」、文字色を「赤」に設定しています。
ステータス設定の内容はこちらにして変更しました。
設定の変更は以上になります。
まとめ
いかがでしたか？
このプラグインは非常に使い勝手がいいですよね。
僕はセンスが無いので初めから標準で入っている設定でしか使っていません。しかし設定の変更は非常に簡単なので使用用途によって様々な事に使い分ければ表現の方法がグッと良くなると思います。
アバターは3つまでしか登録できないのが残念ですが、そもそも3つも登録すれば事足りるはずなので無料プランでも全然問題ないですね。
吹き出しの表示をお悩みの方はぜひ一度お試しください。
