質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.50%

  • WordPress

    7392questions

    WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

  • CSS

    5967questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

スライドの切り替わりでOpacityが自動で変わる場合の制御の方法

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 954

kaaa

score 38

こんにちは。Wordpressのテーマを購入しカスタマイズをしているのですが、
仕組みと、実際の対象方法がわからない事があり質問させていただきました。
低レベルな質問かもしれませんが、ご教示いただけますと幸いです。

現在こちらのテーマをベースにカスタマイズをしております。
http://tcd-wp.net/tcd028/

以下のテーマTOP部分のスライドは、現在3枚切り替わるようになっております。
テーマTOP

この切り替わりのタイミングで

slider heightasviewport has-background

というclassのopacityが0から1へと自動的に変わっているように思います。

これは、なにで制御しているのでしょうか?

また、こちらのOpacityの変化を止めたい場合は、どのようにするのが適切でしょうか?

悩んだ末に、解決できず質問させていただきました。
よろしくお願いいたします。

該当PHP

<?php /* Template Name: Welcome Screen */ ?>

<?php
$options = get_desing_plus_option();
get_header(); ?>

<div id="site-cover"></div>

<section>

  <div class="slider heightasviewport has-background" data-order='0' data-parallax="scroll" data-image-src="<?php echo $options['slider_image1']; ?>"></div>

  <div id="topcover" class="topcover heightasviewport">
    <div class="text-center verticalcentersplash amore-welcome-center">
      <?php if($options['first_auto_br']): ?>
      <h1 class="first-h1"><?php echo nl2br($options['h1_text']); ?></h1>
      <?php else: ?>
      <h1 class="first-h1"><?php echo $options['h1_text']; ?></h1>
      <?php endif; ?>
    </div>
  </div>

  <div class="topcover heightasviewport" style="opacity:1;-ms-transform:translate(0px,0px);-webkit-transform:translate(0px,0px);transform:translate(0px,0px);"></div>

<div id="top" class="heightasviewport" style="opacity:1; background:transparent">
  <a href="#third" class="animate"><div class="down-arrow bounce"><span class="fa fa-angle-down"></span></div></a>
</div>

</section>


<section>
  <div class="amore-divider romaji" data-parallax="scroll" data-image-src="<?php echo $options['bg_image2']; ?>">
    <div class="container">
      <div class="row">
        <div class="col-xs-120 no-padding">
          <h1 class="invisibletexteffect animate offsetted top-headline third_headline"><?php echo $options['third_headline'];?></h1>
        </div>
      </div>
    </div>
  </div>

  <div id="third" class="container">
    <div class="row">
      <div class="col-xs-120 no-padding">
        <div class="row amore-section">
          <?php for($i=1; $i<=3; $i++): ?>
            <?php if ($options['third_banner_image'.$i]): ?>
          <div class="col-sm-40 text-center">
            <div style="background-image:url(<?php echo $options['third_banner_image'.$i]; ?>); width:70%" class="img-circle square-80 heightaswidth mb20 circle-banner">
              <a class="no-decoration" href="<?php echo $options['third_banner_url'.$i]; ?>"<?php if($options['third_banner_target'.$i]){echo ' target="_blank"';}; ?>><div class="cover text-center">
                <h3 class="verticalcenter"><?php echo $options['third_banner_headline'.$i]; ?></h3>
              </div></a>
            </div>
            <h4 class="text-center third-banner-headline mb20"><?php echo $options['third_banner_headline'.$i]; ?></h4>
            <p class="text-justify third-banner-body"><?php echo $options['third_banner_copy'.$i]; ?></p>
            <div class="button romaji"><a href="<?php echo $options['third_banner_url'.$i]; ?>"<?php if($options['third_banner_target'.$i]){echo ' target="_blank"';}; ?>>READ MORE</a></div>
            <div class="visible-xs"><br/><br/></div>
          </div>
            <?php endif; ?>
          <?php endfor; ?>
        </div>
      </div>
    </div>
  </div>
</section>

