【CSS3】メディアクエリを使ってスマホやiPadで当ブログを見た時のレイアウトを変えてみる

この記事の所要時間は約 12分です。

これまではあまり気にはしてなかったんですが、ドロップシッピングサイトでの応用を兼ねて
当ブログを iPhone、Androidなどのスマホや iPad等で見たときに
自動的に見やすいレイアウトに変わるようちょっとだけ工夫してみました。

スポンサーリンク


ご覧になってる時期によっては当サイトのテンプレート等が変更されて記事通りになってない場合もあります。

完全なレスポンシブサイトまであと1歩

こないだの当ブログの大改修前は
WPTapというプラグインを利用してスマホ対応としていました。

とっても便利なんですが、どうしてもデザインが画一的になってしまうため
勉強の意味も含めて改修を機に自分で変えてみようと思い立ったわけです。

方法はいくつかあります。

今回使った手法は CSS3のメディアクエリというもの。

といってもスマホ限定の修正でして、
PC上でのブラウザ幅が狭くなったら 2カラムを 1カラムに自動的に変更するといったような工夫まではしていません。
だからメディアクエリに非対応の IE対策も施してません。

あくまでモバイル機器でのレイアウト自動変更だけにとどまっています。

スクリーンサイズによって使用機器を判断し
それに合わせた CSSを読み込んで独自のレイアウトで表示させる仕様なので
今後デバイスの解像度がますます上がってくると次第に使えなくなりそうな気もしますが
当座はこれでいってみます。

ちょっとだけの工夫の柱となるのは、

  • iPhone(iPod)や iPadの縦画面(ポートレートモード時)で閲覧時はサイドバーをなくし投稿(記事)だけを見せるようにするというもの。
    これによりサイドバーに置いてあるカテゴリーやタグなどは非表示となりますが、その分文字が大きくなって画面もすっきりし若干見やすくなる筈です。
  • ただしカテゴリー等を全部外してしまうと私個人が過去の投稿を参照するときに不便なので、横画面(ランドスケープモード)にした時は PC 閲覧時と同じようにサイドバーが復活するようにします。
  • Androidは出たとこ勝負。上記設定でどう見えるか、です。

 

イメージ画像

 

最初のおまじない

<head>~</head>に以下の一文を記述します。
(iPhoneや Androidではデフォルトの表示だと文字や画像がとても小さく表示されます。これをちょうどいいサイズで表示させるための呪文みたいなもんです)

上記に関してはいろんな書き方があるようでそれぞれ動きも若干違ってきます。

今回のポイントは「maximum-scale=2.0」の部分。
これは 2倍のサイズまでピンチアウト可能という呪文です。

しかしこの設定はどうも少数派みたいですね。
多くのワードプレス使い手たちのサイトの多くが「拡大不可」、
つまりピンチアウトができない仕様にしてあるみたい。

でも私は彼ら(彼女ら)の記事を読むときに
文字が小さかったり画像をもっと細部まで見たいと思った時、
つい指で画面をなぞって拡大しようとしちゃいます。

当然画面は拡大されません。
そして「なんだよー、ここもだめかぁ」と一人グチるのです。
なので当ブログは拡大・縮小可にしてみようかと。

これは完全に私個人の好みです。しかし若干のデメリットもあるにはあります。
これについては下方の「横画面(ランドスケープ)で確認してみる」をご参照ください。

 

CSSへの追加記述

機器を判断して表示レイアウトを変える方法は CSS次第なんですが
専用の CSSを外部ファイルとしてその都度読み込ませるか、
それとも今ある CSSに追記で書いていくか。

私は管理の簡単な「追記」型にしてみました。
デメリットは余分な記述が増えることです。

”スマホ向け”の通信速度を最大限考慮するなら
画像のサイズや CSS、スクリプトなどは極力その内容量を少なくすべきでしょう。
でもこれは今後の課題と自分に言い聞かせて暫くは放っておきましょ。

下は iPhone(iPod)の縦画面だけに適用させる呪文ということで
これを既存の CSS最下部に記述します。
(@は半角に変更してね)

”orientation : portrait”という部分が「縦画面用」を意味します。
これがなければ縦横共通の CSSとなります。

次に、最初からわかっている部分を書き込んでいきます。
例えばサイドバーをなくすなら「非表示」の設定に。
(下の IDやクラスは一例ですので必ずしもこの通りではないですよ)

文字を少し小さ目にしようというのなら

など、考えうる設定を先に済ませておきます。

 

話は前後しますが
iPhoneなどはテキストサイズを自動で拡大する機能がついてるようで(確かに最初はすごく大きな文字で表示されてびっくりしました)これを自動で大きくさせないようにするための -webkit-text-size-adjust : none; という呪文はほぼ必須っぽいのでこれを先頭に書いておきます。
私の場合は body に設定してあります。

横画面時の調整は縦画面の調整が全部済んでからやります。
縦横画面共通のレイアウトはある程度引き継がれるので横画面時のみ変更したい部分を後から追加・変更すればいいでしょう。

ひと通り済んだらこれ以降はエミュレーターや実機で確認しながら少しずつ調整を重ねていきます。

