Queriesを使ったWebサイト例いろいろ昨日に続いて今日もスマートフォンとWordPressに関する記事。Queriesを使ったテーマのご紹介。Queriesは、ユーザーの環境に応じて特定のスタイルシートを適用させる方法で、例えば、大きいディスプレイ向けのcss、モバイルにはモバイル向けのcssを指定させる方法です。Queriesを使うことで、iPhoneやiPadに最適化されたcssを、iPhoneやiPadでアクセスした際に適応させることが可能です。厳密に違うのかも知れませんけど、条件分岐みたいなもんです。#fff;が適応されます。}}別のcssファイルで管理したい場合は以下のように記述。/>これを使って、iPhoneでアクセスした時だけに適応させるcssを書くことで、cssのみでiPhoneに最適化されたレイアウトを構築できます。}}iPhoneは320×480なので、480px以下の場合に上記cssが適応されます。iPadにも対応させるなら以下のように上限と下限を指定します。QueriesはIE8に対応していませんので必要な場合はjs等(例えばMediaQueriesに対応させるjQueryプラグイン)を使用します。Queriesが使われているテーマで、基本的には何もせずともiPhone等で閲覧した時に見やすいようにレイアウトが調整されています。Testerを使用しています。[/note]Whiteboard以前もご紹介した、どのデバイスでも黄金比を保つフレームワーク。Frameworkを使用しています。Queriesを加えたものです。TenYOKOなかなか完成度の高いテーマ。管理画面で背景色変更やトップ絵の差し替えなども可能です。Themeこちらも以前ご紹介したフレームワーク。これは使いやすかった。ThemeRenovaクリーンなデザインのテーマ。iPhone用とタブレット用のcssが作られています。ダウンロードのリンクはフッターにありますよ。RenovaiTheme2カルーセルも付いたテーマ。iTheme2Ariミニマルなテーマで、フレームワークとしても良さそう。Queriesは書かれていますが、全体的に中身は空なので自分で最初から作りたい方向けとなります。Queriesを導入しているWebサイトやブログが色々と紹介されています。表示チェック等してみるのもいいですね。Queriesを使って様々なデバイスに最適化済みのWPテーマのまとめでした。全てのテーマの動作やファイル内を細かくチェックしたわけではありませんので、もしかしたらiPhoneには対応していてiPadにはしてない的な事もあるかもしれませんが、その辺はご自身でチェックお願いします。Pa...TipsWordPressを使ったWebサイトにSEO施行する際に役立つっぽいカスタマイズハック久々にSEOの記事。カスタマイズハック記事があるのですが、...WordPressWordPressのカテゴリーを開閉可能なツリー型にするWP-dTreeが上手く動かない時の代替法ちょっと嵌ったので個人的なメモ。ありましたのでご紹介。"http://kachibito.net/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shCore.js-end");/*]]>*/タイトルとURLをコピーしました。