アフィリエイトツールで生活満足

ガジェット、ドローン、ゲーム、ライフハック、ツールビジネス

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に特典として追加しときました( ゚∀゚)ノ

初見さんへ!他のカテゴリも見てね!

たぬきち
このブログがどんなブログか?トップページに戻ってみてください。個人的に気になるゲーム情報、PCガジェットレビュー、ライフハック情報、ラジコンホビー動画、旅行に料理、ビジネスに役立つソフトウェアの解説など、一言では語りきれない情報満載です

上部メニューから詳細なカテゴリを選択できます。ブログ更新、最新動画のアップはツイッターと連携してる他、たまに中の人がつぶやくのでフォローお願いします(笑)

LEAVE A REPLY

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

Return Top
trigger trigger