好奇心

直感・閃き・気になる事探究を楽しむ

SIRIUSカスタマイズ ヘッダー画像をスライドショーアニメーションにしたい

SIRIUSサイトのヘッダー画像部分にアニメーションするスライドヘッダーを導入してみる
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に特典として追加しときました( ゚∀゚)ノ

LEAVE A REPLY

*
*
* (公開されません)

Return Top