小説家になろうにて「キモオタでギャルゲー、それって何の罰ゲーム!?」連載中!

Cocoonの吹き出しのCSSカスタマイズ ~他サイトに差をつける3つのポイント

Cocoon
この記事は約3分で読めます。

Cocoonの吹き出し機能は活用されている方が多いと思います。
しかし画像を入れるだけでデフォルトのまま使っているサイトが大半。
せっかくですし、吹き出しもカスタマイズして他サイトに差をつけてみませんか?

本稿ではCocoonの吹き出しをカスタマイズする3つのポイントについて記してみます。

スポンサーリンク
この記事を読む方へのオススメ

1 人物の大きさ

吹き出しの人物ってデフォルトだと小さいって思いません?
台詞の長さによっては人物と吹き出しとのバランスがとれなくなります。
軽く読ませるための吹き出しなのに、テキストが重く見えては意味がありません。
というわけでカスタマイズしてみましょう。

カスタマイズ前。

Cocoon吹き出し人物カスタマイズ前

カスタマイズ後。

子テーマのstyle.cssに次の記述をしてください。

.speech-person {
width: 150px;
min-width: 150px;
margin-left: 8px;
margin-right: 8px;
}

デフォルトは60px×60px。
カスタマイズ後は150px×150px。
お好みの数字で調整してみてください。

marginは微調整用。
あってもなくてもいいです。

スポンサーリンク

2 吹き出しの位置

カスタマイズ前の画像をもう一度。

Cocoon吹き出し人物カスタマイズ前

吹き出しの先端が口元からずれています。
大きくしたらもっとずれます。
CSSでフィットさせてみましょう。

Cocoon吹き出し位置カスタマイズ後

こんな感じ。
喋っている感じがぐっと増して見えませんか?

子テーマのstyle.cssに次の記述をしてください。

.speech-balloon{
margin-top: 70px;
}

人物の画像にあわせてmarginの値を変えてください。

スポンサーリンク

3 吹き出しの枠線の色と太さ

ここはもうお好みです。
ただ、色を変えると記事全体の印象が変わって見えます。

当サイトでは青にしています。

Cocoon吹き出し色と太さカスタマイズ後

デフォルトの自然さもありだと思います。
ただサイト全体を地味にしているので、逆に吹き出しを派手にしています。
逆に台詞が強調ボックスを兼ねてもいるので「スタイル」タブの使用は他サイトさんより少ないです。
この辺はまさに個性の出しどころでしょう。

CSS例はこちらです。

.arrow_question::before, .sbp-l .speech-balloon::before, .arrow_answer::before, .sbp-r .speech-balloon::before {
border-right: 12px solid #6666ff;
}
.arrow_answer, .arrow_question, .sbp-r .speech-balloon, .sbp-l .speech-balloon {
border-right: 12px solid #6666ff;
}

色々試してみてください。

スポンサーリンク

まとめ

いっぱい出られた~

よかったわね
今回のカスタマイズ、ぜひ試してみてください
Cocoon色が減って記事の印象がガラリと変わりますから!

アドセンス有りでもPageSpeed Insightで100点満点!

超光速サイト実行環境KUSANAGI&WEXAL。
コスパ抜群のレンタルサーバーConoHa。
もっと知りたい方はボタンをクリックしてください。
特集記事の目次が開きます。

この記事を書いた人

広島市内のパチンコホール勤務。
3号機時代からのパチンカス。
ADHD、精神障害者手帳3級所持。
慶應義塾大学商学部卒、専攻はマーケティング(広告・宣伝)
国家一種試験経済職の資格で公安調査庁に入庁。
在職時は国際テロ、北朝鮮を担当。
「小説家になろう」の底辺作者。
WordPress記事は素人の備忘録です。

天満川鈴をフォローする
Cocoon
スポンサーリンク
きもおたねっと。
タイトルとURLをコピーしました