スマホと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でフォトギャラリーを作るのに３つのプラグインを入れてみた
プラグインを使って簡単にフォトギャラリー WordPressの固定ページ、投稿ページ、カスタム投稿ページに写真を並べて掲載するフォトギャラリーページは、プラグインを使って簡 …
-
-
Browser Shots WordPressのプラグインを利用して、簡単にリンク先のホームページの情報・画像を取得してサムネイルのように表示ができます。 & …
-
-
PCとスマホで画像の見え方を変えるのに役立つのが、 cssの「object-fit」プロパティです。 背景画像として扱うcssの「background-size」というのもありますが、 …
-
-
ズバリ言うと、 始めたからといって、すぐに結果が出るわけがなく、常に更新していくなど、日々の努力と継続が必要になります。 1.売れそうな商品を取り扱っているか？ 2.サイト …
-
-
cssだけで簡単にメニューなどのリストに動きを付けます。 今回は、右から現れてくるように作ってみました。 さっそくですが、以下にサンプルがありますので、興味がある方はコピペして使ってくだ …
