Cocoon:吹き出しをセリフの量に合わせ、キャラも大きくするカスタマイズ(改)

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

以前Cocoonの吹き出しをセリフの量に合わせて流動的に変化させ、キャラクターも大きく表示させれるようになるカスタマイズ記事を書きました。

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

その記事で紹介したコードは短いセリフ量なら問題ないのですが、長いセリフになった場合余白が出来てしまってちょっと気に入らなかったのですが当時の自分の技量ではそれが限界だったので妥協して記事を公開。

 

↑こんな感じに。。。

まぁこのくらいなら許容範囲かな~って思ってたんですが、別のサイトでアフィリエイトをやってると口コミをセリフで喋らせる事が多くて

ハイジ
ハイジ

やっぱり見にくい!

ってなったので頑張りました。

そしたら出来た!!

なので改良バージョンのコードをお教えします。

Cocoon0.6.6以降ではデフォルトで吹き出しの幅がセリフの量に合うようになってますのでこのカスタマイズは不要です。
[temp id=4]

チャチャッとコードから

/*吹き出しをカスタマイズ*/
.speech-balloon{
  margin-left: 5px!important;/*左の余白*/
  margin-right: 5px!important;/*右の余白*/
  margin-top: 15px!important;
  float:left;
  max-width: calc(100% - 140px);/*設定したキャラの大きさ + 左右の余白*/
}

.sbp-r .speech-balloon{
  float:right;
}

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


/*480px以下*/
@media screen and (max-width: 480px){
  .speech-balloon{
    max-width: calc(100% - 80px);/*設定したキャラの大きさ + 左右の余白*/
  }
  .speech-person {
    width: 70px;/*キャラの大きさ*/
}
}
もしコードが表示されていない場合はお手数ですがリロードしてみてください。
リロードしても表示されない場合はお手数ですがコメント欄よりご報告くだされば幸いです。

上記のコードを子テーマのstyle.cssに貼り付ければOK。

そうすればこんな感じになります↓

余白、無くなりましたね。

以前のコードを使用してくださった方は是非こちらのコードに変更してみてください。

 

キャラクターの大きさを変更したい場合

キャラクターの大きさを自分の好きな大きさに変更したい場合は

15行目・25行目にあるwidth: ○○px;の数字を好きな数字に変えてください。

それに伴って7行目・22行目のmax-width: calc(100% - ○○px);の数字を

7行目は15行目の22行目は25行目の

数字に左右合わせた余白分の数字を足した数字に変更します。

 

色々と試行錯誤したお話。

本題は終わってしまった。。。

文字数稼ぎじゃないけど色々と試行錯誤したお話でも。

 

吹き出しが下に逃げる!!

まずは何もカスタマイズを施していないデフォルトの状態。

セリフが長くても短くても吹き出しの幅は一定。

セリフが短い会話が連発するとちょっと見にくくなりますが、長いセリフの時・・・

ってあれ!?

今気づいた。

デフォルトでも長いセリフの時吹き出し外に余白が出来るんですね。

と、思ったらスマホ表示では

Cocoonの公式サイトより

余白ありません。

まぁ最初は余白なんて全然気にしてなかったので。

PCの時はそもそも幅は十分にあるから別に余白があってもそこまで気にならないですもんね。

 

それでデフォルトの状態からChromeの検証機能をフル活用してなんとか吹き出しの幅をセリフの量に合わせるカスタマイズが出来ました!!

ハイジ
ハイジ

やったぜ。

意外とどうにかなるもんやねぇ~とか思いながら次に長いセリフを喋らせてみると・・・

・・・マ ジ で す か

吹き出しが下に逃げちゃいました。

 

max-widthで余白ぅうう!!

で、まぁこれも色々考えてmax-widthで吹き出しの最大横幅を制限すれば良いんだな、という結論に至る。

だけどそうすると

スマホ表示での余白

吹き出し外に余白ぅうう!!

PCでも多少余白が出来るのですがスマホ表示での余白がより気になります。

スマホは端末サイズが多岐に渡るのでどうしてもこんな感じになっちゃうのです。

でも当時の自分ではここまでが限界でまぁ妥協ラインだったのでこのままカスタマイズコードを公開。

Cocoonの製作者、わいひらさん御本人にもTwitterで紹介して頂きたくさんの方がそのカスタマイズ記事を見てくださいました。

ハイジ
ハイジ

ありがとうございます!

 

やっぱ余白じゃま~!!

妥協してそのカスタマイズコードを別のアフィリエイトサイトでも使用していると、口コミをキャラクターに喋らした時に余白があるせいで無駄に縦に長くなるんですよね。

これはユーザビリティ的にも悪影響がありそうなのでやはり吹き出し外の余白をなくさなければ!!ともう一度カスタマイズに取り掛かることに。

 

無知の僕、CSS関数のcalcと出会う

結構色々試してみました。

最終的にspeech-balloon-func.phpをいじって新しいclassを追加してみようとしたけどうまく行かず途方に暮れ、妥協するしかないのか・・・。

諦めかけていたその時、運命の出会いが!!

calcです。

簡単にいうとCSSの中で計算が出来るようになるCSS関数なるものらしい。

これは異なる単位でも計算できるとのこと。

ハイジ
ハイジ

なるほど、これだ!

ピーンと来ましたね。ピーンと。

これを使えば吹き出し外の余白をなくす事が出来るんじゃないかって。

僕の読みは正しかった。

max-widthの値を100%からキャラクターのpx分(margin含む)に設定すれば余白が無くなりました。

それがこの部分ですね。

max-width: calc(100% - 140px);/*設定したキャラの大きさ + 左右の余白*/

 

calcと出会えたことにより、セリフが短くても長くても僕の理想通りにすることが出来ました!

 

スマホ表示での余白、さよなら。

ほら~。

前のカスタマイズコードで気になってたスマホ表示での余白も全然ない!!

長かった吹き出しとの闘いもこれにて幕引きです。

 

まとめ。

以前の記事を見てカスタマイズコードを使用してくれた方はもちろん、この記事で初めて見て興味を持ってくれた方は是非新しいカスタマイズコードをご使用ください!!

そしてこの記事が役にたったと思って頂けたらシェアして頂ければ嬉しいです。

 

\この記事が役にたったらSHARE!/

2 件のコメント

  • はじめまして。
    以前のコードを利用させていただいていたものです。
    改良版があることに気づき、こちらにお邪魔させていただいたのですが、コードの表記が見当たりません。
    どのようにして拝見すればよろしいのでしょうか?

    • コメントありがとうございます!
      そしてコードが表示されてなかったようでご迷惑をおかけしてすいません。
      どうやら現在使用しているテーマとGitHubの相性が悪いようで。。。
      現在該当の箇所は別のハイライターを使用しているのでコードがきちんと表示れると思います。
      表示されていない場合はリロード・それでもだめならキャッシュを削除してリロード・それでもだめならまたご報告くだされば幸いです。
      ちなみにですがCocoonの最新Ver(0.6.6)にてデフォルトでセリフの量に吹き出し幅を合わせるようになっているようです。
      (ちょっとスマホでの表示がおかしいので次回のVerUpで修正入ると思いますが。)
      なのでこのカスタマイズCSSと公式のCSSがバッティングして表示がおかしくなってしまう可能性もあります。
      その際はこのカスタマイズコードは消去してください。

  • コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

    ABOUT US

    ハイジ
    社畜ナースが自由とお金を手に入れるために日々奮闘しております。 副収入のこと、仮想通貨についての事の記事がこれから増えていく予定です。