レスポンシブデザインのテーマを全面採用

2016年3月27日iPad/iPod/iPhone,Mac,Web-log・ココログ関連,WordPress,パソコン・インターネット

本ウェブサイトを、どのデバイスで見ても、同じテーマで表示できるようにするため、レスポンシブデザインに対応させました。

かなり、辛かったです。暫定版を3月13日に適用して様子を見て、デバッグした上で本日全面的に切り替えました。多分、できていると思います。

Orange and Black RD

レスポンシブデザインの基本に従って、モバイルファーストで設計し、画面のピクセル数に合わせて設定を変えています。ピクセル(px)ではなく文字幅(em)で切り替えた方が良いのでは? と言うアイデアをtwitterで教えていただきました。ですが、その時点で、ピクセルでの設計がかなり進んでおり、そのまま進むことにしました。

[amazonjs asin="4048863231" locale="JP"]

レシポンシブデザインテーマの作成

レスポンシブデザインなテーマに書き換える時に、次の対応をしています。

  • オリジナルテーマOrange and Balckのデバッグ
  • 読み込むバックグラウンドイメージをほぼ0に
  • CSS指定(色、フォント)の最小化
  • レスポンシブデザイン
  • ページネーションのレスポンシブ対応
  • ソーシャルボタンのレスポンシブ対応
  • ページナビゲーション追加

簡単に解説します。

オリジナルテーマOrange and Balckのデバッグ

元のテーマは、次の物です。最後のupdateが2012年3月18日で、見捨てられちゃったみたい。もう4年も更新されていません。

  • searchform.phpにバグがあり、次の検索ページへ行けない
  • フッターメニューが複数段になった時に表示が乱れる

searchform.phpのバグは、次の記事にまとめてあります。

フッターメニューの表示崩れは、テスト時に発覚しました。本ウェブサイトでは、フッターメニューを使っていないのですが、修正しました。floatをクリアが抜けているのが原因です。

読み込むバックグラウンドイメージをほぼ0に

オリジナルのテーマでは、画面を装飾するために多数のバックグラウンドを読み込んでいます。データ転送量とリクエスト数が増えてしまいます。

データ転送量とリクエスト数を減らすために、以前はCSSスプライトを使って解決していました。

今回は、画面装飾のほとんどすべてをCSSのみで実現しています。次のウェブサイトを参考にさせていただきました。Thank you! ありがとうございます。

CSS指定(色、フォント)の最小化

CSSを使うと画面装飾が簡単にできるのですが、プラグインを追加するたびに、CSSが肥大化します。せめて、テーマで使うCSSは最小化しようと努力しました。

今回作成したテーマだけなら、ルール数は254で、サイズは17kBです。これが、プラグインを入れた状態だと、ルール数が1,405になり、サイズがkBになってしまいます。う〜ん。

フォント指定が悩ましいのですが、次のウェブサイトを参考にさせていただきました。ありがとうございます。

font-family: "Hiragino Kaku Gothic Pro", YuGothic, Arial, Meiryo, sans-serif;

blockquoteでの引用文でも、backgroud画像が使われていました。これも、CSSの修正で画像が不要になりました。次のサイトからリンクされている英語版のサイトの設定を参考にしました。ありがとうございます。Thnak you!

同様のテクニックを使って、会話文にもCSSで文字入れしています。これらのCSSによる文字入れで、音声読み上げにも対応できるようになりました。WindowsはNVDAと言うアプリで、OS XはVoiceOverで確認しました。

ほか、細かいですが、検索用ボタンと外部リンクに絵文字を使っています。次のディスカッションなどを参考にさせていただきました。Thank you!

レスポンシブデザイン

本題です。次のウェブサイトを参考にさせていただきました。ありがとうございます。

画面サイズを決めるのに次のウェブサイトを参考にさせていただきました。ありがとうございます。

デバイスの画面幅(min-width)による切り替えは、次の表の通りです。1024px以上の幅を持つデバイスに対しては、オリジナルのテーマと同じような表示になるようにしています。

デバイス 画面幅(min) 設定内容
全デバイス 無指定 モバイルファースト
iPhone6Plus横 568px 検索窓をずらす
iPad縦 768px 2カラム表示(狭)
iPad横 1024px 2カラム表示(通常)

ページネーションのレスポンシブ対応

テーマ中に服すページを切り替えるためのページネーションを追加しています。このページネーションもレスポンシブに対応させる必要があります。次のウェブサイトを参考にさせていただきました。ありがとうございます。Thank you!

どちらの方法も、画面幅が小さくなったら、ボタンを隠しています。動作として軽いのは前者ですが、CSSの使い方があまり綺麗ではありません。後者の方法はCSSが単純ですがプラグインを3つ使う事になります。

今回は、前者の方法を使いつつ、CSSを最適化しました。ただ、flexboxを使っているので、かなり新しいブラウザじゃないと、表示が崩れます。これは、修正予定です。

ソーシャルボタンのレスポンシブ対応

twitterやFacebookへのリンクのソーシャルボタンは、JetPackの物を使用していました。でも、デザインと軽さを追求して、入れ替える事にしました。当然、レスポンシブ対応にさせます。次のウェブサイトで紹介されていたSharifyを使いました。

Sharifyが対応しているサイトは多くはありません。カスタマイズは色を変更する事しかできません。オリジナルのままだと、投稿にしか表示されず、ページには対応していません。ページに表示したい場合は、次の方法に書かれているように、テーマファイルにショートコードを書いておきます。

私は、この表示のほかに、スタイルシートの読み込み方法も変更したかったので、プラグインを直接書き直してしまいました。カスタマイズをする時の禁断の技です。プラグインが更新されると、元に戻ってしまうからです。書き直す部分は少量なので、まあ良いかなぁと思っています。

ページナビゲーション追加

オリジナルテーマでは、ページナビゲーションにposts_nav_link()が使われていました。これがうまく動いていなかったようなので、the_post_navigation()に変更しました。この変更をするのに、次のウェブページを参考にしています。ありがとうございます。Thank you!

残件

  • flexboxの置き換え(やや古目のブラウザに対応)
  • ページネーションをthe_posts_pagination()に切り替え
  • サーチボックス、外部リンクのCSS変更
  • アクセスカウンタ変更
  • LightBoxをprettyPhotoよりも軽い物に変更
  • その他、CSS修正

まだ、やる事が結構残っているのですが、まずは切り替えを急ぎました。

Posted by お市のかた