投稿者「syousuke」のアーカイブ

syousuke について

PCが大好きなんですが、好きなだけで進歩についていけないオヤジです。

レスポンシブ・ウェブデザインに対応したテーマ(TwentyEleven)

WordPress 標準のテーマ 『TwentyEleven』 以降からは、どのスクリーンサイズのデバイス(PC、スマホやタブレットを問わず)でもページデザインを自動で最適化する技術、 『レスポンシブ・ウェブデザイン』 に対応している。

レスポンシブ・ウェブデザイン

レスポンシブ・ウェブデザイン
スマホ(android)での表示

レスポンシブ・ウェブデザインとは、
PC用もモバイル用も、単一の html を使い、ブラウザーの横幅サイズを基準にcss(デザイン)を切り替えて、デバイスごとに表示を最適化するという方法です。

ちなみに、 『雑感日記』  ←このブログは 『TwentyEleven』 を使っているので、PCでもスマホでもレイアウトが少し変わるだけで基本的に同じデザインで表示されます。

ためしに、PCで表示してブラウザーの幅を狭めていくとフレキシブルに表示が最適化され、スマホと同じ表示になるのが分かります。

正直、これは便利です。
デバイスごとに html を分けなくて良いので、ユーザーエージェントごとに、サーバー側で url を振り分ける必要が無いし、単一の html (url)で対応できるのでSEO的にも優位になる。

しかし、デメリットもあります。
スマホでみている時、PCデザインでみてみたいと思ってもブラウザーの幅を広げれないので見ることができない。それに見た目はスマホに最適化されているようでも、画像などのソースはPCと同じものなのでファイルが重い。なのでスマホのDL制限などにかかってしまった場合、表示ができない。できても恐ろしく時間がかかる。などの問題もある。

画像が縦伸びする。

 

それと、TwentyEleven 自体の問題!

PCでは問題なく表示される画像が、スマホでは画像の幅は合わされるが、縦伸びして表示されることがある。

いくら自動で画像幅を合わせてくれても、これでは使い物にならない。
で、調べてみたところ、解決策が見つかりました!

 

 

 

TwentyEleven の画像縦伸び解決法
WordPress 管理画面で
ダッシュボード → 外観 → テーマ編集 → スタイルシート(style.css)

884行目にある /* Images */ の記述に下図のように一行追加する。

/* Images */
.entry-content img,
.comment-content img,
.widget img {
max-width: 97.5%; /* Fluid images for posts, comments, and widgets */
height:auto;   ←この1行を追加する
}

Screenshot_2013-07-06-16-07-38

縦伸びせず正常に表示

 

 

 

 

 

 

これで問題解決!

 

PCとスマホのサイトを振り分ける

サイト構築のために必要な覚書。

PCで見ているサイトと同じurlを指定してスマホからアクセスすると、PCサイトそのまま表示される場合と、スマホ用に最適化されたサイトが表示される場合がある。

スタイルシートへの記述で表示分けする方法もあるが、一般的にはスマホ(モバイル)専用サイトを別に用意して、PCサイトのurlから専用サイトurlにリダイレクトするような仕組みを取ることが多い。もちろん、別サイトとしてアクセス先(url)を分けるだけの場合もある。

自動振り分けの方法としては、ウェブサーバ「Apache」の設定ファイルである「.htaccessファイル」を使って振り分ける。mod_rewriteモジュールを使えば、ユーザエージェント名をチェックして、条件に合致した場合だけに指定したページへ移動(リダイレクト)させることができる。(.htaccessファイルの書き換え、もしくはmod_rewriteモジュールが使用できないサーバーの場合、JavaScriptなどを使う他の方法もある。)

<.htaccessファイル設定の例>
既に.htaccessファイルが存在するディレクトリに設置する場合は、既存の.htaccessファイル内に以下の6行を追記する。

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} (iPhone|Android.*Mobile|Windows.*Phone) [NC]
RewriteCond %{QUERY_STRING} !mode=pc
RewriteRule ^$ /lite/ [R,L]
</IfModule>

仮に、.htaccessファイルを設置した場所が http://blog.livedoor.jp/syousuke0202/ の場合

スマートフォンでアクセス           http://blog.livedoor.jp/syousuke0202/lite/ へ移動。
スマートフォン以外でアクセス    http://blog.livedoor.jp/syousuke0202/ のまま。
スマートフォンでアクセスしても、http://blog.livedoor.jp/syousuke0202/?mode=pc
URLに?mode=pc が追記されていると、そのまま移動しない。

 

追記; 3行目の解説
RewriteCond %{変数名} (一致パターン) [フラグ]

変数名 : アクセス端末のユーザエージェント名
一致パターン : 「iPhone」または「Android + Mobile」または「Windows + Phone」という文字列が存在する場合という条件。Android タブレットの場合、userAgent に Mobile という文字は入らない。ゆえにAndroid タブレットは条件から省いている。
フラグ : 「R」は「リダイレクトする」という意味。「L」は書き換え規則の最終行であることを意味。

MD-5500 印刷可能範囲

Mycro Dry プリンター MD-5500

2010年5月末日をもって販売終了になった愛用のプリンターです。
個人ユースとしてこれに変わるこれ以上のプリンターは未だに無い(と自分は思っている)ので販売が終了したことがとても残念。

ところで、アイロン転写シート(A4)を使用する時、いつも思うことが、大きさめいっぱいの出力するために必要なマージンだ。考えてみれば製品の仕様を見ればわかる事なのに、いつも 『印刷可能範囲』 で検索してしまうのでヒットしない。結局、取説等を隅々までチェックしたあげく、最後に仕様を見て解決。なんとも間抜けな話ながら、こんな事を年に数回繰り返してしまう。そのたびに無駄に数時間棒に振ってしまう。ということで、備忘録の出番。

用紙仕様
用紙幅 98~224mm
用紙長98~594mm
用紙厚0.07~0.23mm

必要マージン
上余白12mm(はがきの場合は3mm)
下余白15mm
左右余白3.4mm以上です。 (※アプリケーションソフトにより異なります)

念のために魚拓
http://megalodon.jp/2013-0610-1827-56/www.alps.co.jp/brand/printer/md5500/shiyou/index.htm