WordPressで吹き出しを設定する手順

ブログ運営

こんにちは、すうです。
現在の会社に3年以上在籍中。
だけど、今の働き方がつらくて退職を決意。
退職までの行動や気持ち、働き方の見直し過程を記録しています。

この吹き出し、可愛くないですか!?
見た目はもちろんのこと、ブログに使うことでこんな効果があるんです。

  • 読みやすくなり、最後まで読まれやすい
  • 大事なポイントを目立たせられる
  • 会話のような雰囲気になり、親しみやすい
  • 難しい内容の補足に使える
  • ブログの雰囲気や個性を出しやすい

手書きのイラストや顔写真など、好きな画像を使って作ることができます。

こんなのとか

こんなのとか

LINE風もあるよ

なんと、3ステップで簡単に作れてしまうんです!
今回はWordPressの吹き出し設定の方法をキャプチャ付きで解説していきます。

①画像を用意

まず、吹き出しに使いたい画像をPCの写真フォルダに用意します。

今回はこのイラストを吹き出しにしていきます。

アイコンの形は正方形か丸型から選べます。

最初から正方形の画像を用意すればトリミングなしで使うことができます。

もちろん、長方形の画像でも大丈夫です。編集で正方形に切り抜くことができます。

②Cocoon設定

Cocoon設定→吹き出し

吹き出しのリストが出てきます。最初からイラストが入っていて、このイラストの部分を好きな画像に変更します。

もちろん、最初のイラストのまま使うこともできます。

一番上の画像を変えてみましょう。

「編集」を押します。

アイコン画像→「選択」を押します。

画像を正方形に切り抜きます。右側メニューから「画像を編集」を押します。

「切り抜き」を押して、選択範囲に数値を入れます。

正方形にしたいので、同じ数字を入れます。

数字が小さいほど選択範囲が狭くなり、アップにできます。

私くらいの画像であれば、「900×900」がちょうど良かったです。

やり直したい場合は「元に戻す」を押すと、最初の画像に戻せるので、ちょうど良いサイズにできたら保存します。

保存を押すと、Cocoons設定の画面にもどります。

スタイルを選ぶ

種類は多くありませんが、見た目をカスタマイズできます。

好みの組み合わせを探してみましょう。プルダウンからそれぞれ選んだら「保存」を押します。

  • 吹き出しスタイル:吹き出しの色(緑、グレー、白)
  • 人物位置:右、左
  • アイコンスタイル:丸、四角(それぞれ枠あり、枠なし)

ブログに設定

「+」ボタンをおして、「吹き出し」と検索します。

出てきた「吹き出し」ボタンを押します。

右側のメニュー「ブロック」→「スタイル設定」→「人物」のプルダウンを開くと、先ほど作った吹き出しが一覧の中に出てくるので、選択して押します。

すると…?

できあがり!

いかがでしたか?

簡単にできるので、色々な吹き出しを作ってオリジナルのブログを書いていきましょう!

コメント