8/5 Cocoon日記

このブログをPCからご覧の方はお気づきかと思いますが、またブログデザインが変わりました（スマホ用のデザインもちょっと変わったけど）。7/9の日記で書いたようにモバイルフレンドリー対応でCocoonというWordPressテーマを導入したんだけど、同時に自作テーマの限界も感じたのでPC用サイトもCocoonで対応できないか、試行錯誤してました。

最初はCocoonの子テーマをコピーして、モバイル用とPC用を別テーマとしてデザインしようとしたんだけど、同一サイトに複数のCocoonテーマを入れているとCocoonの設定がうまく反映せず、せっかく設定した内容が何度も消えてしまったりと苦戦。どうやらこの場合は同一テーマでスクリーンの大きさによって処理を変えるようにCSSを作成しなければならない模様。

今までCSS(Cascading Style Sheets)はかなり適当にしか覚えてなかったので、CSSでプログラミング的な使い方ができるというのも今回知ったぐらいなんだけど、最近のWebサイトはPCでもスマホでもレイアウトが崩れずに見やすいように作ることが推奨されていて（レスポンシブデザインというらしい）、そのためにCSSの記述でスクリーンの幅によって条件分岐できる（メディアクエリというらしい）ようで、Cocoonのスタイルシート(style.css)にもテンプレートが書いてあった。あとは条件によってサイト内の要素のサイズ、位置、表示/非表示等をCSSの文法で記述していくだけ。意外と簡単で今までの苦労はなんだったんだという感じ。

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1240px以下*/
@media screen and (max-width: 1240px){
  /*必要ならばここにコードを書く*/
}

/*1030px以下*/
@media screen and (max-width: 1030px){
  /*必要ならばここにコードを書く*/
}

旧デザインは3カラムだったけどCocoonは3カラムには対応していないので、左カラムの代替としてモバイル画面用のドロワーメニューをそのまま使用。この方が画面もすっきりして見やすい気がする。右カラムは1024px未満の幅だとメインカラムの下に流れてしまうので、そのタイミングで右カラム内の要素を非表示にしてドロワーメニュー内に表示するようにした。あと、苦労したのがヘッダー部分の背景画像。スクリーン幅で画像サイズが全然違うので、スマホ用、タブレット用、PC用と背景画像を3種類用意して環境によって切り替えているけど、人によってはヘッダー右下のロゴが切れてたりするかも。

レスポンシブデザインのテスト用サイト

このサイトで様々な環境での画面表示が確認できる。やはり環境によってロゴが切れているようだけど、そこは妥協かな。（続く）

Tweet