ワードプレスに吹き出しを設置するプラグイン「おすすめ」。自身のワードプレスに吹き出しを作成してみませんか？今回は、ワードプレスに吹き出しを設置するプラグイン「おすすめ」について書いていきます。
自身のブログに吹き出しを設置するには、プラグインをインストールし、有効化する必要があります。それと、そのプラグインを使用する為には「ブロックエディター」に設定していることが条件となります。
| 結論を先に話ししておきます |
| ワードプレスには、吹き出しを設置する為の便利なプラグインがいくつかあります。その中でも「LIQUID SPEECH BALLOON」が一番おすすめと言えます。「LIQUID SPEECH BALLOON」は、設置するのも簡単です。
「LIQUID SPEECH BALLOON」は、マンガのように、人物に吹き出しを付け、あたかも話ししているかのように表現させることができます。また、会話形式の説明などをおこないたい場合などに重宝するのではないかと思います。
プラグインである「LIQUID SPEECH BALLOON」を使用する為には「ブロックエディター」に設定している必要があります。「クラシックエディター」で記事を書いている場合「ブロックエディター」に変更する必要があります。
以前投稿した下記の記事にも目を通して貰えると幸いです。 |
目次はコチラ
【ブロックエディターとは(動画付き)】
ブロックエディターは、ブロックシステムを採用し、コンテンツ同士を組み合わせ、整形しながら組んでいきます。ブロックエディターは、別の名を「Gutenberg/グーテンベルグ」と言います。
ブロックエディターは、Webサイトやブログなどにリッチでフレキシブルなレイアウトを作成できるようデザインされているのが特徴と言えるでしょう。コンテンツは、ブロックユニットとして作成します。
| ブロックエディターのブロックは「段落」「見出し」「メディア」「埋め込みオブジェクト」など、全てをコンポーネントとして扱い、双方に於いて、コンテンツを作成し、ワードプレスのデータベース内に保存します。 |
ではここで動画を視聴してみて下さい。題して「【2021年版】WordPressブロックエディターの使い方 基本編」です。
ブロックエディターの設定
この章では、ブロックエディターの設定をしていきます。ブロックエディターとして設定されていない方は、下記の図解を参考に設定してみて下さい。図解を見ながら設定していけば直ぐに終わるかと思います。
では初めに、現在に於いて、クラシックエディターで記事を書いている場合、ブロックエディターに切り替える必要があります。まずは、ブロックエディターに設定する為のやり方を解説していきます。
- 初めに「黄色枠」で囲まれている「設定」にマウスを移動するとプルダウンが表示されます。次に「桃色枠」で囲まれている「投稿設定」を開きましょう。この場合「固定ページ」でも問題ありません。
- 次の画面で「オレンジ色枠」で囲まれている「ブロックエディター」を選択し、左下にある変更を保存を押します。
- ブロックエディターを選択後「投稿」もしくは「固定ページ」の新規追加を開くと、下記のような画面が表示されます。
| ブロックエディターの新規画面を見ると、クラシックエディターの新規画面とは違って見えるかと思います。 |
【事前準備】
この章では、事前に準備が必要なことを書いていきます。下記の図解をそれぞれ見ながら、登録や設定などをおこなっていって下さい。どれか一つでも欠けていると「吹き出し」は使えなくなるのでご注意を。
| 事前に準備しておく必要があるもの |
| 「吹き出しに使用する画像」「LIQUID SPEECH BALLOONプラグインのインストールと有効化」「ブロックエディターに変更」など、必ずやっておいて下さい。 |
- では、一つ目の確認として「紫色枠」で囲まれている「メディアライブラリ」の中に、吹き出しに使用する「緑色枠」で囲まれている「画像」を予め準備しておいて下さい。
- 二つ目の確認として「桃色枠」で囲まれている「プラグイン」の中に「オレンジ色枠」で囲まれている「LIQUID SPEECH BALLOON」がインストール且つ有効化されていることが分かります。
- 三つ目の確認として「赤色枠」で囲まれている「投稿設定」の中の「黄色枠」で囲まれている「ブロックエディター」が選択されていることが分かります。
【LIQUID SPEECH BALLOONの設定(動画付き)】
この章から、図解を用いて「LIQUID SPEECH BALLOON」の解説をしていきます。冒頭にも記載してますが「LIQUID SPEECH BALLOON」を使うには「ブロックエディター」に設定している必要があります。
現時点に於いて「ブロックエディター」に設定されていない方は、上記項目の見出しで「ブロックエディターの設定」をご覧になり、設定の変更をして下さい。それでは進めていきましょう。
では先に、動画を視聴してみて下さい。題して「ブログ記事内に吹き出しを入れたい！LIQUID SPEECH BALOONプラグインを使ってみる」です。
- それでは初めていきましょう。プラグインの「LIQUID SPEECH BALLOON」をインストールし、有効化まですると、サイドメニューの「オレンジ色枠」で囲まれている「設定」を開いてみて下さい。
すると、プルダウンが開き、その中に「黄色枠」で囲まれている「LIQUID SPEECH BALLOON」があるので開いてみましょう。
- 「LIQUID SPEECH BALLOON」を開くと、下記のような画面が開きます。まず初めに、予め準備しておいた画像を選択したいので「赤色枠」で囲まれている「画像URL」を押してみましょう。
- すると、メディアライブラリ画面へ移動します。予め準備しておいた画像でこちらでは「緑色枠」で囲まれている「画像」を選択してみます。
- 画像を選択すると画面が切り替わります。次に、この画像のURLをコピーしたいので「水色枠」で囲まれている「URLをクリップボードにコピー」を押し、一旦、メモ帳などに貼り付けておきましょう。
- 続いて、同じように他の画像も選択してみましょう。こちらでは「桃色枠」で囲まれている「画像」を選択してみました。
- 画像を選択すると画面が切り替わります。次に、この画像のURLをコピーしたいので「紫色枠」で囲まれている「URLをクリップボードにコピー」を押し、一旦、メモ帳などに貼り付けておきましょう。
- では、メモ帳に貼り付けておいたURLを「水色枠」で囲まれているボックス内に貼り付けて下さい。次に「赤色枠」で囲まれているボックス内に、吹き出しで使用する「名前」を入力しましょう。
この時、名前とURLがキチンと一致しているかどうかを確認して下さい。こちらでは「ニャン吉」と「ちゅま吉」にしました。最後に「黄色枠」で囲まれている「変更を保存」を押しましょう。
- 保存まで終わると「緑色枠」で囲まれているところに、選択した「画像」が表示されます。この時、名前と画像が一致していない場合、どちらかを入れ替えるなどの対策をして下さい。
| 吹き出し用に使える画像は10個まで大丈夫ですが、その際、画像はご自分で準備し、画像サイズは300×300のピクセルサイズで大丈夫です。次の項目から、実際に「吹き出しを表示させる設定」に移りましょう。 |
【吹き出しを表示させる設定】
この章では、吹き出しを表示させる設定に移っていきます。既にプラグインの「LIQUID SPEECH BALLOON」がインストールされ、有効化されているので問題はありませんが、もう一つあります。
それは、冒頭でも書いてある通り「ブロックエディター」に設定されてあること。「ブロックエディター」に設定されていなければ、前項目で設定したことが無駄になってしまいます。それでは見ていきましょう。
- 「投稿」もしくは「固定ページ」のどちらでも構いませんが、新規追加を押して下さい。次に「黄色枠」で囲まれている「+」を押しましょう。
- +を開くと、ブロック一覧が開きます。その中の「桃色枠」で囲まれている「Speech Balloon」を押してみましょう。
- すると「オレンジ色枠」で囲まれている「画像」が表示されました。ではもう一つ追加します。「赤色棒」で表示されている箇所にマウスを表示させ「緑色枠」で囲まれている「+」を押してみましょう。
- +を開くと「紫色枠」で囲まれているようにプルダウンが開き、その中の「水色枠」で囲まれている「Speech Balloon」があるので開いて下さい。
- 二つ目の吹き出しが表示されました。表示された画像が最初の画像と同じなので変更する必要があります。まずは「Avatar」内の「桃色枠」で囲まれている「担当者名」を選択して下さい。
ここでは「ちゅま吉」を選択しています。すると「緑色枠」で囲まれている「画像」が、最初の画像と違う画像が表示されていることが分かるかと思います。
- 次に「ちゅま吉」の画像を右側に移動させましょう。まずは「Direction」内の「紫色枠」で囲まれている「Right」を選択すると「赤色枠」で囲まれている「ちゅま吉」の画像が右側へ移動しました。
- ではもう一つ追加してみましょう。同じように「オレンジ色枠」で囲まれている「+」を押すと「桃色枠」で囲まれているプルダウンが表示され「緑色枠」で囲まれている「Speech Balloon」を開きます。
- すると「黄色枠」で囲まれている「ニャン吉」の吹き出しが追加されました。
- 次は「オレンジ色枠」で囲まれている全てのボックス内に、テキストを入力してみて下さい。入力が終わったら、真ん中のテキストのみ「水色枠」で囲まれている箇所を開いてみて下さい。
- すると「紫色枠」で囲まれているようにプルダウンが開き、その中の「赤色枠」で囲まれている「テキスト右寄せ」を選択してみて下さい。
- 上記の図解で、テキスト右寄せにすると「黄色枠」で囲まれているように、真ん中のテキストだけが「右寄せ」になりました。
- 次に「赤色枠」で囲まれている「プレビュー」を押すと「水色枠」で囲まれているプルダウンが開き、その中の「紫色枠」で囲まれている「新しいタブでプレビュー」を開いてみましょう。
- トップページから見た感じです。見てもお分かりのように、キチンと吹き出しとなっていることが分かります。
| 吹き出しの設定には、ここで設定した以外にもありますので、やってみて下さい。いろいろ触ると面白いですよ。 |
今回は以上となります。ワードプレスに吹き出しを設置するプラグイン「おすすめ」については理解して頂けたでしょうか。ブロックエディターには、沢山のブロックがあるので難しいかも知れませんね。
以前投稿した下記の記事にも目を通して貰えると幸いです。
