SIRIUSサイトのヘッダー画像部分にアニメーションするスライドヘッダーを導入してみる

SIRIUSを利用している方の中にはトップページのヘッダー画像を
アニメーションするスライドヘッダーにしたいという方も多いですが・・
やってみると意外と導入がうまくいかない・・(；´∀｀)ﾜｶﾙ

• テンプレートのどこに設置すればいいかわからない
• テンプレートに設置してみたけど動かない
• 設置したのにレイアウトが崩れて変になっている

と悩んで相談されてくる方もいます
通常のアフィリエイト目的のサイトであれば
ヘッダーのスライドショーは特に必要ない要素ですが
中小企業や自営業の公式ホームページとなると
あるとないとではやっぱり「インパクト」が違います
大手企業の公式サイトなどでも様々な表現や
ユーザービリティを考えて取り入れてますね
という訳で、できれば導入したい・・
という方もいたようなので実際に導入してみました

SIRIUSでヘッダーをスライドアニメーションとして導入

• 切り替え時間を細かく調整できる自動スライド
• スライドやフェード以外の数パターンの切り替えアニメーション
• 簡単に説明文やリンクを入れられるキャプション

「そうそう！これをやりたかったのよ！」
と実行しようとしてもなかなかどうして・・
「実現できなかった理由」がちゃんとあります

SIRIUSでヘッダースライドがうまく導入できない2つの理由

サンプルのソースがHTML5形式で書かれている

スライドショーと検索すると、多種多様なプログラムが見つかりますが
その多くは専門の技術者が備忘録として残す「サンプル」
そして、何よりも「HTML5で動作する形式」で記述されているため
そのままSIRIUSに導入してもうまく動作しないケース

サンプルの定義がSIRIUSのCSS定義と喧嘩している

元々出来上がったプログラムをベースに動作が保障されています
そして、プログラムの中でも指定したCSS定義を読み込む仕様のため
シリウスのテンプレート内のCSSと同じIDやClassを利用してる場合
レイアウト崩れやアニメーションしなくなるケースも多数

ID＝そのページ内でひとつしか指定できない

ちなみにIDはCSS内から呼び出す場合もあれば
.jsファイル内など動作プログラムから呼び出すケースもあるため
「重複利用を見つける」のは大変な作業(；´Д｀)

使う環境（テンプレートのCSS）に左右される

サンプル形式の技術者が提供しているデモサイトって
外部リンクになってて真っ白のまっさらなHTMLソースが多いですよね？
それは、プログラムと喧嘩するIDやCLASS定義を避けるためです
余談ですが・・ワードプレスでプラグインの相性が悪い
というのも、これと似たような考え方ですね

プラグイン同士の相性による不具合
これをSIRIUSというCSSのルールが決まった場所で再現するためには
そのスライドショーの動作を妨げているIDやClassを見つける作業
そして、代替のIDやClassに変更する作業・・
さらにはSIRIUSの独自タグが自動的に出力する
IDやClassうんぬんの重複を回避する作業も・・
Σ(ﾟдﾟlll)頭痛ぇ・・そら時間かかるわ・・
単純にこれをこうすればいいんだよ( ﾟ∀ﾟ)ﾉ
という設置方法を説明するだけでは「無責任」
実はヘッダースライドを導入するにあたって
メリットばかりではありません
何をどう変えればどのようなメリットがあり
それをそう変えた場合に起きる可能性があるデメリットとは！？
そのデメリットを極力なくすために「この作業がある！」
ちゃんと教育しないと、使った先で
問題が起きたぞ！どうしてくれる！！(# ﾟДﾟ)ﾌﾟﾝｽｶ
ってなってこっちもサポートに時間を割く事になっちゃいますからね
それこそ、技術対応なんてはスカイプでやったら・・
レスポンスには早さよりも『質』スカイプサポート・リモートサポートの危険性
自己責任！を盾に突き放すなら
「自己」で「事故」に「対応」できるようにまずは「教育」
そこまでしっかりと導入法を動画でサポートした上で
SIRIUSレベルアップセミナーレベル3に特典として追加しときました( ﾟ∀ﾟ)ﾉ