当サイトは広告が含まれています

【Cocoon】オリジナルの吹き出し作成とカスタマイズ

Cocoon オリジナルの吹き出し作成とカスタマイズ

こんにちは、ikuzo(いくぞう)です。

WordPressのテーマ「Cocoon」には、独自の吹き出しを作れる機能があります。

この機能は公式サイトでも紹介されています。

今回は、Cocoonでオリジナルの吹き出しを設定する方法とカスタマイズのやり方を紹介します。

スポンサーリンク

吹き出しに使う画像を用意しよう

オリジナルの吹き出しを作るには、まずは吹き出しに使う画像を用意しましょう。

Cocoonには、こんな画像の吹き出しや

こんな画像の吹き出しもデフォルトであるけれど

プー太郎
プー太郎

やっぱりオリジナルの吹き出しを作りたいよね。

オリジナルの吹き出しを作るには、無料で使えるイラストACや、いらすとやなどの画像を利用する手もありますが、

ココナラというサイトでイラストレーターさんに自分だけのアイコンを作ってもらう方法もあります。

私もココナラで吹き出し用のアイコン(プロフィールの画像兼用)を作ってもらいました。

ココナラ公式サイト ⇒ https://coconala.com/

ココナラはテレビCMをやっていたこともある(現在は不明)のでご存知の方も多いのではないでしょうか。

「ココナラ」トップページココナラのトップページ

気になるお値段は、アイコンなら1つ1,500円くらいから作ってもらえます(イラストレーターさんによって値段は変わります)。

アイコンを描いてくれるイラストレーターさんを探すには、ココナラにアクセスしてメニューの「イラスト・漫画」→「アイコン・SNSイラスト作成」をクリックします。

ココナラの「イラスト・漫画」→「アイコン・SNSイラスト作成」をクリック

するとたくさんのイラストレーターさんの作品が出てくるので、自分の好きな雰囲気のアイコンを見つけましょう。

サンプルのアイコン

私は、yapiころんさんという方にアイコンを作っていただきました。

出品者「yapiころんさん」のページ(ココナラ)

>>ココナラのyapiころんさんのページ

作っていただいた私のアイコンがこちら

ココナラで作ってもらったikuzoのアイコン7種

プー太郎のアイコンがこちら

ココナラで作ってもらったプー太郎のアイコン5種

yapiころんさんはベースのアイコンが2,500円で、表情違いは1つ500円で作ってくれました(値段は変わっているかもしれません)。

お気に入りのアイコン(イラストレーターさん)が見つかったら、

見積もり・カスタマイズの相談をする」を押してイラストレーターさんに連絡してみましょう。

ココナラの「見積もり・カスタマイズの相談をする」を押す

ikuzo
ikuzo

この時、表情違いのアイコンが必要でしたら、そちらも作ってもらえるかどうか聞いてみましょう(追加料金も)。

ココナラは料金先払い制です。なので気になることはあらかじめ、イラストレーターさんに遠慮せずに聞いた方がいいです。

そして購入したあとは「トークルーム」でイラストレーターさんとやり取りをします。

トークルームでは、メッセージといっしょに自分の写真や「こんなふうに描いて下さい!」的なイラストの下書きを送ることもできます。

そして最初はイラストレーターさんにある程度「お任せ」でもいいと思いますが、修正してもらう際の指示はしっかり出しましょう。

yapiころんさんのように無料修正回数が「無制限」の方もいらっしゃいますが、それに甘えて何度も何度も修正していただくのは申し訳ないですからね。

スポンサーリンク

Cocoonでオリジナルの吹き出しを作る方法

それではここから、Cocoonでオリジナルの吹き出しを作る方法です。

Cocoon設定」→「吹き出し」をクリックします。

「Cocoon設定」→「吹き出し」をクリック

新規追加」をクリック。

吹き出しの「新規追加」をクリック

設定項目は7つあります。

吹き出しの設定項目(7つ)

タイトル

タイトルには、ドロップダウンリストに表示される「吹き出しの名前」を入力します

ドロップダウンリストに表示されるタイトル(吹き出しの名前)

名前

名前には、アイコンの下に表示される文字を入力します

吹き出しのアイコンの下に表示される名前

アイコン画像

ここで吹き出しに使うアイコン画像をアップロードします。

Cocoonの公式サイトによると、吹き出し用のアイコン画像は160px~200pxくらいの正方形がおすすめだそうです。

ですが個人的には、300px×300pxくらいがいいんじゃないかと思います。

試しに200px四方と300px四方でアイコンを作ったので画質を見比べてみて下さい。

※画像の大きさを調整する方法は次の章で紹介します。

プー太郎
プー太郎

200px×200px

プー太郎
プー太郎

300px×300px

見比べると300pxの方が綺麗に見えませんか?

当然のことながら300pxの方がファイルサイズが大きくなるので、

TinyPNGなどでアイコン画像を圧縮しましょう

