stinger3をコピペ一発でレスポンシブデザインにする方法【WordPressテーマ】

レスポンシブデザイン

このブログのテーマstinger3をレスポンシブデザインにしてみました。

とはいっても、作り込んだものではなく画面幅が狭くなったら、サイドバーが消えて、記事本文のカラムが真ん中にデーンと居座るだけのなんちゃってレスポンシブですけど。それでよければ、この記事にお付き合いください。

今回は、そのカスタマイズ方法の紹介です。

photo by Serge Kij

スポンサーリンク
レクタングル(大)広告

このブログのレスポンシブデザイン

このブログは、記事のあるメインカラムを拡げてAdSenseの「レクタングル(大)広告」を横に2つ並べれるようにしました。

これのおかげで収益は良くなったのですが、全体の横幅が1118pxとなってしまいました。この幅は、大抵のパスコンなら大丈夫と思いますが、少し解像度の低いパソコンや、タブレットだと横幅が広すぎて横スクロールバーが出るようになってしまいました。

その対策として、「タブレットのような幅の狭い端末」でページを表示するときは、サイドバー(336px)を非表示にすることにしました。非表示にせず下に回すこともできるのですが、そこまでスワイプダウンして読む人も、ほとんどいないと思うため消すことにしました。

今回は以下のように改良しました。この記事でもブラウザな幅を変化させればカラムが切り替わります。

画面幅が広いときは2カラム

横幅1160pxでの表示。

1160ピクセルでの表示

画面幅が狭くなると1カラム

横幅768pxでの表示。

横幅768pxでの表示

一応さらに狭く横幅、400pxでの表示。

横幅400pxでの表示

スマホ表示

スマホの場合は、デフォルトのスマホ表示です。

スマホ表示

stinger3デフォルトデザインでの適用方法

このブログは、カラムの幅をかなり変更したため参考にならないと思うので、デフォルトのstinger3をカスタマイズする方法を載せておきます。

画面幅が広いときは2カラム

1000pxより広いと通常表示。

stinger3デフォルト1000pxオーバー

画面幅が狭くなると1カラム

1000px以下だとレスポンシブ表示され、サイドバーが消える設定です。

stinger3デフォルト1000px以下

スマホなどは、デフォルトのスマホテーマが使用されます。

カスタマイズ方法

設定方法は簡単です。テーマ自体の「style.css」もしくは、子テーマの「style.css」に以下を追記するだけです。

幅などを、ピクセル指定からパーセント指定に変更したので、ざっくりとした設定になり細かなことはできません。

もし、ピクセル指定のままカッチリと指定したいのであれば、「style.css」には以下のコードを追記します。

ただしこちらは、ブラウザの幅628px以下に対応するには、新たにメディアクエリを書く必要があります。

まとめ

今回は、とりあえずそれっぽいものはできたと思います。

これで、タブレットなどでも横スクロールを必要とせず表示できると思います。

一応動作確認はしましたが、細かなところで表示のズレとかがあったら申しわけありません。

ヘッダーの画像などは、横幅がそのまま縮小されるようになっているので、何種類か画像を用意して、横幅の大きさごとにCSSで画像を入れ替えるとかしてもいいかもしれません。