• MENU●●●●
  • シリウス|単独ページでフェード?ループ画像個別設定方法


    シリウスカスタマイズ アコーディオンブラインドメニューシリウスへ取り付け完了 詳細は外部カスタマイズメニューでご覧ください

    スポンサー広告

    関連記事


    個別ページごとにフェードイン画像をループさせる方法

    シリウスに緩やかにフェードインするループ画像を ページごとに種類を
    分けて配置するカスタマイズの方法を解説いたします

     

    フェードインスライドをトップページに設置しているサイトはよく見かけますが

     

    個別ページでもコンテンツにより設置したい場合もありますね

     

    たとえば トップページより 他ページのほうが検索出上位表示されている
    場合など当該コンテンツに力を入れたいもの

     

    そんな時に活用すればいいんじゃないかなと 勝手に判断しています

     

     

    お知らせ
    当ページはシリウスのエントリーページですが 個別に配置が可能なことは
    検証しておりますが、スマートフォンでの閲覧障害が確認できました

     

    PCでは、正常に作動するのですが、スマートフォンでは作動の精度
    スピードが落ちます

     

    また、次の画像が現れるまでの間隔が長く画像が飛ぶ..という現象が
    ございます

     

    現在対応策を模索中ですが、しばらくお時間をいただきたことを
    ご了承願います

     

    臨時の対処法として
    シリウスのiphoneの設定をしているサイトなら

     

    <ppc>

     

    </ppc>
    要素で画像の読み込みコード全体をを囲めば、PCだけで表示され
    スマートフォンでは非表示とすることができます

     

    当サイトご案内のレスポンシブ構造を組み込んでいる際は
    スタイルシート内のmediaコード内に,スマートフォンサイズのデバイスでは
    非表示指定とする display: none;を含めた記述を入れることで分別が
    できます

     

    mediaコード
    @media(max-width:670px){

     

     

    追加行
    #mainImg{
    width: 100%;
    display: none;
    }

     

     

     

    2016 0102


     

     

    作動検証

     




     


     

    シリウスカスタマイズテーマ query1.10.2min.jsプラグイン個別設定

     

     

    最初に設置の流れを解説します

     

    jqueryは1.10.2min.jsを使いますのダウンロードからアップロード

     

    scriptは当サイトの記述をそのままコピーして
    HTMLテンプレートに張り付け

     

    CSS指定コピーしてスタイルシートの一番下でよいので貼り付け

     

    画像コードをコンテンツページの希望の場所に設置

     

    これだけですね

     

     

    複数のページに設置する場合は
    scrip をトップページならトップHTMLに

     

    カテゴリーならカテゴリーHTMLに

     

    エントリーならエントリーHTMLのhead内に入れます

     

     


     

    では参りましょう

     

    jquery-1.10.2.min.js ダウンロード
    http://sourceforge.jp/projects/sfnet_restaurantatlantic/downloads/jquery-1.10.2.min.js/

     

    解答はなしでOK
    ファイル確認後シリウス機能でアップロードしてください
    アップロード作業はこれだけです

     

     

     

     

    head内張り付けscript
    jqueryを呼び出すための記述
    変化スタイルを替えたい場合は数値を書き換えてください

     

     

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
    $(function(){
    var setImg = '#mainImg';
    var fadeSpeed = 1500;
    var switchDelay = 5000;

     

    $(setImg).children('img').css({opacity:'0'});
    $(setImg + ' img:first').stop().animate({opacity:'1',zIndex:'20'},fadeSpeed);

     

    setInterval(function(){
    $(setImg + ' :first-child').animate({opacity:'0'},fadeSpeed).next('img').animate({opacity:'1'},fadeSpeed).end().appendTo(setImg);
    },switchDelay);
    });
    </script>

     

     


     

    スタイルシートを開いてください

     

    以下指定記述を貼り付けてください
    width: 500px
    height: 350px;は画像が小さい場合でも自動縮小にはなりません

     

    サイズの差は 記事との間に隙間をつくってしまします
    画像を配置してみて 隙間があるようでしたら数値を変えてください

     

     

     

    #mainImg {
    margin: 0 auto;
    width: 500px;
    height: 350px;
    text-align: left;
    overflow: hidden;
    position: relative;
    }

     

    #mainImg img {
    top: 0;
    left: 0;
    position: absolute;
    }

     

     


     

    画像配置

     

    設置したいページソースに以下記述を貼り付けてください

     

    画像コードはあなたのものに入れ替えてください

     

    <div id="mainImg">
    <img src="<% pageDepth %>img/1pontey1.jpg" style="width:500px;" alt="" />
    <img src="<% pageDepth %>img/1ponti2.jpg" style="width:500px;" alt="" />
    <img src="<% pageDepth %>img/1ponti3.jpg" style="width:500px;" alt="" />
    <img src="<% pageDepth %>img/1ponyi4.jpg" style="width:500px;" alt="" />
    </div>

     

     

     

    実証後のことですが ページごとに画像サイズを変えてもOK

     

    画像枚数を変えてもOKでした

     

    画像はシリウス機能で配置できます

     

    リンクも同様にシリウスリンク設定でやられてください

     

     

    同じページに二つ配置すると作動しません

     

    一つにしましょう

     


     

    これだけでプレビューで確認いただけます

     

    スポンサーリンク

     

     

     

    シリウス|単独ページでフェード?ループ画像個別設定方法

     

    シリウスヘッダー自動ループ画像設定方法
    シリウスカスタマイズ

    シリウス|単独ページでフェード?ループ画像個別設定方法関連解説
    SIRIUS シリウスサイトにフェードタイプスライド画像設置方法
    コンテンツ内に自動で無限ループ フェードタイプのスライド画像を設置する方法の解説です 当解説なら初めての方でも15分程度で設置完了 scriptjquery1.9.1.min.jsを使用します
    jquery-slideshowでループスライド画像取り付けは大変です
    jquery-slideshowでループスライド画像取り付けしようと努力したのです しかし 取り付けは完了したもののこりゃ駄目だ???
    フェードインヘッダー設置方法
    フェードスタイルのスライド画像を変化させてヘッダー画像に入れてみると おやおやいいサイト構成になるではありませんか? 画像を用意すれば15分で設置完了です

       広告

    .













    お勧め目 抜粋






















































    shop

    特典付き広告..ポチする
    【上位版】次世代型サイト作成システム「SIRIUS」


    シリウスカスタマイズで気を付けること


    サイトにnorton|ノートンの安全評価を付ける


    カスタムに使える情報

    Webデザインで使えるWeb配色ツールまとめサイト