// // //

【初心者向け】WordPressに吹き出しを表示する方法解説【Cocoon環境下】

Speech_bubble_01 Blog/Word_Press/Web
Speech_bubble_01
この記事は約5分で読めます。

ブログを書くときに吹き出しを使おうとして、Webで調べた解説と自分のコンピューターのモニターの表示が異なり、戸惑った経験はありませんか。

その理由は、WordPressのアップデートにあります。WordPressはバージョン5.0(2018年12月6日公開)から標準のビジュアルエディターがそれまでのクラシックからグーテンべルグにアップデートされています。

つまりWebの解説がアップデート前のクラシックのビジュアルエディターをもとに解説していると、アップデート後のWordPressに標準でついてくるビジュアルエディターと異なるため、混乱していまします。これはアップデート後にWordPressを始めた初心者はクラシックに対する知識がないため、特に深刻ですね。(ぼくはそうでした。)

それでは、スキンとしてCocoonを使った環境下に限りますが、もっとも簡単と思われる吹き出しの使い方をお話しします。また、WordPressはVersion 5.1.1-ja、CocoonはVersion 1.7.5(共に2109年4月20日現在では最新)をベースにお話しします。

みさきメダカ
みさきメダカ

パパ、ブログで吹き出しを使いたいけど、Webで調べてもよくわからないよ。

みゆきメダカ
みゆきメダカ

それはWordPressが5.0にヴァージョンアップしたときに標準のビジュアルエディターが、それまでのクラシックからグーテンベルクに変わったからだよ。

みさきメダカ
みさきメダカ

それじゃ、グーテンなんちゃらをクラシックに戻したら、OK?

みゆきメダカ
みゆきメダカ

グーテンべルクね。それも1つの方法だけど、今後はグーテンベルグが間違いなく主流になると思うよ。だから、ベースはグーテンベルクで、吹き出しを使うところだけクラシックを使う方法を説明するね。

人物イメージの準備

みゆきメダカ
みゆきメダカ

初めに人物の画像を用意しよう。

みさきメダカ
みさきメダカ

私たちのことだね。

みゆきメダカ
みゆきメダカ

ぶっちゃけ、そうだね。用意の仕方は以下の方法があるかな。

1 ディフォルトの画像を使う。

2 写真を使ったり、写真を修正したものを使う。

3 自分でイラスト描く。

4 ネットでフリーのイラストをもらう。

5 誰かにイラストを描いてもらう。

みさきメダカ
みさきメダカ

ネットのフリーのイラストは

いらすとやさん

が有名だね。

みゆきメダカ
みゆきメダカ

そうだね。いらすとやさんのイラストを使わせてもらう時は、サイトの”ご利用規約”にしたがってね。

みゆきメダカ
みゆきメダカ

どの方法でも良いんだけど、自分で描いたり、特別に描いてもらったりすると、色々な表情のイラストが用意できるね。

吹き出しの設定

みゆきメダカ
みゆきメダカ

それじゃ、吹き出しの設定方法の説明を始めるね。

 みさきメダカ
 みさきメダカ

わーぃ。

みゆきメダカ
みゆきメダカ

吹き出しを書きたい投稿の記事の画面から上のスクショにあるように①のCocoon設定にカーソルを合わせて、その後②の吹き出しをクリックしてね。

Speech_babble_03
Speech_babble_03
みゆきメダカ
みゆきメダカ

次に上のスクショの様に新規追加をクリックしてね。

Speech_bubble_05
Speech_bubble_05
みゆきメダカ
みゆきメダカ

そして、①でこの吹き出しのタイトル、②で吹き出しで喋るキャラの名前(ぼくだと”みゆきメダカ”)を設定してね。③に”選択”をクリックして、あらかじめメディアに登録した人物の画像を選んでね。①のタイトルは後で説明する”吹き出しの設置”のときに参照するタイトルなので、覚えやすく、内容がわかるものがいいね。

Speech_bubble_06
Speech_bubble_06
みゆきメダカ
みゆきメダカ

①で吹き出しそのものの形、②で人物の位置を指定してね。

Speech_bubble_07
Speech_bubble_07
みゆきメダカ
みゆきメダカ

最後に①でアイコンの形と枠の有無を決定してね。②は必ずマークを入れてね。これで設定は完了!

みさきメダカ
みさきメダカ

次はいよいよ、設置の番だね。

吹き出しの設置。

みゆきメダカ
みゆきメダカ

 それじゃ、投稿一覧から吹き出しを書きたい記事を開いね。

Speech_bubble_08
Speech_bubble_08
みゆきメダカ
みゆきメダカ

上のスクショの様に、①でブロックの追加をして、②のフォーマットをクリックすると、プルダウンメニューが出てくるので、③のクラシックをクリックしてね。

Speech_bubble_09
Speech_bubble_09
みゆきメダカ
みゆきメダカ

①の吹き出しをクイックするとプルダウンメニューとして、作った吹き出しタイトルの一覧が出るので、使いたいタイトルをクリックだね。


Speech_bubble_10
Speech_bubble_10

すると選択した吹き出しが表示されるので、書きたいコメントを吹き出しの中に書けば完成だよ。

みさきメダカ
みさきメダカ

何度も吹き出しを使っていると下のスクショの様に”よく使うもの”に”クラシック”が表示されるから便利だね。

Speech_bubble_11
Speech_bubble_11

いかがでしたか。クラシックエディターをご存知の方には、何でもないことだと思いますが、私の様にWordPressを始めたときにはすでにビジュアルエディターがグーテンベルクに移行していた初心者には戸惑いがあったのではないでしょうか。私も吹き出しが使える様になるのに思いの外、時間がかかりました。この記事がWordPress初心者の方の一助になれば幸いです。

最後までお付き合い頂き、ありがとうございました。それでは、さようなら。

コメント