Web全般 wordpress

スマホとPCの条件分岐でVEGASを切り替える方法

投稿日:

vegasスマホとPC

 

スマホと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



-Web全般, wordpress
-, , ,


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

wordpressテーマ

WordPress無料有料【LIQUID PRESS】子テーマを作ろう

  プロが選ぶWordPressテーマテンプレート【LIQUID PRESS】   レスポンシブWordPressテーマ 「LIQUID PRESS」 累計2千DL突破! 日本語対 …

google api

Google Maps APIキー取得方法

Google Maps APIキー取得方法 Google Maps APIを取得する前に、Googleのアカウントを取得してください。 こちらから取得します → https://developers. …

オンマウス

マウスオーバーでリンク画像に変化をつける

  自分がしたことを忘れないように記事にしました。 やりたかったのは、マウスオーバー・オンマウスでリンク画像がだんだん大きくなり、上にのせていたマスクがなくなって画像がクリアになること。 い …

Google FontがEdgeで表示されない

Google FontsがEdgeで表示されない場合

  <link>で読み込んだのにEdgeで正しく表示されない   <link href=”https://fonts.googleapis.com/css2?fa …

Google Doc Embedder

WordPressでPDFを埋め込むプラグイン

  Google Doc Embedder   WordPressの記事内や固定ページ内で、PDFのファイルを利用したい、またはダウンロードできるようにしたい時に使うプラグインです …