当ブログでは賢威というwordpressテーマを使用しています。SEO的に素晴らしい作りなのですが、タブレットで閲覧した場合に画面の端が画面からはみ出してしまいます。先月のリニューアルの際にタブレットはPCと同じように見えるようにしました。今回はwordpressの話です。賢威テーマなどタブレットには最適化されていないテーマのユーザーならやっといて損はないかと思います。Wordle非レスポンシブだとタブレットが自動で縮小してくれるiPadなどのタブレット端末でレスポンシブウェブデザインではないPC専用のサイトを見た場合、iPadが適切なサイズで表示してくれます。神奈川県のホームページは基本的に横幅が1152pxあります。iPadの縦にしたときの横幅は768pxですが、それに合わせて縮小してくれます。viewportの記述が無い場合は(iPadでは?)width=980pxと認識します。私がロードバイクのメンテナンスやホイールを自組みした際によく見たこのサイトはviewportの記述はありませんが、iPadでは縦横どちらもジャストフィットします。サイトが閉鎖されてました)はみ出るレスポンシブウェブデザインところが、タブレットのサイズに対応していないレスポンシブウェブデザインの場合は実寸のまま表示されてしまいます。リニューアル以前の当ブログをiPadで見ると上記のように端が切れていました。iPadの横幅は768pxで旧ブログの横幅は980pxだったので、212pxは画面の外です。横スクロールが発生してしまうパターンです。ユーザービリティ的にも良くないです。当ブログも一時はレスポンシブでタブレットにも対応させておりました。メンテナンスが面倒だったので、最終的にはデフォルトの賢威と同様にPCとスマートフォンにだけ対応させてました。それでしばらく運営していたのですが、先月のリニューアルではPCと全く同じように表示するために下記のことをしました。タブレットでもPCと同じデザインを表示させる方法デザインと言うと大げさですが、要はタブレットはPCの単純縮小で表示させるという方法です。仕組み概要PC・タブレットからのアクセスにはviewportをwidth=◯◯◯、スマートフォンからのアクセスにはwidth=width=device-widthを返します。mobileは、タブレットもスマートフォンと同じ扱いです。これだと今回の目的は果たせませんので、「スマートフォンとそれ以外」という切り分け方をwordpressのテーマファイルのfunction.phpに追記します。WordPressのスマホ対応に使える!!PCとの表示振り分け関数・プラグイン追記するのは上記ページの【タブレット・PC」と「スマホ・ガラケー」とを区別する「is_mymobile関数」を自作して利用】の「//iphoneまたはipodで閲覧されているか〜」から始まるコードです。(どのテーマファイルでもそうだと思いますが)賢威の場合は、function.phpの最後の「?>」の直前にコピペすれば問題なく動作します。2.header.phpにスマートフォンとそれ以外を切り分けるコードを追加するheader.phpのhead内に以下の記述をします。既存のviewport記述は削除してください。?>このブログの場合、横幅は1000pxで余白を少し設けたかったので1024pxにしましたが、widthは適宜調整してください。タブレット(iPad)での見え方このように端まで表示されるようになりました。家電量販店でiPadminiでの見え方を確認しましたが、問題ないサイズでした。Androidのタブレットでは確認したことがありませんので少し心配です。問題点がありましたらぜひ教えて下さい。ちなみに、スマートフォンでは下記のようにレスポンシブで表示されます。この方法を実装したのがリニューアルの最後の方だったので、当ブログではいろいろと無駄なcssが読み込まれてます。この辺りを整理すれば現状より若干軽くなるはずですがリソースの都合で放置してます。仕事に集中するためのホストのいじり方グアムのドコモパシフィックのプリペイドSIMカードを使ってみました【画面ハミ出し対策】レスポンシブでタブレットとPCは同じデザインにする方法ブログをリニューアルしました。ERR_EMPTY_RESPONSEの原因はCloudFlareとESETの相性。豪華客船クイーン・エリザベスが横浜大桟橋に初入港。(7)ABOUTmiz2403.comはテーマを絞らない雑記ブログです。ブログを開始した頃はWebマーケティングやホームページ制作の話が多かったのですが、いつのまにかデジモノやネットウォッチ、横浜の事や音楽などについても書くようになりました。詳細や書いている人についてはmiz2403.comについてをご覧ください。miz2403.com。