シンプルなWordPressテーマ

Cocoonは、SEO・高速化・モバイルフレンドリーに最適化した無料テーマです。
見た目はシンプルですが、初めての方でも感覚的に使えるように
便利な機能を織り込んで作りました。
100%GPLテーマなので自由にご利用いただけます。

ダウンロードページはこちら。

ダウンロード

自作の吹き出しを作成して利用する方法

テーマ設定

Cocoonは、独自の吹き出し作成機能を有しています。

テーマ管理画面で、何箇所か入力するだけで、以下のような吹き出し(バルーン)形式の表示スタイルを利用できます。

以下のような吹き出しを作成することが可能です。

わいひら
わいひら

こんなのを作れるよ。

以下ではこの「吹き出し」機能の利用方法を紹介します。

スポンサーリンク

吹き出し利用の主な手順

吹き出しを自作する主な手順はこちら

  1. アイコンとなる画像を用意する
  2. 吹き出しを作成する
  3. 吹き出しを利用する

全て、WordPress管理画面内でマウスをポチポチすることにより作成できるので、さほど難しくはないと思います。

アイコンとなる画像を用意する

まずは、アイコンとなる画像を用意します。

今回は、僕がTwitter等で利用している以下の画像を説明します。

yhira

上記のような、正方形の画像を用意してください。大きさは、160px~200pxぐらいの正方形のものがちょうど良いかと思います。

アイコンとなる顔イラストなどは、いらすとやさんなどにも豊富にあるので、画像がまだ決まっていない場合は、探してみることをおすすめします。

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

また、多少なりともサイズを縮小し高速化のため、TinyPNG等で一度画像を圧縮しておくと尚良いかもしれません。

TinyPNG – Compress PNG images while preserving transparency
Make your website faster and save bandwidth. TinyPNG optimizes your PNG images by 50-80% while preserving full transparency!

吹き出しを作成する

次に、吹き出しの作成を行います。

吹き出しを作成するには、「Cocoon設定→吹き出し」を選択してください。

Cocoon設定→吹き出し

「吹き出し」画面が表示されたら「新規作成」リンクをクリックしてください。

吹き出しの新規作成

すると、以下のような入力フォームが表示されるので、タイトルやアイコンなどを入力します。

吹き出し作成フォーム

吹き出し作成後、一覧画面を表示すると以下のように作成したスタイルが表示されます。

吹き出し作成後の一覧画面

入力のコツ

タイトル

ビジュアルエディター利用時に、タイトル五十音順で並べ替えが行われ、表示されます。タイトルへの入力テキストにより、表示順を変更することも可能です。

ビジュアルエディターリストに表示

「ビジュアルエディターリストに表示」を無効にすると、ビジュアルエディター上では表示されません。

あまり利用しないものは、無効にしておくと良いかもしれません。

吹き出しを利用する

吹き出しの利用は、ビジュアルエディターから簡単に行えます。

テキストを選択した状態で、ビジュアルエディターの「吹き出し」ドロップダウンリストから、使用したいものを選択するとスタイルが適用されます。

吹き出しのビジュアルエディターでの利用例

実際に、吹き出し機能を利用したスタイルがこちら。

わいひら
わいひら

このように、アイコンのセリフにすることで、訪問者に分かりやすく説明できるよ。

デモのアイコンイラストについて

デモ用にあらかじめ用意されている、「© いらすとや」と書かれた吹き出しのアイコンは、いらすとやさんに利用料をお支払いした上で、特別な許可をいただいて、CDN配信という条件の下で利用させていただいています。

デモ吹き出しアイコンの利用について

CDN配信しているサーバーは、僕が用意した(強いとはいえない)サーバーなので、アクセスが集中すると、デモのアイコンは表示されなくなる可能性もあります。

そうならないように、デモの画像を利用する際は、いらすとやさんにて、好みの画像を探して、サイト上のサーバーにアップする形で利用することをおすすめします。

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

