こんにちは。リナゾー（@rinazo）です。
Cocoonテーマ適用後、スマホ表示で画像の回り込み指定に違和感を感じたので調整しました。
Cocoon以外のテンプレートでも使える部分があると思うので、他のテーマをお使いの方も参考にしてみてください。
と言っても最近はカラム幅いっぱいサイズで画像表示している人の方が多そうなので、需要があるかどうかは謎。
出来上がりイメージ
Before、Afterでスクリーンショットを取ったのでこちらを見ると分かりやすいかと。
Before
画像の左に回り込み指定されているので文字が見づらくなっています。
スマホの機種によっては、画像横の文字が2、3文字なんてケースも考えられそう。それはよろしくない。
After
画像の回り込みを解除かつ中央寄せで体裁を整える。
Afterは、よくあるブログの画像レイアウト風に変わりました。
cssの変更
では調整のためにcssに手を入れていきましょう。
大前提として「子テーマで修正をしていく」ことをお忘れなく。
画像の回り込み指定しているクラス名を特定
画像の回り込み指定は、wordpressが独自に吐き出すclass名があります。
| 左寄せ | .alignleft |
|---|---|
| 右寄せ | .alignright |
| 中央寄せ | .aligncenter |
Cocoonではそのclass名に対して装飾調整している様子。
例えば左寄せ「alignleft」に対してCocoonのスタイル指定は
[code lang=”css”].alignleft {
float: left;
margin-right: 10px;
margin-bottom: 10px;
}
[/code]
これに加えてimgタグに紐づけられた「alignleft」に対してもスタイルが指定されているので、そちらも注意が必要です。
[code lang=”css”]img.alignleft {
display: inline-block;
margin: 0 1.5em 1em 0;
}
[/code]
スマホで回り込み解除するようにスタイルを書き直す
Cocoonのデフォルト状態だとスマホでも回り込み指定されたままなのは前述の通り。
今回の場合はスマホ閲覧時のみに適用したいので、子テーマにあらかじめ記述のあるレスポンシブ用のメディアクエリ内にスタイルを書き込んでいくことにします。
実際のcssスタイル指定
[code lang=”css”]
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*480px以下*/
@media screen and (max-width: 480px){
/*必要ならばここにコードを書く*/
.alignleft {
float: none;
}
img.alignleft {
display: block;
margin: 0 auto 1em auto;
text-align: center;
}
}
[/code]
これで少しは見やすくなったのかなと（自画自賛）。
さいごに
Cocoonは無料で配布されているテーマなのに有料テーマと遜色ない機能が盛りだくさん。最初の設定と設定項目を探す…というのが慣れるまで少々手間取りますが、慣れてしまえばこちらのもの！かゆいところに手が届くテーマに仕上がっているなと感じました。
ブログを始めたいけどどのテーマにしようかなって悩んでいる人はとりあえずこれ入れておけばヨシ。
しっかし、このテーマ作ろうと思ったら気が遠くなる…。
制作・配布してくれている方に感謝ですわね。ほんと。
