スマホとPCの条件分岐でVEGASを切り替える方法
投稿日：
スマホとPCの条件分岐でVEGASを切り替える方法
表示したいところに以下を記述します。
<div class="img-movie">
<?php
if ( is_front_page() && !is_mobile() ) {
echo '<div class="top-img"></div>';
} elseif ( is_front_page() && is_mobile() ) {
echo '<div class="top-img-mo"></div>';
} else {
// それ以外
}
</div>
上記の簡単な説明ですが、
今回は、【header.php】に記述しました。
<div class="img-movie">
<!-- このクラス名は自由です -->
<?php
if ( is_front_page() && !is_mobile() ) { //front_pageでpcなら
echo '<div class="top-img"></div>'; //.top-imgを読み込む
} elseif ( is_front_page() && is_mobile() ) { //front_pageでスマホなら
echo '<div class="top-img-mo"></div>'; //.top-img-moのbackground指定で画像を読み込む
} else {
// それ以外
}
</div>
echo '<div class="top-img-mo"></div>';
は、
echo '<div><img src="○○○△△△"></div>';
でもOK!
これは、PCなら「VEGAS」を動かし、スマホでは静止画を見せるというやり方です。
まとめ
今回は、「VEGAS」を使ってみましたが、他にも似たようなプラグインがたくさんあります。
jQuery系のプラグインも大事ですが、使用する画像や動画のファイルサイズに気をつけてサイト作りをしたいですね。
前回の記事はこちら→画像と動画を混合させて表示VEGAS
関連記事
-
-
WordPress無料有料【LIQUID PRESS】子テーマを作ろう
プロが選ぶWordPressテーマテンプレート【LIQUID PRESS】 レスポンシブWordPressテーマ 「LIQUID PRESS」 累計2千DL突破！ 日本語対 …
-
-
Google Maps APIキー取得方法 Google Maps APIを取得する前に、Googleのアカウントを取得してください。 こちらから取得します → https://developers. …
-
-
自分がしたことを忘れないように記事にしました。 やりたかったのは、マウスオーバー・オンマウスでリンク画像がだんだん大きくなり、上にのせていたマスクがなくなって画像がクリアになること。 い …
-
-
<link>で読み込んだのにEdgeで正しく表示されない <link href=”https://fonts.googleapis.com/css2?fa …
-
-
Google Doc Embedder WordPressの記事内や固定ページ内で、PDFのファイルを利用したい、またはダウンロードできるようにしたい時に使うプラグインです …