<section>
  <div class="amore-divider romaji" data-parallax="scroll" data-image-src="<?php echo $options['bg_image4']; ?>">
    <div class="container">
      <div class="row">
        <div class="col-xs-120 no-padding">
          <h1 class="invisibletexteffect animate offsetted top-headline fifth_headline"><?php echo $options['fifth_headline'];?></h1>
        </div>
      </div>
    </div>
  </div>

  <div id="fifth" class="container">
    <div class="row">
      <div class="col-xs-120 no-padding">

            <div class="row amore-section">
              <?php for ($i=1; $i <=3 ; $i++): ?>
                <?php if($options['fifth_banner_image'.$i]): ?>
              <div class="col-sm-38 <?php if($i > 1) echo "col-sm-offset-3"; ?>">

                <a href="<?php echo $options['fifth_banner_url'.$i]; ?>"<?php if($options['fifth_banner_target'.$i]){echo ' target="_blank"';}; ?>>
                  <div class="square-80 mb20 fifth-banner-image square-banner">
                    <div class="square-banner-label text-center"><?php echo $options['fifth_banner_headline'.$i]; ?></div>
                    <div class="has-background square-banner-image" style="background-image:url(<?php echo $options['fifth_banner_image'.$i]; ?>)"></div>
                  </div>
                </a>

                <h4 class="text-justify fifth-banner-headline mb20"><?php echo $options['fifth_banner_headline'.$i]; ?></h4>
                <p class="fifth-banner-copy mb20"><?php echo $options['fifth_banner_copy'.$i]; ?></p>
                <div class="button romaji"><a href="<?php echo $options['fifth_banner_url'.$i]; ?>"<?php if($options['fifth_banner_target'.$i]){echo ' target="_blank"';}; ?>>READ MORE</a></div>
                <div class="visible-xs"><br/><br/></div>
              </div>
                <?php endif; ?>
              <?php endfor; ?>
            </div>

      </div>
    </div>
  </div>
</section>

<section>
  <div id="sixth" class="has-background" style="background-image:url(<?php echo $options['bg_image5']; ?>)">
    <div class="container" style="overflow-x:hidden">
      <div class="row amore-section">

        <div class="col-xs-120 no-padding-mobile">
          <div class="row map-wrap-dark">

            <div class="<?php if($options['show_map']){ echo "col-sm-60"; } else { echo "col-sm-120"; } ?> no-left-padding no-padding-mobile" style="line-height:30px;">
              <?php if($options['sixth_auto_br']): ?>
                <?php echo nl2br($options['sixth_text']); ?>
              <?php else: ?>
                <?php echo $options['sixth_text']; ?>
              <?php endif; ?>
            </div>

            <?php if($options['show_map']) : ?>
              <div class="visible-xs"><br/><br/></div>
              <div class="col-sm-60 no-right-padding no-padding-mobile">
                <div id="map-canvas" style="width:100%; height:480px; border:4px solid white; border-radius:2px;"></div>
              </div>
            <?php endif; ?>

          </div>
        </div>

      </div>
    </div>
  </div>
</section>

</div>

<?php /* get_sidebar(); */ ?>
<?php get_footer(); ?>


ディベロッパーツールでは

<div class="slider heightasviewport has-background" data-order='0' data-parallax="scroll" data-image-src="<?php echo $options['slider_image1']; ?>"></div>


<div class="slider heightasviewport has-background" style="display: block; height: 364px; opacity: 0.11308;" data-order='0' data-parallax="scroll" data-image-src="<?php echo $options['slider_image1']; ?>"></div>

のような形で

display: block; height: 364px; opacity: 0.11308;display: block; height: 364px; opacity: 0.11308;
のopacityが追加されます。

JSの該当ファイルがわかっておりません。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2016/04/24 17:59

    画像の切り替え自体を止めるのでしょうか。切り替え時のフェードを止めるのでしょうか。

    キャンセル

  • kaaa

    2016/04/24 18:02

    1番最初はフェードの切り替えを止める方法を考えておりましたが 画像の切り替えを停止する形でも 切り替え時のフェードを止める形でも大丈夫です。

    キャンセル

