レスポンシブ対応 をサポートするプラグイン
•
2 likes•837 views
様々なデバイスに対応できる条件分岐タグや class を追加してくれるプラグイン『mobble』をご紹介します。 WordPressもくもく勉強会@日本橋 #04（2017.04.15）で発表したスライドです
Recommended
More Related Content
What's hot
What's hot (20)
Similar to レスポンシブ対応 をサポートするプラグイン
Similar to レスポンシブ対応 をサポートするプラグイン (20)
レスポンシブ対応 をサポートするプラグイン
- 2. 川路 正樹（かわじ まさき） ●株式会社トリックスタジオ ●デザイナー／アートディレクター ＜経歴＞ ・建築設計 3年 ・個人事務所や制作会社でDTP・印刷物 ・ジョブダイレクトなどでWEBデザイン ・現在に至る 自己紹介
- 4. どんなプラグイン？ ※ 劇的に何かを変化させたりするプラグインではありません。 • あると便利なデバイス毎の条件分岐タグを追加します。 • <body>にデバイス毎の class を追加します。
- 5. １・条件分岐タグの追加
- 6. 追加される条件分岐タグの例 //スマホやタブレット is_handheld(); // スマホ (iPhone, Android, など) is_mobile(); // タブレット is_tablet(); // iPhone, iPad, iPod is_ios();
- 7. 追加される条件分岐タグの例 モバイルには不要なソースコードを出力させない、 PCとモバイルで読み込む画像を切り替える、など 詳細なテーマ設計が可能になります。 <?php if ( ! is_mobile() ) { get_sidebar(); } ?>
- 8. 条件分岐タグの使用例 <?php if ( ! is_mobile() ) { get_sidebar(); } ?> スマホではサイドバーを読み込まない
- 9. ２・class の追加
- 11. <body> に追加されるclass例 //デスクトップの場合 <body class=“desktop chrome"> // iPhone6 の場合 <body class="handheld mobile ios iphone safari"> // iPad の場合 <body class="handheld ios tablet ipad safari"> // Nexus6P の場合 <body class="handheld mobile android chrome">
- 12. <body> に追加されるclass例 MedeiaQuery @media screen and (max-width: ○○px) だけではなく、より具体的な対象に向けて、 CSSを指定することができるようになります。