当サイトも、サクりとレスポンシブデザインにしてみた。

当サイトも、サクサクとレスポンシブデザインにしてみた。

今頃感ただよいますが、
これまで、PC画面サイズ用のみとして機能していたテーマをスマートデバイス向けに、
レスポンシブデザインを適用してみました。

1.モバイルファーストへの転換

PCベースのレイアウトから、基本をモバイルとして1カラムで考え、画面サイズが大きくなることで、
2カラムへと変化させる。

2.viewport の設定

レスポンシブデザインにて、マルチデバイスに対応する為、viewport(width=device-width を設定します。
>HTML

<meta name="viewport" content="width=device-width">

2-2.IE8への対応

・・・。

3.可変を前提とする

>CSS

#container,
.wrapper {
  margin: 0 auto;
  width: 90%;
}

4.ブレイクポイントを設定する

今回は、スマートフォン、PC(タブレット)として320px、768pxの2つをブレイクポイントとしました。

>CSS

/* for SmartPhone */
@media only screen and (min-width: 320px) {
}

モバイルファーストとして考えてるのでベースになります(1カラム)。

/* for Tablet */
@media only screen and (min-width: 768px) {
}

2カラムへ変化。

5.WordPress アップロード画像の処理

レスポンシブデザインにするため、アップロード画像の可変処理を追記します。
(記事本文内の画像がはみ出ないようにね!)

>CSS

img.size-full,
img.size-large,
img.size-medium,
.attachment img {
    max-width: 100%; /* When images are too wide for containing element, force them to fit. */
    height: auto; /* Override height to match resized width for correct aspect ratio. */
}

その他、もろもろ調整はしておりますが、とりあえず主要なとこだけ。
メジャーブレ960pxは、まぁ置いときましょう・・・。

レスポンシブデザイン自体、実際どうかなと想うところもありますが、まぁブログだし。

SNSでもご購読できます。