【簡単】Cocoonでオリジナルの吹き出しを追加作成する｜カスタマイズ

今回は、WordPressのテーマ「Cocoon:コクーン」でオリジナルの吹き出しテンプレートを作成する手順をご紹介します。

「Cocoon」のテーマには標準で用意された「吹き出し」のテンプレートがありますが、キャラクターの画像をオリジナルのものにすることで、よりブログのクオリティが向上し読者にも内容が伝わりやすくなるかと思います。

 

Cocoon：オリジナルの吹き出しを作る(カスタマイズ)

Cocoonは標準の吹き出しをカスタマイズ(編集)したりオリジナルの吹き出しを新規作成して追加することもできます。

順番に解説していきます。

 

使用する画像の推奨サイズpx(ピクセル)は？

 

★「吹き出し」を作成するための画像のサイズ「px(ピクセル）」は160px～200pxが良いとされています。

 

画像のサイズを表す「px(ピクセル)」を確認するには、画像を右クリック⇒「プロパティ」⇒「詳細」タブの画面で確認できます。

画像を使用する前に確認しておきましょう。

 

 

吹き出しキャラクター画像の入手

 

★「吹き出し」に使用する為の画像はフリー素材のサイトから入手します。

今回はおそらく皆さんにも馴染みがある「いらすとや」のフリー素材画像を使っていきます。

 

手順①　「いらすとや」のサイトにアクセスし「人気のイラスト」カテゴリーの「いろいろな顔アイコン」をクリックします。

手順②　「いろいろな顔アイコン」が年代別で表示されるので、その中から好きなグループをクリックします。

※「動物」や「モンスター」というグループもあります。

 

手順③　目的の画像グループが表示されたら、表情などをからお好みの画像を右クリック⇒「名前を付けて画像を保存」⇒ピクチャフォルダなどに保存してください。

これで、画像の準備ができました。

 

 

Cocoon：オリジナル吹き出しの新規追加

 

★「Cocoon」テーマの機能でオリジナルの吹き出しを設定していきます。

 

手順①　WordPressのダッシュボード（管理画面）メニューの「Cocoon設定」⇒「吹き出し」をクリックします。

 

手順②　「吹き出し」の設定画面で「新規追加」をクリックします。

 

手順③　設定フォームが表示されるので、各項目を入力・選択していきます。

 

「吹き出し」テンプレートのタイトルを入力してください。自分でわかりやすいタイトルにしましょう。

 

キャラクター画像の下部に表示される名前を入力してください。未入力でも大丈夫です。

 

あらかじめ用意しておいた、キャラクター画像のファイルを指定してください。

 

「デフォルト」「フラット」「ライン風」「考え事」から選択できます。

 

「左」または「右」を選択できます。

 

丸（枠線あり）・丸（枠線なし）・四角（枠線あり）・四角（枠線なし）から選択できます。

 

チェックしたままでOKです。

 

手順④　設定が完了したら、一番下の「保存」をクリックしてください。

上部に確認用のデモが表示されるので、問題なければ再度「保存」をクリックして作成完了です。

 

 

作成した吹き出しを確認・編集する

 

★作成した「吹き出し」は「一覧ページへ」をクリックすると確認できます。

ここから標準の吹き出しや新規追加した吹き出しの「編集」や「削除」を行うことができます。

 

吹き出しの編集項目は新規作成したときと同じ内容なので、必要な箇所を編集し「保存」をクリックして下さい。

 

以上でオリジナルの吹き出しを追加作成する流れは完了です。お疲れ様でした。

↑吹き出し作成の先頭に戻る

 

まとめ：オリジナルの吹き出しでブログを差別化

今回は、WordPressのCocoonテーマ機能を使って、オリジナルの「吹き出し」テンプレートを作成する手順をご紹介しま した。

「吹き出し」を使うことでより読者に伝わりやすいコンテンツになり、ブログにオリジナリティが増す上に、文章を読むリズムも良くしてくれるので是非活用してみてください。