アクセス集中により、CDNで配信している画像が表示されなくなっても、保証はできませんのでご了承ください。

また、「© いらすとや」と書かれた吹き出し機能を利用する際は、いらすとや利用規約に準ずる形でご利用ください。

まとめ

このように、Cocoonテーマでは「吹き出し」を何個でも自由に設定して利用することが可能です。

「吹き出し」を利用することで、文章感が薄まり、より親しみやすい記述になることで、効果的に訪問者に伝えることも出来るかと思います。

ブログなどは、分かりやすく相手に伝えてナンボだと思うので、Cocoonの吹き出し機能が訪問者に伝わる手助けとなれましたら幸いです。

テーマ設定
スポンサーリンク
この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
わいひら

無料WordPressテーマ、Simplicity、Cocoonを作成。当サイトと寝ログを運営しています。

わいひらをフォローする
わいひらをフォローする
おすすめレンタルサーバー
mixhost

プラン変更で負荷対策が行えるので、ブログ向きのレンタルサーバーです。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
○サーバ引っ越しオプションあり(有料)
〇アダルト・出会い系サイト可
△安定性にやや欠ける

安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

◎nginxを用いた高速サーバー(完全SSD)
◎老舗サーバーなので安定感抜群
◎ディスク容量が多い
◎転送量が多い
◎同サービス内でドメイン管理が可能
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
△DBは7日分だけ無料復旧可能(ファイルは有料)
×プラン変更でCPUのスペックアップができない
×プラン変更しても即時反映されない
×アダルト・出会い系サイト不可

性能も兼ね備えながら安くブログ運営を開始したいのであればここ1択。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
○サーバ引っ越しオプションあり(有料)
△アダルト・出会い系サイト可(条件あり)
△開始したてなので運営能力は未知数(対応良)

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
サイトを続けるうちにアクセスが増えれば、プランのアップグレートで対応可能です。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎激安プランが用意してある
◎値段あたりのスペックが高い(コスパ良し)
◎サーバ引っ越しオプションあり(無料)
○http/2(高速化プロトコル)に対応
〇アダルト・出会い系サイト可
△プランのアップは可能だがダウンは不可
△毎日自動バックアップ(1日分)
△前日のバックアップからのみ復元できる(無料)

Cocoon

コメント

  1. みしま より:

    吹き出しで、アイコンを左に設定してるのに、投稿時に右に出てきます。設定しなおしたり、作り直しても変わりません。不具合か何かでしょうか?

  2. 小松田 より:

    ビジュアルエディターに吹き出しドロップダウンがないようなのですが、、、どこから設定できますか?

    • わいひら わいひら より:

      状態が詳しくわからないので推測になりますが「吹き出し」メニューで吹き出しはいくつか作成されていますか?
      それが原因でなければ、ビジュアルエディターのツールバーにある「ツールバーの切り替え」ボタンが押されていない可能性があります。
      もしそれでもうまくいかない場合は、次はできればフォーラムの方にキャプチャ画像とともに書き込んでいただければと思います。
      https://wp-cocoon.com/community/

  3. TOM より:

    ビジュアルエデイターで吹き出しが表示されません。ツールバーの切り替えボタンを押しても切り替えができないようです。

    すでに吹き出しは作成しました。

    よろしくお願いします

  4. oki より:

    申し訳ございませんが、教えていただきたいです。
    吹き出し設定を行うと縦書きになってしまいます。どうすれば改善するでしょうか?

    • わいひら わいひら より:

      申し訳ないですがコメントの案内にもあるように、テーマに関する質問はフォーラムにトピックを立てて質問していただければと思います。
      https://wp-cocoon.com/community/cocoon-theme/

      また、書き込みの内容だけでは、状態がわからないので、不具合状態のスクリーンショットを撮影してトピックの添付ファイルとしてアップしていただければと思います。
      コメントだと、アップ機能がなかったりと状態を把握しづらいので、フォーラムでの書き込みをお願いしています。

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