回答 3

checkベストアンサー

0

これは、なにで制御しているのでしょうか? 

テーマに書かれているJavaScriptで制御されています。
fadeIn fadeOut とかをテーマ内検索したらその近辺に辿り着くとは思います。


抜粋(微整形)。

var currentSlide = -1;
var nextSlide = function() {
    currentSlide++;
    if ( jQuery( "[data-order='" + currentSlide + "']" ).length == 0 ) { currentSlide = 0 };
    jQuery( '.slider, .parallax-mirror[data-order]' ).fadeOut( "slow" );
    jQuery( "[data-order='" + currentSlide + "']" ).fadeIn( "slow" );
}
jQuery( '.slider, .parallax-mirror[data-order]' ).hide();
nextSlide();
setInterval( nextSlide, 3000 );


追記:

画像の切り替えを停止する形でも 切り替え時のフェードを止める形でも大丈夫です。

出力されるHTMLの構造が提示されている部分のみなので(全体像がわからないので)、効果が出るか自信がありませんが、スライダーが設置されている前に下記HTMLを挿入してみてください。

<style>
section > div.slider.heightasviewport.has-background {
    opacity: 1 !important;
    display: block !important;
}
</style>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/04/24 00:11

    ご回答ありがとうございます。
    回答をいただいてから、JSファイルでfadeIn、Outを探しましたが、どれもコメントアウトしても止める事ができませんでした。

    実際のファイルをみないとわからない事なのかもしれませんが、該当ファイルはどれかなどわかったりするのでしょうか?

    jscript.jsというファイルか
    jquery.flexslider-min.jsかとは思っているのですが・・・

    なかなか辿りつけずすみません。

    キャンセル

  • 2016/04/24 00:34

    サンプルサイトとHTMLやJSの構成が違うとなると、なんとも判断ができません。

    キャンセル

  • 2016/04/24 02:13

    お手数おかけしてしまっていて、すみません。
    サンプルサイトとの構成は同じなのですが、知識不足により該当のjsファイルがどれなのかがわかっておりません。。。
    該当ファイルの見つけ方などはあるのでしょうか?地道に探していくしかないのでしょうか・・・(探しても探してもたどり着けず・・)本当に申し訳ないです。

    キャンセル

  • 2016/04/24 02:29

    とりあえずサンプルサイトには jquery.flexslider-min.js はありません。これを外すだけでも止まりはすると思うのですが、試されましたか?また、jquery.flexslider-min.js は $('.flexslider').flexslider(); に "似た" 形で実行されます。

    探し方はHTMLやCSSの知識、JavaScriptの知識などがある程度無いと難しいと思います。有料テーマでしたら、初期サポート(および有償サポート)くらいはあるのではないでしょうか。

    キャンセル

  • 2016/04/24 18:10

    追記しました。フェードを止める方向で考えてみたので、試してみてください。

    キャンセル

  • 2016/04/24 22:02

    ありがとうございます。<div class="slider heightasviewport has-background" の前と<section>の前も試してみたのですが、変わらないようでした。。。該当PHP全文の掲載させていただきました。

    キャンセル

  • 2016/04/24 22:27

    > 該当PHP全文
    出力されたHTMLと関係する全てのCSS/JS、つまり動いている状態のサイトを見ないことにはわかりません。実際複数画像を登録している記述もこの状態ではわかりません。

    「 data-image-src="<?php echo $options['slider_image1']; ?>"」ここでスライダーのイメージを呼んでいる可能性がありますので、そこを削除されるくらいしか、回答できません。

    キャンセル

  • 2016/04/26 23:29

    お世話になっております。
    こちら、ご丁寧に相談にのっていただきありがとうございました。
    また、いつも迅速な対応をいただきありがとうございました。

    該当記述部分ですが、まさかのfooterにありました。
    こちらコメントアウトし、無事解決する事ができました。

    お手数おかけいたしました。
    ご協力ありがとうございました。

    キャンセル

  • 2016/04/27 00:33

    解決されたようでよかったです。お疲れ様でした!

    キャンセル