TinyPNGは、画像を画面へドロップしてダウンロードするだけでファイルサイズが小さくなります。

TinyPNGに圧縮したいアイコン画像をドロップ

プー太郎
プー太郎

TinyPNGを使うと、アイコンのファイルサイズが半分以下になるよ。

吹き出しスタイル

吹き出しは4パターンから選択できます

吹き出しは4パターンから選択可能

ikuzo
ikuzo

デフォルト

プー太郎
プー太郎

フラット

ikuzo
ikuzo

LINE風

プー太郎
プー太郎

考え事(それにしても変な顔のアイコンを作ってもらったもんだ)

人物位置

人物を左にするか、右にするかを選びます

プー太郎
プー太郎

左です

プー太郎
プー太郎

右です

画像を左右反転させるには、のちほど紹介するPhotoScape Xで簡単にできます。

アイコンスタイル

アイコンの形や枠線が4パターンから選べます

アイコンの形や枠線が4パターンから選べる

プー太郎
プー太郎

四角(枠線なし)

プー太郎
プー太郎

四角(枠線あり)

プー太郎
プー太郎

丸(枠線なし)

プー太郎
プー太郎

丸(枠線あり)

TinyMCE

ここはチェックを入れたままにしておきましょう。

スポンサーリンク

アイコン画像の大きさを変更する方法(リサイズ)

さきほどもお話ししましたが、吹き出しに使うアイコンは個人的に300pxくらいの正方形がおすすめです。

ココナラでアイコンを作ってもらう場合は、イラストレーターさんに「300px×300pxで作って下さい」とお願いしてもよいですが、

用途がほかにもある場合(たとえばプロフィールの画像でも使うなど)は、大きめに作ってもらってあとでリサイズした方がいいです。

プー太郎
プー太郎

小さい画像を大きくすると、見た目が粗くなるからね。

私は画像をリサイズするときは、いつもPhotoScape Xという無料ツールを使ってます。

PhotoScape Xのインストール方法や基本的な使い方↓

【PhotoScape X】の基本的な使い方
こんにちは、ikuzo(いくぞう)です。 ブログを始めて5年になりますが、私が一番使ってきたツールは 無料で使える画像編集ソフト「PhotoScape X」(フォトスケープエックス)です。 「PhotoScape X」は無料版と有料版があり...

 

yapiころんさんに作っていただいたアイコンは800px×800pxですが、

PhotoScape Xで300px×300pxにリサイズする方法を紹介します(ファイルサイズが約90KB→約30KBになります)。

プー太郎
プー太郎

さらにTinyPNGで圧縮すると10KB程度になるよ。

PhotoScape Xの「写真編集」を選択して、800pxのアイコンを画面へドロップ

「写真編集」を選択して、800pxのアイコンをPhotoScape Xにドロップ

サイズ変更」をクリックします。

「サイズ変更」をクリック

「縦横比を固定」にチェックを入れたまま、幅を「300」で指定します(高さは自動で300になります)。

アイコンの幅を「300」で指定

適用」→「保存」を押します。

「適用」→「保存」を押す

「別名で保存」などを押してファイルを保存すれば、300px×300pxのアイコンの完成です。

「別名で保存」などを押してファイルを保存

プー太郎
プー太郎

イラストのアイコンは「PNG」での保存がおすすめです。

スポンサーリンク

アイコンの背景色を変更したり位置や大きさを調整する方法

ikuzo
ikuzo

アイコンの背景は、かんたん無地壁紙作成というサイトで作れます。壁紙を作るときはアイコンと近いサイズで作りましょう。

プー太郎
プー太郎

壁紙の大きさはPhotoScape Xで変えることもできるよ。

PhotoScape Xに背景の壁紙をドロップします。

背景色の壁紙をPhotoScape Xにドロップ

挿入」を押してから

PhotoScape Xの「挿入」を押す

壁紙の上へアイコンをドロップします。

アイコンを壁紙の上へドロップ

これで壁紙とアイコンが重なりました。

壁紙の上へアイコンが重なった

あとはアイコンの隅にある「○」をドラッグして大きさを変えたり、アイコン自体をドラッグして位置を調整します。

アイコンの大きさや位置を調整

大きさや位置が決まったら「編集」→「サイズ変更」を押して300px×300pxにリサイズ後、保存する際にこんなダイアログが出たら「いいえ」を押して下さい。

ダイアログが出たら「いいえ」を押す

そして吹き出しの設定をすればこの通り。

ikuzo
ikuzo

完成!

スポンサーリンク

アイコンの背景を消す(透明にする)方法

最初からアイコンの背景に色がついていて、背景色を変更したい場合は背景をいったん無色にしましょう。

アイコンの背景を消すには、PhotoScape Xの「カットアウト」を使います。

PhotoScape Xの「カットアウト」を選択

アイコンをドロップしたら「マジック消しゴム」を選択して背景部分をクリックします。

