• 海外赴任時の車の売却はJCM

お気に入り一覧 お気に入り登録 お気に入り解除

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

カテゴリ タイ

こんにちは、みゆきメダカです。ブログを書くときに吹き出しを使おうとして、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_03Speech_babble_03
みゆきメダカ
みゆきメダカ

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

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

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

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

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

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

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

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

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

吹き出しの設置。

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

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

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

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

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

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


Speech_bubble_10Speech_bubble_10

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

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

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

Speech_bubble_11Speech_bubble_11

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

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

続きを読む

ブログ紹介

みゆきメダカのブログ

https://miyukimedaka.com

20年以上の東南アジアでの海外赴任の経験をもとに、これから海外赴任される方、されている方との有益な情報の共有できればと思っています。

カテゴリ タイ

このブログの最新記事

これで漏れ無し!海外赴任前の準備方法

チャートとチェックリストを使って、
海外赴任前の準備項目を確認しながら情報を収集して準備に備えましょう!

海外赴任準備チェックリストを確認する

書籍版のご案内

海外赴任ガイド 到着から帰国まで

書籍版「海外赴任ガイド」は各種ノウハウや一目で分かりやすい「海外赴任準備チャート」などをコンパクトな一冊にまとめております。海外赴任への不安解消に繋がる道しるべとしてご活用ください。

書籍版の詳細

プログライターの方

海外赴任ブログを登録する

あなたのブログを登録してみましょう!

プログライターの方

海外赴任ガイドのSNS

Twitter アカウントをみる

たいせつにしますプライバシー 10520045