初心者の私でもSANGOの『吹き出し』が使えるか身をもって体験してみた

いわ

ブログにこのような吹き出しを使ったページをよくみかけます。私にも使えるのか身をもって体験してみました。

新エディタのGutenbergで吹き出しを設定できるよ

Gutenberg上の挿入ボタンである+のマークをクリック、サンゴカスタムブロックからサンゴ「吹き出し」を選択します。

段落表示時の左にある+からもできます。

そうすると上の吹き出しが挿入されます。「吹き出し」が表示されないときは、スライダーを下に動かし、SANGOカスタムブロックから「吹き出し」を選択することができます。

クラシックエディタでも吹き出しを設定できるよ

クラックエディタでも「吹き出し」を設定できます。

ショートコードを登録すれば、クラシックエディタからも左にあるQUICK Tagからもできます。ショートコードの登録方法はリンク先を見てください。

参考 AddQuicktagで簡単にショートコードを挿入しようサルワカ

SANGOだと吹き出しの装飾も簡単だよ

いわ

ありゃりゃ、顔がないぞ。シルエットになっている顔をクリックすると画像をせんたくできるのだ。

http://p-plex.com/p-plex/wp-content/uploads/2019/06/saitorogo.jpg
いわ

画面右のブロック内で文字色や吹き出しの塗りつぶし、囲み枠、アバターの囲み線の色も指定できる。

http://p-plex.com/p-plex/wp-content/uploads/2019/06/saitorogo.jpg
いわ

このように変更することも簡単だ。右からの表示する項目もあるぞ。

http://p-plex.com/p-plex/wp-content/uploads/2019/06/saitorogo.jpg
いわ

おおっ!できた

http://p-plex.com/p-plex/wp-content/uploads/2019/06/saitorogo.jpg
いわ

吹き出しの中でもラインマーカやリンクを貼れるか確かめてみましょう。まずは、ラインから・・・。ラインも引けました。

リンクもちゃんと張ることができました。

一人だと寂しいので助手を作ったよ

画像が1種類だと変化がなくて、表現力に乏しい感じがします。また、一人しかいないと会話にならず、ブツブツと独り言のようです。

http://p-plex.com/p-plex/wp-content/uploads/2019/06/saitorogo.jpg
いわ

そこで助手を作ってみた。

http://p-plex.com/p-plex/wp-content/uploads/2019/06/image.jpg
助手

はじめまして、助手です。よろしくおねがいします。

http://p-plex.com/p-plex/wp-content/uploads/2019/06/saitorogo.jpg
いわ

君の得意なことは何かね?

http://p-plex.com/p-plex/wp-content/uploads/2019/08/Comic.jpg
助手

減らず口は得意ですよ。

あっ! でもいわさん、アバターを囲む円の形が微妙にちがっますよ~。きっと画像データを作成するときに大きさをそろえないといけないかもしれませんね。

http://p-plex.com/p-plex/wp-content/uploads/2019/06/iwa.jpg
いわ

390×390pixelでそろえてみたよ。どうだろうか。

http://p-plex.com/p-plex/wp-content/uploads/2019/06/image2.jpg
助手

いいんじゃないですかね。ところでいわさん絵が上手だったんですね。知らなかったですよ。

http://p-plex.com/p-plex/wp-content/uploads/2019/06/iwa.jpg

それはだなな・・・。次回のときに教えてあげよう。

http://p-plex.com/p-plex/wp-content/uploads/2019/06/image2.jpg

楽しみにしていますね。でも、本当は、絵が下手のは知ってましたけど。きっと何か秘密のツールがあるんでしょうね。

複数のキャラをショートコードを登録して表示する方法も紹介されていますが、初心者にはGutenberg上で作業できる方が簡単で効率が良いと思います。でも、せっかくなのでリンクを貼っておきます。参考にしてください。

参考 SANGOカスタマイズ 吹き出しのデザイン・色の変更とショートコード追加ページタイトル失敗から学ブログ
まとめ

SANGOの吹き出し機能を使えば簡単に作成できる。

しかも枠線などの色の設定も簡単。

画像サイズは縦横そろえた方が良い。(ちなみに当ブログは390×390pixel、もっと小さくてもよい)

アバターの表情が内容に応じて変わると表現力がパワーアップ!(絵心のない(仮)編集長がどうやってアバターを作っているのかは次回のお楽しみ。