プログラミング

【Web制作ハック】Elementorで吹き出しっぽいものを作成する方法

こんにちは、Elementorを死ぬほど愛しているウルフです。

先日、ElementorでLP作っている時に気づきました

「あれ?吹き出しなくね?」

Elementorは本当に神みたいなプラグインなんですが、唯一の欠点としては吹き出しがないことなんですよね。

「まぁ、『Elementor 吹き出し』調べたら出てくんだろ」

と思って調べてみると、解決策らしい解決策が出てこない、、、

プラグインを使えば作成できるっぽいんですが、私としては少しでも軽くするためプラグインの導入は最小限にしたい

よって、今回は

犬

「Elementerで吹き出しを作りたいけど調べても出てこない、、」
「吹き出しをできれば別のプラグインを使わずに作成したい」

という人のために、Elementor無料版とCanvaだけで吹き出しっぽいものを作る方法をご紹介していきます。

無料版Elementorで吹き出しっぽいものを作成する方法

Elementorで吹き出しを作る際に準備するものは以下の通り

  • canva(無料版でも可)
  • 吹き出しを入れたい画像(150×150)

この2点だけでOKです。
特別なプラグインを導入する必要はありません。

Canvaに登録する必要はありますが、こちらも無料版でOKです。

ステップ①:内部セクションで2カラムを用意

210401-Elementer

まずは、内部セクションで2カラムを用意して下さい。
内部セクションは、左のメニューからドラック&ドロップで挿入できます。

ステップ②:左に画像、右にテキストを入れる

210401-Elementer

内部セクションに吹き出しの構成を作っていきます。
左に画像、右にテキストを入れて下さい。

210401-Elementer

カラムの幅としては「左:20%、右:80%」が丁度いいです。
カラムの幅はレイアウトから変更できます。

※この時、テキストやカラムも中央に寄せしておいて下さい

ステップ③:テキストのカラムを設定していく

続いて、右のテキストのカラムを設定していきます。

左上にある、なんかマークをクリックして下さい。

210401-Elementer 210401-Elementer

カラムのスタイルを編集します。
以下のように設定して下さい。

  • 背景⇒ 色:白
  • 枠線⇒ 幅:2px、色:黒
210401-Elementer

カラムの設定をしただけで、このように吹き出しっぽくなりましたね。

ステップ④:画像をCanvaで編集していく

続いて、より吹き出し感を出すために画像に工夫を入れていきます。
それではCanvaを開いて下さい。

210401-Elementer

カスタムサイズで「150×150」新しいデザインを作成するをクリック。
(サイズの調整は後でできるので、とりあえず正方形になればOKです。)

210401-Elementer

キャンバスを開いたら、編集したい画像をドラック&ドロップで挿入
なるべく、四角いキャンバスいっぱいっぱいに拡大して下さい。

210401-Elementer
  1. 左のメニューの「素材」をクリック
  2. 「吹き出し」を検索
  3. 枠付きの吹き出しを選択
  4. 素材によっては枠の色は違うので、黒に変更しておく
  5. 吹き出しの中の色は、白より若干暗めに設定しておく(#FAFAFAくらい)

※無料版だとPro版の吹き出しは使えないので、今回は無料版の吹き出し素材を使っています。

210401-Elementer

吹き出しの用意ができたらね、横向きにして、もうこれでもかってくらいグワァーーーっと拡大して大きくして下さい。

グワァーーーっとですよ!グワァーーーっと!

210401-Elementer

広げたら、上の図のように
キャンバスからはみ出して、吹き出しの先っぽだけが出るように移動させて下さい。

210401-Elementer

そうしましたら、PNG画像の背景透過をしてダウンロードをして下さい。

私はCanva Pro版を利用しているので、ダウンロードから背景透過ができまが、無料版だとできません。

しかし、ご安心を。

ネット上には、無料でPNG画像を背景透過にしてくれるサイトがあります。
そちらから背景透過にして下さい。

無料PNG背景透過サイトはこちら
⇒ https://www.peko-step.com/tool/alphachannel.html

ステップ⑤:編集した画像を挿入し、設定していく

続いて、先ほどダウンロードした画像を挿入しましょう。

すると、このようになります。
ほら、見えてきませんか?吹き出しのあの感じが

しかし、これでは変な先っぽが離れて浮いているようにしか見えませんよね。
ここでも、ちょっとズルいテクニックをしていきます。

210401-Elementer
  1. 画像をクリック
  2. 高度な設定
  3. マージンを0にする
210401-Elementer

マージンの右だけを、右の枠線に触れるまで「-1px」ずつ減らしていって下さい。
すると、もう見えましたよね。吹き出しのあの先っぽが

しかし、これでまだ完成とはいえません。
パディングの下にある「z-index」を1にして下さい。

「z-index」とは?

「z-index」とは画像などの重なる優先順位を決めるCSSです。
指定の仕方は数字です。

これを指定してあげることにより、表示している画像を重ねた時、前に持ってきたり後ろに持ってきたりできます。

でも、「z-index」指定し過ぎるとわけわかんないことになるから多用注意!!!

210401-Elementer

これでやっと、吹き出しっぽくなりましたね!!

セクションのコンテンツの幅をボックスにし、幅を調節してあげると、より自然な吹き出しに見えます。

吹き出しのレスポンシブ対応方法

実はElementorで作成した吹き出し、ちょっと工夫をすればレスポンシブ対応にすることも可能です。

試しにタブレット表示で見てみる

試しにタブレット表示で見てみましょう、下のメニューからタブレット表示で見ることができます。

210401-Elementer

タブレット表示では特に問題なさそうですね、設定はこのままにしておきます。
(吹き出しが丸くなっているのは、枠線の丸みを変更したからです。)

タブレットで見てみる

続いてタブレットで見てみましょう!

210401-Elementer

さすがに、同じようにいきませんよね
焦る必要はありません、これも修正可能です。

それでは、カラムの比率を以下のように変更して下さい

  • カラム右(画像):30%
  • カラム左(文章):70%
210401-Elementer

すると、最初のような配置になりました。
しかし、これでは文字サイズだデカすぎます、、、

文字サイズを変更しましょう。
「スタイル⇒書体」から変更できます。

サイズは15pxくらいですかね。
これでスマホにも対応できるようになりました。

各デバイスでの表示確認

210401-Elementer 210401-Elementer 210401-Elementer

各デバイスで確認しても、表示に問題なさそうですね!

Elementorを使用すればレスポンシブ対応した、吹き出しやHPが制作できるのも魅力です。

まとめ

210401-Elementer

ちょっとメンドクサイように思えるかもしれませんが、今回紹介した方法でElementorでも吹き出しを作ることができます。

Elementorの要素で実装できそうにないなら、Elementorにある機能のみで工夫をすれば作れないものなんてありません。

また、こういった細かいことに対応するためにCanvaにも登録しておくのがいいですね。
Canvaは登録だけなら無料で、無料版でもかなり使えます。

私としては、今後もWEB制作をすることを考えるのであれば月額1,500円Canva Proにすることをオススメです。

とはいえ、最初に課金をするのは抵抗はありますよね
そんな人は、Canva Pro30日間無料トライアルで試してから考えみて下さい。

COMMENT

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