「マジック消しゴム」を選択して背景部分をクリック

すると背景が透明になるので、これでいったん保存して、あとは先ほどのやり方で好きな色の壁紙を設定します。

背景が透明になった吹き出し用のアイコン

プー太郎
プー太郎

PhotoScape Xはこの他にも、画像を切り抜いたり(トリミング)、画像を反転させることも可能だよ。やり方は下の記事を見てね。

【PhotoScape X】の基本的な使い方
こんにちは、ikuzo(いくぞう)です。 ブログを始めて5年になりますが、私が一番使ってきたツールは 無料で使える画像編集ソフト「PhotoScape X」(フォトスケープエックス)です。 「PhotoScape X」は無料版と有料版があり...
スポンサーリンク

吹き出しの色を変える方法(背景色・文字色・ボーダー色)

クラシックエディターではできませんが、ブロックエディター(Gutenberg)なら吹き出しの色を簡単に変えることも可能です。

ブロックを追加」を押して「吹き出し」を選択します。

「ブロックを追加」を押して「吹き出し」を選択

プー太郎
プー太郎

吹き出しが見当たらなければ「すべて表示」→「COCOONブロック」の中にあります。

右側のバー(吹き出しのオプション変更)で吹き出しの色(背景色・文字色・ボーダー色)を設定します。

右側のバー(吹き出しのオプション変更)で吹き出しの色設定ができる

プー太郎
プー太郎

オプション変更のバーがない時は上の「設定」ボタンを押してね。

スポンサーリンク

Cocoonの吹き出しをカスタマイズ

ここでは2つだけですが、Cocoonの吹き出しをカスタマイズする方法を紹介します。

「枠線あり」のアイコンの枠線の色や太さを変える方法と、アイコンの位置(人物位置)を中央に寄せる方法です。

枠線の色や太さを変える方法

WordPressメニューの「外観」→「テーマファイルエディター」を選択します。

ダッシュボードの「外観」→「テーマファイルエディター」を選択

Cocoon Childのスタイルシート

編集するテーマは「Cocoon Child」になっていることを確認して下さい。

編集するテーマは「Cocoon Child」になっていることを確認

そしてスタイルシートに次のCSSをコピペします。

/*吹き出しアイコンの枠線*/
.speech-icon img{
border: 5px solid #ff00ff;
}

こんな感じです。

スタイルシートに貼り付けたアイコンの枠線を変えるCSS

このCSSによってアイコンの枠線がこんなふうに変化します。

カスタマイズした吹き出しのアイコン

「5px」で枠線の太さ、「solid」で線の種類、「#ff00ff」で色を設定しています。

好みに応じて太さの数字や色のコードを変更して下さい。

プー太郎
プー太郎

カラーコードはこちらの原色大辞典で調べることができます(コードはすべて半角文字で入力して下さい)。

アイコンの位置(人物位置)を中央に寄せる方法

デフォルトのCocoonの吹き出しは、端の方へ寄っています。

吹き出しの文章が短いと、読者の目が左へ右へと何だか疲れそうですよね。

「吹き出しのアイコンをもっと中央寄りにしたい!」という方にそのやり方を紹介します。

アイコンの位置(人物位置)を中央に寄せる

吹き出しのアイコンを中央に寄せるには次のCSSを使います。

/*吹き出しを中央に寄せる*/
@media screen and (min-width: 835px){
.sbp-l,.sbp-r{
margin-right: 5em;
margin-left: 5em;
}
}

上のCSSはパソコンのみ、アイコンが中央に寄ります(幅835px以上のデバイスのみ効きます)。

「5em」は「5文字分、中央に寄せる」という意味なので、数字は好みで変更して下さい。

上のCSSだけで「5文字分」アイコンを寄せた画像がこちらです。

5文字分アイコンを中央に寄せた画像

5文字分中央に寄ったものの、アイコンが小さくなってしまいました。

これは吹き出しのアイコンが「全体の12%」と比率が決まっているため、吹き出しの両側に余白を作るとアイコンが小さくなってしまうんですね。

吹き出しの両側に余白を作るとアイコンが小さくなる

これを解消するには次のCSSを先ほどのCSSと同時に使います。

/*アイコンの大きさを調整*/
@media screen and (min-width: 835px){
.speech-person{
width: 15%;
min-width: 15%;
}
}

吹き出しのアイコンを中央に寄せて、アイコンの大きさを調整するCSS

中央に寄せてアイコンの大きさを調整した吹き出し

プー太郎
プー太郎

5文字分寄せた場合、アイコンの幅を「15%」にしたらデフォルトとほぼ同じ大きさのアイコンになりました。

ikuzo
ikuzo

寄せる量とアイコンの大きさは好みで調整して下さい。

今回は、Cocoonでオリジナルの吹き出しを設定する方法とカスタマイズのやり方を紹介しました。

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

コメント