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

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

関連記事

画像を上下中央に配置

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

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

wordpressテーマ

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

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

vegas動画と画像

画像と動画を混合させて表示VEGAS

動画も一緒に表示させる方法   動かしてみた方法は以下の通りです。   1.先に動画を表示して、次に画像を表示する方法   jQuery(document).ready( …

フォトギャラリー

WordPressでフォトギャラリーを作るのに3つのプラグインを入れてみた

  プラグインを使って簡単にフォトギャラリー   WordPressの固定ページ、投稿ページ、カスタム投稿ページに写真を並べて掲載するフォトギャラリーページは、プラグインを使って簡 …

cmsとは

CMSとは

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