Cocoon：吹き出しの長さをセリフに合わせ、キャラも少し大きくする方法

こんにちは。ハイジブログのハイジ(@haiji_blog)です。

先日ココナラでキャラクターを作成していただいて記事更新のモチベーションがアップしています！

こんなにいい感じに作っていただきました。

興味を持った方は ココナラ で「ランジ」と検索するかランジさんのサイトを是非覗いてみてください！

現在使用しているワードプレステーマ『Cocoon』には吹き出し機能がデフォルトで備わっているので早速キャラにセリフを喋らせてみたんですけど、吹き出しに無駄な余白が出来るんですよね。。。

上の画像は『Cocoon』公式ページをスクショしたものです。

長いセリフならそこまで気にならないけど『OK！』とかのたった一言でもこんだけ長い吹き出しになっちゃうんです。

あとキャラクターがデフォルトでは結構小さく表示されてしまいます。

僕のようにキャラクターの全身を表示すると特にスマホから閲覧した場合小さすぎて何がなんだかわかりません。

デフォルトの状態

そこでセリフの量に合わせて吹き出しの幅が変わるようにカスタマイズしたのでその方法をお伝えしたいと思います。

以下で紹介するコードを更に改良したコードを別の記事で紹介しています。

こちらのほうがいい感じなので是非改良したコードをお使いください。

ではまずコードから！

まぁそんな引っ張るのもアレなんでチャチャッとコードを紹介します。

/*吹き出しをカスタマイズ*/
.speech-balloon{
  margin-left: 5px;
  margin-right: 0px;
  margin-top: 25px;
  float:left;
  max-width: 620px;
}

.sbp-r .speech-balloon{
  margin-left: 0px;
  margin-right: 10px;
  float:right;
}

.speech-person{
  width: 140px;/*キャラの大きさ*/
}

/*1240px以下*/
@media screen and (max-width: 1240px){
  .speech-person{
    width: 120px;
  }
  .speech-balloon{
    max-width: 505px;
  }
}

/*1030px以下*/
@media screen and (max-width: 1030px){
  .speech-person{
    width: 120px;
  }
  .speech-balloon{
    max-width: 500px;
  }
}

/*768px以下*/
@media screen and (max-width: 768px){
  .speech-person{
    width: 120px;
  }
  .speech-balloon{
    max-width: 590px;
  }
}

/*480px以下*/
@media screen and (max-width: 480px){
  .speech-balloon{
    margin-left: 5px!important;
    margin-right: 5px!important;
    margin-top: 20px!important;
    max-width: 255px;
  }
  .speech-person {
    width: 85px;
}
}

/*370px以下*/
@media screen and (max-width: 370px){
  .speech-balloon{
    margin-left: 5px!important;
    margin-right: 5px!important;
    margin-top: 20px!important;
    max-width: 225px;
  }
  .speech-person {
    width: 65px;
}
}

上記のコードをstyle.cssにコピペすればキャラが大きく表示され、いい具合に吹き出しの幅がセリフの量に合わせて表示されます。

端末サイズによって吹き出し関連を調整しないといけないので長々としたコードになってしまいました。

キャラの大きさを調整したい場合は

.speech-person{
  width: 140px;/*キャラの大きさ*/
}

この部分の数字を適当に変更してください。

ただし、この部分を変更すると吹き出しがキャラから離れ過ぎたり、キャラと重なったりする場合もありますのでその際は

　margin-left: 5px;
  margin-right: 0px;
  margin-top: 25px;

この部分の数字を変更して調整しないといけないので少々手間がかかります。

ちなみに丸抜きアイコンの場合はこのようになります。

一応主要な端末の大きさできれいに表示されるように調整してますが実機で確認したのはiPhone６Plusだけです。

メリット

メリットとしてはセリフが少ないときでも吹き出し内の無駄な余白がなくなるということですね。

あと、キャラクターをデフォルトより大きく表示することが出来るのでキャラクターの全身を表示してもきれいに表示されます。

またキャラクターを大きくした結果、名前欄もデフォルトより長く表示することが出来るようになりました。

デフォルトでは1行に3文字ですがこのカスタマイズを適用することでPCでは約9文字、スマホでは約6文字表示されます。

デメリット

こちらのカスタマイズ、セリフが短いときは吹き出しがセリフに合わせて短くなってスッキリして見やすくて良いのですが、逆にセリフが長くなった時が若干困ります。

特にスマホから閲覧した時なんか余計目立つんですがセリフが長いと吹き出し外に余白が出来ちゃうんですよね。

ただなるべく吹き出し外の余白が最小になるよう調整したつもりです。

あとキャラクターを大きくしたのと吹き出し外の余白の影響で1行に表示できる文字数が減ってしまいます。

ですが自分としてはどちらも許容範囲。

こちらのデメリットを解消した改良版のコードを別の記事で紹介しています。

https://haiji-blog.com/cocoon-fukidasi-customize2/

まとめ。

こちらのカスタマイズを適用すれば

• 吹き出しがスッキリして見やすくなる
• キャラをきれいに目立たせられる

ということが実現出来ます！

ハイジ

サイトに推しキャラがいるなら是非ご活用ください！

それでは！

追記

現在はAFFINGER5とオリジナルの子テーマ『Flly-hy』を使用しています。

『Fly-hy』はAFFINGER5のオリジナル機能はもちろんそのまま使えて、吹き出しが下にあるバージョンの会話機能等オリジナルな機能を付け足しました。

ハイジ

こんな感じで吹き出しを下にすることが出来ます。

ハイジ

もちろん、こっち側だって同じ様に吹き出しを下にすることが出来ます。

内部リンクブログカードがURLで作製できちゃうみたいですよ

その他の特徴を詳しく見たい方は下のボタンからどうぞ。