0

ちなみにjQueryのソースはソース最下部らへんで指定してあるようです!

    jQuery("#site-cover").fadeOut('slow');

    var cat = null
    var currentSlide = -1

    var fixStuff = function(){
      jQuery(".heightaswidth").each(function(){
        jQuery(this).css('height', jQuery(this).outerWidth())
      })

      jQuery('.heightasviewport').css('height', jQuery(window).height())

      jQuery(".verticalcenter").each(function(){
        var center = (jQuery(this).parent().width() / 2) - parseInt(jQuery(this).parent().css('padding-top'))
        //var size = jQuery(this).outerHeight() / 2
        var size = 13;
        jQuery(this).css('padding-top', center - size + 20)
      })

      jQuery(".verticalcentersplash").each(function(){
        var center = jQuery(window).height() / 2
        var size = jQuery(this).outerHeight() / 2
        jQuery(this).css('padding-top', center - size)
      })
    }

    var nextSlide = function(){
      currentSlide++

      if(jQuery("[data-order='" + currentSlide + "']").length == 0) currentSlide = 0

      jQuery('.slider, .parallax-mirror[data-order]').fadeOut("slow");
      jQuery("[data-order='" + currentSlide + "']").fadeIn("slow");
      console.log(currentSlide, jQuery(".slider, [data-order='" + currentSlide + "']"))
    }

    jQuery('.slider, .parallax-mirror[data-order]').hide()

    fixStuff();
    nextSlide();

     setInterval(nextSlide, 3000);

     setInterval(function(){
      jQuery(".fade-me-in").first().fadeIn().removeClass('fade-me-in');
     }, 200)

     jQuery(window).resize(function() {
      fixStuff();
     });

の当たりだと思います。

以上です!

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/04/25 00:38

    すいませんコメントするとこ間違えました…、間違えついでに「.fadeIn("slow")」を「.css('display','block')」「.fadeOut("slow");」を「.css('display','none')」じゃだめですか?

    ファイルは外部ファイル化されていないので、header.php 又はfooter.php もしくは includeで読み込んでいるかのいずれかになります。

    Templateを見てみれば恐らくコードがどこかにあると思われます。

    キャンセル

  • 2016/04/25 00:40

    fade-me-in が曲者そうですね。

    キャンセル

  • 2016/04/25 00:41

    間違えてすみませんでした、では失礼いたします。

    キャンセル

-2

FIREFOXの開発ツールで確認して見てはどうでしょうか?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/04/24 02:24

    firebugとかファイルと行表示されたような気がします。

    テーマ制作者に聞いても良いですよね。

    キャンセル

  • 2016/04/24 02:29

    キャッシュ残ってる場合も有りそうですが…。

    キャンセル

  • 2016/04/24 02:42

    その場で書き換えて結果表示されるので便利ですよ、修正頼まれてやったら修正早すぎてビビってましたからね!!

    プロのワザです!!

    キャンセル

  • 2016/04/24 17:50

    FIRE FOXの開発ツールは使った事がありませんでした。
    早速使ってみました。使えこなせていませんが便利ですね!
    引き続き該当JSファイルを探してみます。
    ありがとうございます

    キャンセル

  • 2016/04/25 00:11

    パララックスの場合結構全体のバランスとか絡まってる場合多いのでアニメーション帰ると他のが機能しなくなるなんて事もあり得ますし、制作者の方に聞くのが一番だと思います。

    見てみたら二か所ぐらいソース動いてましたから…。

    お力になれず申し訳ございません。

    キャンセル

  • 2016/04/26 23:28

    こちら、ご丁寧に相談にのっていただきありがとうございました。
    最終的に、footer部分に記述がありました。

    お手間をおかけいたしました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.50%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • WordPress

    7392questions

    WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

  • CSS

    5967questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。