スクリーンサイズの増減に合わせて流動的に横幅を変更

一般的にはサイト全体やコンテンツの横幅は固定しているサイトが多いかと思います。
当サイトも多分に漏れず、です。

しかしそのまま iPhoneにもっていくと逆にそれが足かせとなるので
200pxといった固定値での設定を「100 %」「auto」などの流動的設定に変える必要があります。(全部ではないですけど)

当サイトで言えば投稿部のブロックは ID=content でくくってあり
横幅は 650pxに設定してあります。

これを以下のように変更し、柔軟に横幅が変わる設定にしてみます。

またサイドバーのブロックは「float:right;」で右に、
投稿ブロックは「float:left;」で左に指定してあるので
サイドバーを非表示にするなら投稿ブロックのフロート設定を「なし」にします。

このあたりはなんとなく頭でわかるんですが
調整を進めていて時々こんがらがるのが上記のような設定を新たに書き加えないと
予想通りに動いてくれないということです。

どういうことかというと、例えば上記の例で言えば
通常は”float”指定したところが左に寄ったり右にずれたりしちゃいます。
指定がなければ通常表示になります。

だから通常表示に戻したいときは”float”を”クリア”するか
もしくは”float”指定自体を書かなければいいと錯覚してしまいます。

そうではなくわざわざ”float:none;”の記述を加えて
『”float”指定はありませんよ』と宣言してあげないといけないんですね。

これはまだわかりやすいのでいいんですが
ならば絶対配置(position:absolute;)にしたものを解除して
通常の表示位置にしたい時はどうするか。

これにはまいりました。
絶対配置にしない、つまり普通の表示にするってことなんですが
「絶対配置を解除する」ってことはどういうことなんだ?と。

これの正解は……「position: static;」と記載します。

普段は「”static”(特に配置方法は指定しないという意味)」という指定をすることがないので
そこに辿りつくまでには少々時間がかかってしまいました。

 

リンクメニューの位置替え

当ブログのページリンクが右上にちょこんと鎮座しています。
これらは「float:right;」で右寄せ、テキストはブラウザ外に飛ばすことで非表示にし
背景画像をリスト表示で「float:left;」して並べてあります。

キャプチャ画像

 

これらをまんま非表示にしちゃっても全然問題ないんですが敢えて残してみました。
ただしこのままでは無駄に横幅が広がってしまうため下記のように変更してみます。

  • 全体右寄せ「float:right;」を解除
  • 画像ではなく、テキスト表示に変更

これらを CSSで記述すると以下のようになります。
(細かい設定は省いて a要素も一緒に記述してあります)

で、以下がその結果。

キャプチャ画像

 

「続きを見る」のテキスト表示

当ブログはマウスオーバーで「続きを見る」のテキストが出るようになっています。

キャプチャ画像

 

しかしマウスオーバーの概念のないスマホではそのままだと「続きを読む」が表示されません。

キャプチャ画像

 

そこで最初から「続きを見る」のテキストを表示させておくようにします。

このテキスト自体は元々あるんですが PC上では非表示にして
背景画像で置き換えています。

その設定は「text-indent:-9999 px;」で飛ばしてしまう類いのもので
ここだげ下記の指定をして非表示にしてます。

これを最初から表示させればいいので、

このように書き換えます。
もちろん背景画像は非表示にします。

 

「トップに戻る」ボタンの非表示

PCサイトでは少しスクロールダウンすると
右下にトップに戻るボタンの「TO TOP」の画像が出るようになっています。

しかし iPhone等では画面最上部をタップすることで同様のことができちゃいます。
それに下記画像のように変な位置に固定表示されてしまって邪魔なので
これを消すことにしましょう。

キャプチャ画像

 

しかしここでちょっと問題発生。
この画像の表示設定や表示位置はスクリプト内(.js ファイル内)ですべて制御されています。

もちろん腕のある人はそのあたりもぐりぐりコードを書いてかいくぐっていけるんでしょうが
私にはとうてい無理。

さてどうしましょ。

例によって考え付くだけのキーワードで調べまくったら、、、ありましたよ。

「is_mobile()」関数。

なあ~んだ、ちゃんとそういう関数が用意されてるんぢゃぁないかぁと思ってよくよく読んでみたら、なんと terkel.jp さんの自作だそうで。

この際ありがたく使わせていただきます。
ということで対象を「iphone,ipod,ipad,android」に限定して functions.php にコードを書き込み、header.php には
「モバイル機器”以外”で見てる時は scrolltopcontrol.js を有効にする」という内容のコードを記述してみます。

つまりスマホで見た時はこのスクリプトは実行されないよ~ということですね。

その結果、きちんと消えてくれました。

 

一部の画像が横幅いっぱいで表示されるトラブル

ここまで見てきて画像なども普通に表示されていたので気付かなかったんですが
とある投稿をチェックしていたらやたら画像がでかいのに気付いたんです。
それが下のキャプチャ画像。

キャプチャ画像

 

本来であれば下図のように表示されるべきなんです。

キャプチャ画像

 

