【今なら1冊無料】 >>> 詳細はこちら

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

Cocoon_オリジナルの吹き出しを作成するWordPress

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

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

よしてっく
よしてっく

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

 

Cocoon:吹き出し用キャラクターの画像を準備する

犬の自撮り

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

 

吹き出し画像準備①:使用する画像の推奨サイズpx(ピクセル)は?

ピクセルの眼鏡

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

 

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



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

 

吹き出し画像準備②:キャラクター画像の入手

女の子のフィギュア

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

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

 

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



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

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



 

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



 

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

 

 

Cocoon:オリジナル吹き出しの設定

吹き出しのイメージ

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

 

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



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



 

 

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

 

【項目①】 タイトル

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

【項目②】 名前

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

【項目③】 アイコン画像

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

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

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

【項目⑤】 人物位置

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

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

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

【項目⑦】  TinyMCE

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

 

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



 

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

シャボン玉を吹く女性

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

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



用途に合わせて、編集して下さい。

 

まとめ:オリジナルの吹き出しでブログをレベルアップ

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

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

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

「吹き出し」を使うことで、より読者に伝わりやすいコンテンツになり、ブログにオリジナリティが増すと思いますので是非活用してみてください。
関連記事 ブログで吹き出し機能を使う|WordPress・Cocoon

コメント

  1. CIMA より:

    はじめまして(^^)
    ブログを始めたばかりの初心者です、コクーンをつかっているのですが1人ではわからないことだらけで調べたり悪戦苦闘しながら亀のようにノロいスピードで進化してます^^;
    今回は吹き出しで検索していて大変勉強になりました、ありがとうございます。ざっと目を通させていただいたら他にも気になっていた設定の記事があったのでまた勉強させていただきますm(_ _)m
    いまだにブログのタイトルもっといいのないかなとか迷走してます(ノД`)
    いつか、よしてっくさんのようにいい記事が書けるようにがんばります!

  2. よしてっくよしてっく より:

    CIMAさん、初めまして。
    コメントありがとうございます。^^
    ブログを始めたばかりなんですね。
    記事がお役に立てたなら良かったです。
    私自身、ブロガーとしてのレベルは全然高くはありませんが、
    私が解ることであれば可能な限りお答えしますので、
    何か質問などあれば気軽にコメント下さい。
    ブログ運営、頑張ってくださいね!^^#

    • CIMA より:

      ありがとうございますm(_ _)m
      正直わからないことだらけですしライティングのスキルもなく^^;
      どうしても自分じゃ解決できない時は教えて頂けたら助かります

      • よしてっくよしてっく より:

        了解しました。
        質問はコメントやお問い合わせフォームなどからいつでもどうぞ〜。
        私が解ることはお答え致しますので。
        (^^)