使ってみよう

Word BalloonはWordPress標準機能でもある、ショートコードと呼ばれる機能を利用します。

ショートコードはこのような文体の物です。

[word_balloon]吹き出しです。[/word_balloon]

カッコで囲まれた文体ですが、これを実際記事内に挿入すると

吹き出しです。

こんな感じで吹き出しに変換されて表示されます。

そしてショートコードを編集することで色々と表示方法の変更が可能です。

が、複雑なコードは

やーまん

覚えてられない^^;

そんな訳でショートコードをカンタンに入力出来る様に、実際に表示される吹き出しを見ながら編集できる機能を用意しました。

Word Balloonボタンの確認

投稿ページを開いてください。

Word Balloonのインストールと有効化が済んでいれば、Word Balloonのボタンが追加されています。

探してみましょう。

ビジュアルエディタをお使いの場合

テキストエディタをお使いの場合

WordPress5.0以降でブロックエディタ(Gutenberg)をお使いの場合

ver2.0.0よりブロックエディタにも対応しました。
マニュアルはこちら。

ブロックエディタでの使い方Word Balloon 2.0.0よりブロックエディタでも使える様になりました。 WordPress5.4以前は『一般ブロック』内に、 WordPress5.5以降は『テキストブロック』内に、 Word Balloonのボタン…

docs.word-balloon.com

Word Balloonのボタンを選択すると

この様なポップアップ画面が表示されます。

この新たに表示された画面に吹き出しを挿入する際に表示させたいセリフを入力したり、設定を選択したりします。

また簡易プレビューも兼ね備えています。

ページビルダー系プラグインをお使いの方

Word Balloonのボタンが表示されない場合があります。
その場合はこちらの設定をお試しください。

Word Balloon のボタンが表示されない場合の対処ページビルダー系プラグインなどの影響で、Word Balloonのボタンが表示されない場合があります。その場合の対処方法です。設定の変更『Word Balloon…

support.back2nature.jp

実際に使ってみよう

では実際に記事に吹き出しを入れてみましょう。

ポップアップ表示されている、Word Balloon専用画面に注目してください。

①：セリフを入力します。

『こんにちは』と今回はセリフに入力しました。

②：入力が出来たら挿入ボタンを押しましょう。

[word_balloon id="mystery_men" position="L" size="M" balloon="talk" name_position="under_avatar" name="false" radius="true" avatar_border="false" avatar_shadow="false" balloon_shadow="true"]こんにちは[/word_balloon]

冒頭でお伝えしたショートコードが、記事内に入力されます。

設定が増えればショートコードの内容も複雑になりますが、上記機能を使えばカンタンに入力が可能です。

ではプレビューや公開などで実際に表示してみましょう。

こんにちは

吹き出しが表示されました。

↑これは実際に記事内にショートコードを書いて、吹き出しを表示させています。

以上、記事への投稿方法でした。

Word Balloonクイックマニュアルここではクイックマニュアルとしてザックリした内容です^^; より詳しい使い方は次の項目になりますのでスクロールして移動してください。ビジュアルエディタ、テキ…

docs.word-balloon.com