”またか”とがっくりくるも、そのままにはしておけないので
他の人たちのソースとじっくり見較べてみましたよ。

すると 1ヵ所、それらしきところを発見しました。
私の書いた画像(img)に対する指定は

ところがここは”max-”を付けなければならないようです。

これで思った通りの表示になりました。
いやぁホント難しいわぁ。

iPhone 4(S)は 960×640pxという高解像度の Retinaディスプレイ を採用しているため、同デバイスで webページを見ると画像が 2倍に引き延ばされて若干にじむらしいです。

これの対策もあるにはあるんですがとても面倒くさいのと、我が iPod touch 第 4世代で見たところそれほど気になるもんでもなかったので、この部分についてはスルーしてあります。
(iPhone 4と iPod touch 第4世代は共に Retinaディスプレイですが厳密には若干の差があるのでそれなりの対策を施すべきなのかもしれません。でも悲しいかな iPhone 4を持ってないので検証ができません)

 

横画面(ランドスケープ)で確認してみる

縦画面ではほぼ問題なく表示されるようになったのでこれを横画面で確認してみると……

まだ横画面用の CSSを設定してないため
本来なら PC閲覧時と同一表示で(サイドバー込み)全体が表示される筈なんですが
結果はなんとも中途半端なところで切れてしまってます。

キャプチャ画像

 

ここで「maximum-scale=2.0」のデメリットが頭をもたげてきます。

”maximum-scale”の値を「1」にすると
横向きにしても一瞬で PCサイトと同じように全体表示されます。

しかし「1」は等倍を意味し、
それと引き換えに画面の拡大・縮小の操作ができなくなってしまいます。

「2」にすると拡大・縮小操作は 2倍まで OKですが
上記画像のような表示になってしまいます。

もっともこれは最初だけで
ピンチインすれば画面は全体表示になるのでひと手間かかるだけの話なんですが。

一番望ましいのは
横画面にした時にす~と全体表示になり、かつ拡大・縮小もできるというもの。
でもどうやら両方を共存させることは無理みたいです。

ひと手間かかりますが、やはり拡大・縮小機能は捨てがたいので
私は「2」のままにしてあります。

 

横画面にした時にいくつか修正するところもあるので
これに関しては CSS に下記の呪文を書いて追記していきます。
(「orientation : landscape」が横画面用の指定となっています)

ある程度は縦画面用の CSSが継承されているので足りない部分や修正部分だけを加筆していきます。

おまけの設定

これは私なりの実験みたいなものなんですが、縦画面時はサイドバーが非表示なので
仮にカテゴリーから検索したいという奇特な人がいたとしたら不親切な設計となります。

そこで縦画面時のみ
「※横向き(ランドスケープ)でサイドバーも表示」の文字を表示させられないか
試してみました。

理屈としては、通常の PCサイトでは非表示にしておき
スマホ上のみ表示させればいいというもの。

なので本来スマホ上で表示させるべき位置(HTML)に何らかのクラス名を付けて
「※横向き(ランドスケープ)でサイドバーも表示」というテキストを記述してみます。

CSSでそのクラスに非表示を指定します。
これで PCサイトでは常にテキストが隠れた状態になります。

次に「@media only screen and (max-width : 480px) and (orientation : portrait)」のところにだけ同じクラス名でフォントサイズや色など普通に表示させるための指定を書いておきます。

すると縦画面時のみ下図のような文字が表示され
横画面にすると再び消えるようになります。

キャプチャ画像

 

iPad用の設定

iPad用には別の呪文が必要です。

これもいくつか書き方はあるんですが私は下記のようにしてました。

iPhone設定と同じく縦画面時はサイドバーを非表示にし
横画面時は PC サイトと同じ表示設定にしてあります。

CSSの中身は基本的にそう変わってません。

 

ちょっとだけテキスト表示に工夫

せっかくの CSS3なので
わかるかわからないかぐらいのほんのわずかではあるんですが
テキストにシャドーをかけてみます。
(Chrome や Safariやスマホで見るとなんとなくちょっと雰囲気が違うなぁぐらいには感じ取れると思います。残念なのは IEでは バージョン9でもこの機能が搭載されてないこと)

 

Android での見え方

Android 専用の CSSを用意することは結果としてはできませんでした。
とにかく設定値が機種によってメーカーによってバラバラなんで。

試しに私の ISW11F(1280×720px)で見てみたところ、
ほぼ iPod touch での表示と変わりませんね。

”ほぼ”というのは、横画面にした時サイドバー込みの全体表示機能は働くけど
画面内に全体を表示させようとピンチインするも途中までしかズームが効かず、
全体を見たい時にはいわゆる横スクロールのような感覚で画面内を移動させないと
端から端まで見ることができないのです

このあたりはもはや調整不可能。どうにでもなれって感じです。

あー、それにしてもこんなに大変だったとは。
やっぱりプラグインはラクだぁ~。

参考サイト

スポンサーリンク

ブログランキングに参加してます。よろしければポチッとな。

お気軽にフォロー↓してください。

ブログ更新情報はこちらからどうぞ。

follow us in feedly

コメントを残す




日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)