オリジナルの吹き出しを作成する方法【WordPress・Cocoon】

WordPress

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


WordPressのテーマは「Cocoon」(コクーン)を使用しています。

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

よしてっく
よしてっく

ブログに使用しているアイコンを利用して吹き出しにすることもできます。





スポンサーリンク

吹き出し用キャラクターの画像を用意する

★まずは、吹き出しに使用するキャラクターの画像を用意します。




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

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

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



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




キャラクター画像の入手先は?

★「吹き出し」に使用する為の画像はフリー素材のサイトから入手します。今回はおそらく皆さんにも馴染みがある、「いらすとや」のフリー素材画像を使っていきます。

かわいいフリー素材集
いらすとやは季節のイベント・動物・子供などのかわいいイラストが沢山見つかるフリー素材サイトです。


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



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

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



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



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

オリジナル「吹き出し」の作成手順

★「Cocoon」テーマの機能で「吹き出し」を作成していきます。


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



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



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

【項目①】 タイトル

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

【項目②】 名前

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

【項目③】 アイコン画像

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

【項目④】 吹き出しスタイル

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

【項目⑤】 人物位置

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

【項目⑥】 アイコンスタイル

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

【項目⑦】  TinyMCE

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




手順④ 設定が完了したら、一番下の「保存」をクリックしてください。上部に確認用のデモが表示されますので、問題なければ再度「保存」をクリックして作成完了です。



作成した「吹き出し」を確認する

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

ここから「編集」や「削除」を行うこともできます。



まとめ

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


「吹き出し」テンプレートは何個でも作成することができます。

同じキャラクターでも、「左・右」両方のバージョンを用意しておくと会話方式で展開したいときに便利かもしれません。


「吹き出し」を使うことで、より読者に伝わりやすいコンテンツが作れると思いますので是非活用してみてください。



以上、最後までご覧いただきありがとうございました。

コメント

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