ブログあれこれ

ブログ記事に吹き出しを挿入する方法(WordPress)

吹き出しテキスト挿入方法
LIM
LIM
こんにちわ!LIMです!

今日も「なんか役に立つブログ」書いていきます!

僕のプロフィール

・名前:LIM
・職業:会社員
・経歴:大卒/会社員歴10年以上
・好きな事:読書/歌う/ゲーム/ジョギング/筋トレ/韻を踏む
・最近興味あること:ブログ/副業/瞑想/マインドフルネス系

クラシックエディタで記事に吹き出しを入れるのってどうやるんだろう?

今日はそんな疑問にお答えします。

ブログ記事をちょっとリッチにする方法、「吹き出し」についてです。自己紹介や最初の挨拶、読者の疑問の提起などで吹き出しがあると読者にとってもイメージしやすくなります。また、ブログ記事を彩ることで自分のモチベーションアップにも繋がったりもしますよね。記事の印象を変える上でとても簡単で便利な機能ですのでオススメです!

こんな方におすすめ

  • WordPressを使っている
  • ブログ初心者
  • 記事の中に吹き出しを挿入する方法を知りたい
  • 記事をちょっとリッチにしたい
  • クラシックエディタを使っている

 

1. 吹き出しを入れる=プラグインを使う ※注意点あり

基本的に吹き出しはプラグインを使って挿入できます。プラグインはいくつかあって自分に合ったものを選択するのが良いでしょう。以下代表的な吹き出しプラグインです。

  • Word Balloon
  • LIQUID SPEECH BALLOON (吹き出し)
  • Speech Balloon Maker (ふきだしメーカー)
  • WP-Speech-Balloon

ただし、注意点として、ブロックエディタでしか機能しないプラグインや、クラシックエディタでも使えるけども一手間かかるものもあります。そのため、クラシックエディタでストレスなく使えるプラグインはいくつか限られていますので、今回はクラシックエディタ利用者でもスムーズに使えるプラグインとその使い方をご紹介します。

 

2. クラシックエディタでも使える吹き出しプラグイン
「Word Balloon」

クラシックエディタで使える吹き出しプラグインの代表としてWordBalloonをおススメします。今まさに僕が使ってる吹き出しです。こちらはクラシックエディタでも難なく使えますのでご安心を!

  • プラグイン検索時↓

吹き出しプラグイン1

  • 実際の利用時↓
LIM
LIM
こんな感じでアニメーション入ってます!

アニメーションも入っいておしゃれです。使い方も簡単なので、是非使ってみてください。それでは、使い方を説明していきます。

3. Word Balloonのプラグインインストール

ここから具体的なWordBalloonの利用方法です。まずは下記手順でプラグインを入れましょう。

※プラグインの入れ方がわかる方は読み飛ばして下さい。

①プラグイン→新規追加の順にクリックします。

新規プラグイン

 

②下記のように検索窓で「Word Balloon」で検索すると、Word Balloonが表示されるので「今すぐインストール」を押します。

Word Balloon検索してインストール

 

インストールが完了したら、プラグイン有効化ボタンボタンを押して有効化するのをお忘れなく!

 

4. Word Balloonの設定

続いてインストールが完了したら、早速アバターを設定して使ってみましょう!

①まずは画像の設定からです。下記のように「設定」→「Word Balloon」を選択して下さい。

設定からWordBalloon選択

 

②続いて、「画像を選択」をクリックします。

画像選択

 

③画像選択画面が出るので、アバターに使う画像を選択して、「選択」をクリックします。

アバターに使う画像を選択

 

④次に、「名前」にアバターに表示する名前を入れて「アバターの登録」ボタンをクリックします。

WordBalloonアバターに表示する名前を入れる

下記のように、登録したアバターが出てきたら完了です!

登録後画面

 

アバター設定が完了したら、早速使ってみましょう!

5. 記事にWord Balloonを挿入

上で設定が完了したら、いよいよ記事に挿入する方法です。WordBalloonをインストールすると下記のようにクラシックエディタ画面のツールバーに2つの吹き出しマークが出てきます。使い方はあまり変わらないですが、それぞれ説明します。(結果は同じです。)

吹き出しボタン2つ

 

それではまず吹き出し1←こちらの吹き出しボタンの使い方からご説明します。

1. 吹き出しボタン吹き出し1の使い方

記事にセリフの文字を何も打ってない状態で吹き出し1ボタンをクリックして下さい。

吹き出しボタン①をクリック

 

②次に下記のような画面が出るので、画面に直接セリフを入力して挿入ボタンボタンを押しましょう。

ワードバルーン挿入方法①

 

③すると、下記のような感じでコードが挿入されますので「プレビュー」をクリックしてうまく表示されたか見てみましょう。

コードを確認してプレビューをクリック

下記のように表示されていれば完了です!

吹き出し

 

2. 吹き出しボタン吹き出しボタン2の使い方

①まずは下記のように、セリフにしたい文字を記事に入力して下さい。

吹き出しボタン2先に入力

 

②次に、下記のように入力した文字をドラッグして、吹き出しボタン2ボタンをクリックして下さい。

ドラッグした状態で吹き出しボタン2をクリック

 

③すると、上で打った文字が入っていることを確認して挿入ボタン挿入ボタンボタンをクリックします。

吹き出し2挿入ボタン

 

④挿入ボタン挿入ボタンをクリックすると下記のようにコードが挿入されるので「プレビュー」をクリックして正しく表示されたか確認してみましょう。

吹き出し2プレビュー確認

下記のように表示されれば完了です!

吹き出し2完了

 

ポイントまとめ

  • 吹き出しはプラグインで入れる
  • ただしクラシックエディタで使えるものは限定されている
  • WordBalloonはクラシックエディタでも使える吹き出しプラグイン
  • WordBalloonを使うにはまずはアバターを設定
  • エディタに吹き出しの挿入ボタンは2つ表示される
    1. 吹き出し1はWordBalloon挿入画面でセリフを入れる
    2. 吹き出しボタン2は先にエディタにセリフにする文字を入力してから使うボタン

 

 

-ブログあれこれ

© 2022 リムブログ Powered by AFFINGER5