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


    シリウスカスタマイズ 記事一覧を記事中段へ移動して情報を解り易く明示しましょう グーグル検索で好評かを得られるかも?

    スポンサー広告

    当該サイトコンテンツ関連記事

    ヘッダー画像をループ変化する画像へ変化させてみましょう

    シリウスヘッダースライドカスタマイズテーマ 自動ループ設定

     

    今回の解説は デフォルト ビジネステンプレートともに応用可能です

     

    自動ループ表現はスライドの変化内の種類ですが
    横移動するスライドショー的表現方法とはイメージが異なります

     

     

    今回のループ画像は 指定した時間間隔で 画像がす~っと
    フィルター化して画像が薄くなり 次の画像へと切り替わります

     

    ヘッダー画像にスライドでは作動が落ち着かないなんて方でも

     

    ループ表現なら 気持ちよく画像が切り替わりますので

     

    受け入れられるかも!

     

    では
    あれこれと前解説など省略して勧めましょう

     


     

    作動は画像でご案内します

     

    通常画像

     

    す~っと薄くなりまして 次に切り替わるのです

     

    数秒刻みに設定できますので好みの変化に設定できます

     

     


     

    導入手順を解説しますが 最初にご注意ごとをご覧ください

     

     

    ヘッダータイトルが表示されなくなります
    タイトルを表したい場合は ループ用の画像にタイトルを入れてください

     

     

    縦サイズ説明

     

    今回のループ取り付けは 今貴方の現在運営しているサイトでも簡単に
    設定できますが いま設定してあるヘッダー画像の縦サイズが 
    基本サイズなり ループ用画像の縦サイズ数値が大きくとも
    基本サイズ内に余剰部分は削除されて入れ込まれます

     

     

    今ある画像は下地画像とお考えください

     

    ループ切り替わりのフィルター化する際 瞬間的にした画像が垣間見えます
    下地画像が見えるのがお気に召さない方は 下自画像を単色などで
    作り替えてください

     

    今ある画像の上にループ画像は重なって表示されるので
    フィルター化する 薄くなるので下地画像が認識できるのです

     

     


     

     

    用意するもの
    ループ用の画像
    4つでも 5つでもok

     

    横サイズはサイト幅に合わせたもの
    多少余剰があってもok

     

    縦サイズは 今ある画像数値より 小さめのものはng

     

    縦画寸足らずですと 隙間が見えてしまいます

     

    多少1px程おおきめでもok

     

     


     

    ループ作動に必要なscriptをダウンロードします

     

    1.5.2/jquery.min.js

     

    こちらでダウンロード
    http://blog.jquery.com/2011/03/31/jquery-152-released/

     

    ダウンロードは以下のファイルです
    https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js

     

    サーバーにファイルアップロードは 今でも後でもどちらでもok

     

     


     

    トップページで作動させる場合はトップのHTMLテンプレートに
    scriptおよび画像記述を配置します

     

    トップのHTMLのみにscriptを配置した場合 カテゴリー エントリーでは
    呼び出し記載がないため変化はありません
    他でも作動させたい場合は カテゴリー エントリーHTMLにも配置が
    必要です

     

     

    htmlテンプレートを開いててください

     

    以下の赤印箇所にscriptを貼り付けてください

     

    var fadeSpeed = 1400;スピードの変化指定
    var switchDelay = 6000;間隔指定
    数値を変えて変化をご確認ください

     

     

    コピーしてお使いください

     

     

     

     

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
    <script type="text/javascript">
    $(function(){
    var setImg = '#sirius';
    var fadeSpeed = 1400;
    var switchDelay = 6000;

     

    $(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>

     

     

     

     

    画像の指定呼び出しの設定

     

    ループ画像を複数記述します

     

    以下記述は3つの画像コードが記載してありますが
    それらを あなたの選んだ画像コードに入れ替えてください
    画像項目は増やしても構いません

     

    <div id="sirius">
    <img src="<% pageDepth %>img/1aaaanet.png" alt="" />
    <img src="<% pageDepth %>img/1aainet000.png" alt="" />
    <img src="<% pageDepth %>img/1aakennniiiii.png" alt="" />
    </div>

     

    記述配置場所はHTMLテンプレートです

     

    以下赤印です

     

     

    画像コードはシリウス機能で選択指定するだけで 
    なんら改編の必要は御座いません

     

    id= がsiriusとなっておりますが改行可能です
    改行の際はscriptにも一行同じid記述がございますので
    呼び出しと同じに改行してください

     

     

    ここまでで作業は終了です

     

     

    1.5.2/jquery.min.jsファイルをシリウス機能でアップロードすれば

     

    プレビューでも作動がご覧いただけるはずです


     

    スポンサーリンク

     

     

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

    SIRIUS シリウスサイトにフェードタイプスライド画像設置方法

    ふんわりと緩やかに画像が切り替わる自動でループするフェードタイプのスライドは、魅惑的な画像をそろえるとサイトイメージを向上させますシリウスのサイトコンテンツに合わせて画像を用意しましょうか?とは言いつつもこんなイメージです 画像ないんで同じ画像が二つも??すみませんjquery-1.9.1.min....

    ≫続きを読む

     

    jquery-slideshowでループスライド画像取り付けは大変です

    2014 0907jquery-slideshowでループするフェードスライド画像を取り付けようと四苦八苦!簡単に取り付けできるだろうと安易に考えていたのですがいや~ こんなもん扱うと マジいやになりますなんとかループ形態のスライド画像は取り付けはできました......が  どうにもね~ 貴方が偶然...

    ≫続きを読む

     

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

    シリウスに緩やかにフェードインするループ画像を ページごとに種類を分けて配置するカスタマイズの方法を解説いたしますフェードインスライドをトップページに設置しているサイトはよく見かけますが個別ページでもコンテンツにより設置したい場合もありますねたとえば トップページより 他ページのほうが検索出上位表示...

    ≫続きを読む

     

    フェードインヘッダー設置方法

    ヘッダー画像を複数の画像でフェードインする方法の解説ですフェードという表現を使っていますがループ画像 スライド画像ともに 同じようなスタイルで配布者によって言い方が異なりますしかし どこが違うのかいまだにわかりません?今回はフェードインスタイルで進めますが当サイトではscriptが多く取り付けてある...

    ≫続きを読む

     

     

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

       広告

    .













    お勧め目 抜粋






















































    shop

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


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


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


    カスタムに使える情報

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