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

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

関連記事

パソコン

パソコン買うなら

  以前、パソコンを購入するときは近くの電気屋さんに行っていましたが、のちにDELLのオンラインショップで購入するようになりました。 最近では、オリジナルのパソコンを取り扱っているオンライン …

cmsとは

CMSとは

  CMSとは、コンテンツマネジメントシステム(content management system)の略で、簡単にいうと、ソフトの管理画面からテキストや画像などをHTMLが詳しくない方でも、 …

カスタムメニュー

WordPress(ワードプレス)でメニューを分ける

    メニューを追加してみる   WordPress管理メニューにある【外観】→【メニュー】に進むとそれぞれのメニューを登録することができますが、今回はあえてメニューを …

div

divを重ねて上下中央

divとdivを重ねてしかも上下中央にしたい!     例えば、指定したサイズに背景画像を配置して、その上にメニューやタイトル、キャッチコピーなどを表示したい。 もちろん、画像ファ …

画像を上下中央に配置

指定した範囲内に画像を上下中央に配置

  divなどで指定した部分に、画像を配置 上下中央にする方法は他にもありますが、 今回は、『position』を使ってみます。   html <div class=&quo …