Cocoonは標準で「吹き出し」の機能が実装されてます。
吹き出しや会話文があると文章にメリハリが出るので上手く活用していきたいところ…。
そんな吹き出しですが、スマホサイトで見た時にアイコンが小さくなることが気になったので、修正してみました。
同じように気になった方は参考にしてみてください。
スマホサイトで小さくなる吹き出しアイコンを修正
早速ですがこちらが今回カスタマイズしたコードです。
/*480px以下*/
@media screen and (max-width: 480px){
/*必要ならばここにコードを書く*/
.speech-person {
width: 80px;
}
.speech-wrap .speech-balloon {
font-size: .9em;
}
}Cocoonの親テーマでは、メディアクエリを使ってスマホサイトのみアイコンのサイズを小さくしているので、子テーマのメディアクエリを使って上書きする方法です。
1つずつ見ていきましょうか。
吹き出しアイコンのセレクタ
.speech-person {
width: 80px;
}クラス名「.speech-person」がついたdivタグが吹き出しのアイコン部分なんですが、初期設定のCocoonではスマホサイトで見た時に小さくなるようなcssが記述されています。
今回はこれを回避するため、子テーマのスタイルシートでアイコンのサイズを独自に指定してあげました。
ちなみにPCで見た時の吹き出しアイコンのサイズは「80px」。
スマホサイトも、このサイズを目安にして各自好きな大きさに設定してみてください。
吹き出しコメントのセレクタ
.speech-wrap .speech-balloon {
font-size: 0.9em;
}吹き出し内の文字も若干小さくなっているので、そこも調整しておきました。
クラス名「.speech-balloon」がついたdivタグがテキストの部分となります。
あとは「font-size」プロパティを使って好きなサイズに設定するだけ。
ちなみに「em」という単位は、親要素に設定されたフォントサイズを基準にしてサイズを決める時に使います。
簡単に言うと「倍」を意味する単位。
今回使った「0.9em」は0.9倍ということになるので、周りの文字よりも若干小さな文字になります。
メディアクエリを使いこなしてCocoonをカスタマイズ
Cocoonには吹き出しに限らず、スマホで見た時にデザインが変わる箇所がいくつかあります。
これらには「メディアクエリ」と呼ばれるcssの機能が使われているんですが、使いこなせばPCとスマホそれぞれに対して最適なコンテンツを提供できるようになります。
レスポンシブデザインを扱う上で欠かせない技です。
これを機に使い方を覚えておくとそのうち役に立つかも！
あわせて読みたい
