フロントページをレスポンシブデザインにする

このブログをスマホで観た場合、トップページが酷いことになっているので改修していきます。改修と言っても元々の親テーマ(Xeory Extension)ではレスポンシブデザインに対応しているので、僕がCSSやサーバーサイドのPHPを改造していった結果めちゃくちゃになっただけです。

CSSでレスポンシブ

当初javascriptでDOMを操作してレスポンシブに対応させようとしていましたが、親テーマでもCSSでレスポンシブを実現しているので、同じようにCSSでレスポンシブデザインを実現しようと思います。

■ドはまりした部分 cssでレスポンシブデザインを作成する場合に[@media]クエリーというのを指定します。使い方は簡単で例えばですが、以下の様な感じで使います。

/*スマートフォン向け設定*/

/*タブレット向け設定*/
@media screen and (max-width:768px){

}

/*PC向けの設定*/
@media screen and (max-width: 1200px){

}

簡単なのになんでドはまりしたか？

[@media]の詳しい使い方については検索した方が早いですが、ちょっと分解して調べてみると、 [@media ①screen and (②max-width: ③1200px)] 3つのパラメータを指定していることは分かりました。

■①についてここは大体が[screen]か[all]を指定しておけば問題なさそうです。参考：メディアの種類 webブログの場合は、[all]でも問題無さそうに思えます。

■②について今回のはまりポイントがここでした。良く考えたら分かりそうななのですが、ここをずっと[max-width]で指定していました。

横幅の指定については、高度な指定方法を除けば、 [max-width]か[min-width]しかありません。

[max-width] ：ブラウザの幅がクエリに定義された値より狭い場合にルールが適用されます。 (後述する参考先より引用) [min-width] ：ブラウザの幅がクエリに定義された値より広い場合にルールが適用されます。 (後述する参考先より引用)

今回僕はモバイルファーストでCSSを追加していました。モバイルファーストは先にモバイル向けの小さいディスプレイの定義を書いて、それよりも大きいディスプレイの場合は[@media]で条件分けしようとしていました。結論を書くと[max-width]で指定していたのでどのディスプレイでもモバイル向けの設定のみ読み込まれていました。参考：レスポンシブウェブデザインの基礎

■③についてオマケみたいなもんですが、[max-width]と[min-width]のどちらを使うかによって数値が変わってきそう？ [min-width]の方がこれより横幅が大きかったら変えて！という命令なので簡単な気がします。

結局何をどうしたか

長々と書いてきましたが、追加したCSSは下のチョビっとだけですｗ

/*スマートフォン向け設定*/
body.home .front-loop article.post
{
  border: ridge;
  height: 12em;
  width : 100%;
  margin: 0;
}

/*タブレット向け設定*/
@media all and (min-width:768px){
  body.home .front-loop article.post {
    width : 32%;
  ｝
}

/*PC向けの設定*/
@media all and (min-width: 1200px){
  body.home .front-loop article.post {
    width : 25%;
  ｝
}

まだ携帯向けの表示になると画像がハミ出てくるｗなど色々ありますが、ひとまず記事の並び変えは問題なさそうです。ちなみにまだローカルの環境でしか反映していないので、携帯で当ブログ観るとグチャグチャっぷりが見れます。