サイトマップ
ヘッダー画像をループ変化する画像へ変化させてみましょう
シリウスヘッダースライドカスタマイズテーマ 自動ループ設定
今回の解説は デフォルト ビジネステンプレートともに応用可能です
自動ループ表現はスライドの変化内の種類ですが
横移動するスライドショー的表現方法とはイメージが異なります
今回のループ画像は 指定した時間間隔で 画像がす～っと
フィルター化して画像が薄くなり 次の画像へと切り替わります
ヘッダー画像にスライドでは作動が落ち着かないなんて方でも
ループ表現なら 気持ちよく画像が切り替わりますので
受け入れられるかも！
では
あれこれと前解説など省略して勧めましょう
作動は画像でご案内します
通常画像
す～っと薄くなりまして 次に切り替わるのです
数秒刻みに設定できますので好みの変化に設定できます
導入手順を解説しますが 最初にご注意ごとをご覧ください
ヘッダータイトルが表示されなくなります
タイトルを表したい場合は ループ用の画像にタイトルを入れてください
縦サイズ説明
今回のループ取り付けは 今貴方の現在運営しているサイトでも簡単に
設定できますが いま設定してあるヘッダー画像の縦サイズが
基本サイズなり ループ用画像の縦サイズ数値が大きくとも
基本サイズ内に余剰部分は削除されて入れ込まれます
今ある画像は下地画像とお考えください
ループ切り替わりのフィルター化する際 瞬間的にした画像が垣間見えます
下地画像が見えるのがお気に召さない方は 下自画像を単色などで
作り替えてください
今ある画像の上にループ画像は重なって表示されるので
フィルター化する 薄くなるので下地画像が認識できるのです
用意するもの
ループ用の画像
４つでも ５つでもｏｋ
横サイズはサイト幅に合わせたもの
多少余剰があってもｏｋ
縦サイズは 今ある画像数値より 小さめのものはｎｇ
縦画寸足らずですと 隙間が見えてしまいます
多少１ｐｘ程おおきめでもｏｋ
ループ作動に必要な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
サーバーにファイルアップロードは 今でも後でもどちらでもｏｋ
トップページで作動させる場合はトップのＨＴＭＬテンプレートに
scriptおよび画像記述を配置します
トップのＨＴＭＬのみにscriptを配置した場合 カテゴリー エントリーでは
呼び出し記載がないため変化はありません
他でも作動させたい場合は カテゴリー エントリーＨＴＭＬにも配置が
必要です
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>
画像の指定呼び出しの設定
ループ画像を複数記述します
以下記述は３つの画像コードが記載してありますが
それらを あなたの選んだ画像コードに入れ替えてください
画像項目は増やしても構いません
<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>
記述配置場所はＨＴＭＬテンプレートです
以下赤印です
画像コードはシリウス機能で選択指定するだけで
なんら改編の必要は御座いません
id= がsiriusとなっておりますが改行可能です
改行の際はscriptにも一行同じid記述がございますので
呼び出しと同じに改行してください
ここまでで作業は終了です
1.5.2/jquery.min.jsファイルをシリウス機能でアップロードすれば
プレビューでも作動がご覧いただけるはずです
スポンサーリンク
ふんわりと緩やかに画像が切り替わる自動でループするフェードタイプのスライドは、魅惑的な画像をそろえるとサイトイメージを向上させますシリウスのサイトコンテンツに合わせて画像を用意しましょうか？とは言いつつもこんなイメージです 画像ないんで同じ画像が二つも？？すみませんjquery-1.9.1.min.jsプラグイン採用の自動フェード ループスライド自動ループするスライド画像はいかがですか？ですが大変...
２０１４ ０９０７jquery-slideshowでループするフェードスライド画像を取り付けようと四苦八苦！簡単に取り付けできるだろうと安易に考えていたのですがいや～ こんなもん扱うと マジいやになりますなんとかループ形態のスライド画像は取り付けはできました......が どうにもね～ 貴方が偶然にもhttp://jonraasch.com/blog/a-simple-jquery-slides...
シリウスに緩やかにフェードインするループ画像を ページごとに種類を分けて配置するカスタマイズの方法を解説いたしますフェードインスライドをトップページに設置しているサイトはよく見かけますが個別ページでもコンテンツにより設置したい場合もありますねたとえば トップページより 他ページのほうが検索出上位表示されている場合など当該コンテンツに力を入れたいものそんな時に活用すればいいんじゃないかなと 勝手に判...
ヘッダー画像を複数の画像でフェードインする方法の解説ですフェードという表現を使っていますがループ画像 スライド画像ともに 同じようなスタイルで配布者によって言い方が異なりますしかし どこが違うのかいまだにわかりません？今回はフェードインスタイルで進めますが当サイトではscriptが多く取り付けてあるもので動きません他サイトで検証はしておりますのでご安心を！今回の解説はお隣ページのフェード画像をヘッ...