初心者向け講座 ~吹き出しを追加してみよう~

初心者向け

吹き出しを追加してみよう!

こんにちわ。今回はWordPressで無料のテーマ、Cocoonでの吹き出しを追加する方法についての解説になります。

Cocoonについては、こちらからどうぞ

なぜ、このような解説をしようかと思ったかというと……私が吹き出しを使えるようになるまでにかなりの時間がかかったからです。ちなみに吹き出しとは、

これのことだよ!

これを使うのがちょっとした目標だったので、最初に使えなかったときは本当に落ち込みました。
使えなかった原因としては、今現在、多くの解説サイトでは旧エディターを使った解説になっているからなのです。

しかし、WordPressは今後、ブロックエディターに切り替わるそうです。
そのため、ブロックエディターでも簡単に吹き出しを追加できるように、初心者向けの解説をやっていきたいと思います。

吹き出しブロックの使い方

各ブロックの上部付近にカーソルを置くと出現するブロックの追加、もしくは、画面左上のマークをクリック

表示されたリストの下にある吹き出しを選択

するとこのように男性が表示されました。この男性はデフォルトで表示される人物ですので、変更することができます。

この時、右側の設定が非表示になっているので、歯車アイコンをクリックして設定を表示させて下さい。

吹き出しブロックを選択した後に、右側の人物リストから、人物を変更することができます。

今回は女性を選択してみました。

このように簡単に吹き出しブロックを追加し、人物の変更を行うことができます。
あとは吹き出しの部分に好きな文字を追加すればOKです。

慣れれば目をつぶってでもできるよ!

……ごめん、うそ。

吹き出し人物の追加のやり方

デフォルトで用意されている人物だけじゃ物足りない

もっとオリジナルの人物を使いたい

そんな方のために、人物の追加方法も合わせて解説します。Cocoonの使い方にも書いてありますので、そちらと合わせてどうぞ。

画像の準備

まず、追加したい人物を用意します。

今回は無料写真素材・フリーフォント検索サイトのオーダンで用意しました。とても便利なサイトなので、よかったら利用してみて下さいね。

画像から、必要な部分を正方形でトリミングします。縦横比をあらかじめ正方形にしておくと間違いがなくて便利です。

次に画面サイズを160×160px ~ 200×200px の間にサイズ変更します。この時、比率が必ず1:1になるようにしておいて下さい。

画像のトリミング方法や、サイズ変更の方法はこちらの記事からどうぞ。

人物画像の追加方法

左のメニューから

  1. Cocoon設定を選択
  2. 吹き出しを選択
  3. 新規追加をクリック

すると、このような画面になります。

あとはこの画面から必要な部分を設定して、保存を押すと追加した人物を使うことができます。

こんな風にね!

終わりに

どうだったでしょうか? きっと「なんだ、簡単じゃないか」と思うことでしょう。
私も吹き出しブロックを追加するところまでは問題なくできたのですよ。

でも、出てきたのは知らない人物。
違うんだ。私が使いたいのはそれじゃないんだ。
当時の私は設定リストが非表示になっていることに気がつかなかったんですね。それで、どうしても吹き出しを使いたいがゆえに、旧エディターのクラシックモードで編集したりもしました。

でも、違うだろう。これからブロックエディターに切り替わるのなら、なんとしてでもそれを使いこなせるようになるべきだろう。そう思って、右往左往した後にようやく今回の方法までたどり着きました。

同じような問題にぶち当たった方の参考になれば幸いです。

ここまで読んでいただき、ありがとうございました。

コメント

タイトルとURLをコピーしました