TOP

トップページ背景のみ対応のGIFシネマグラフ設定手順

海外サイトによく見られる...いや時々でしょうか?
サイト構成にトップページのみ画面全体にGIF画像..シネマグラフを組み込んでいる例が
見られます。

 

検索エンジンか何かで初めて訪れた際のサイトイメージは大事ですね..

 

ま、コンテンツが一番大事なのは重々承知はしておりますけど...?
一瞬で読者を虜にしてしまう...?....表現が大げさすぎ...

 

でも、多くのサイトを運営するなら一つぐらいやってみる価値があるのでは?
と理解しております...です。

 

 

シリウスで実行する場合は、一カラムであれば面倒が少なくやりやすいのですが、
サイトをご案内するサイドメニューの配置要素を考えますと...

 

トップページだけ1カラムとか

 

2カラムの場合でなら、トップページだけ1カラムにするとか

 

2カラムのまま行くなら、記事台紙の非表示とか...

 

サイドメニュー背景の非表示とかの各種レイアウトの可変を行うしかないようですが
...自己努力でお願いします..

 

今後、カスタマイズに関しては追記してまいりますが今回はこの程度でご勘弁くださいね...

 

では、まいりましょうか...

 

トップページ背景のみGIFシネマグラフを設定する手順

 

ちなみに当サイトは、記事台紙,,レイアウト枠を横拡大している..
そしてヘッダー画像...実は背景画像をヘッダーみたいに見せている...諸事情で解説する
カスタマイズが反映しません..

 

上で垣間見えるヘッダーもどきがサイト全体にとご理解ください...

 

従来からのテンプレートでは、記事台紙を削除しなければ両サイドのみ反映..
有料テンプレートでも同じく両サイドのみ...

 

...新1.5テンプレートでは正常反映を確認しております..

 

 

トップページとのタイトルでしたね..
ま、とりあえず言ってますが、各ページで個々に反映も可能です..

 

確認のためのDEMOコードとあなたのサイトに貼り付けるコピーコード二つを用意しましたので
記事内のどこかに?張り付けてみてください...
活用ください..

 

DEMOコード
こちらは当サーバーから呼び込まれます..
<img style="z-index: -1;min-width: 1024px;position: fixed;top:0;left:0;" width="100%" height="100%" src="https://www.affiliateno1.com/img/cointreau-table-980.gif";>

 

 

コピーコード以下..自身のサイトに貼り付けた際は、PC内のGIF画像をシリウスに読み込んでから
img/cointreau-table-980.gifの画像コードを張り替えてください
<img style="z-index: -1;min-width: 1024px;position: fixed;top:0;left:0;" width="100%" height="100%" src="img/cointreau-table-980.gif";>

 

 

簡単すぎますか?

 

でも、記事台紙を非表示にしていないとサイトの両脇だけしか見えませんね

 

 

今回のカスタマイズはページ解説を応用しております..
シリウスサイト背景にユーチューブ動画をCSSのみで設定する方法

 

 

追伸

 

トップページの背景を設定することは、シリウスデフォルト機能の
画像の拡張に障害が発生し設定ではできませんでした...

 

外部から何かしら追加すればできるということが確認されております..

 

当サイトはエントリーページですが、解説のカスタマイズでは表示は
不能なので別な方法で表示しております...

 

 

 

 

シリウスのトップページ背景をGIFシネマで全体表示する設定方法
GIFアニメ 動く画像をシリウスサイトに設置する方法のご案内
シリウスカスタマイズTOP

シリウスのトップページ背景をGIFシネマで全体表示する設定方法関連解説
YouTube動画やMP4からGIF画像を作成する方法のご案内
シリウスサイト内にGIFアニメファイル 動く画像をyoutube動画やMP4から簡単に設置するカスタマイズ方法ご案内です
シリウスサイトへ3D GIFアニメーション画像を設置してみよう
シリウスサイト内に3D GIFファイルのアニメーション画像を設置.❔.3次元として脳が理解する立体化 スタイルとは?詳細カスタマイズのご案内です
一部分だけを動かすGIF画像加工シネマグラフ参考まとめ
一部分だけを動かす加工を施し魅力的なスタイルを表現するGIF画像シネマグラフをご覧いただき製作の手本として参照ください シリウスに洗練されたシネマグラフをカスタマイズしてナイスなサイトへ....
GIF画像の編集が思うように進まれない方へ|ずるっこカスタマイズ
シリウス内にGIF画像を自主制作して設置しようとしても思うようにことが進まれない方は 多少ずるっこですがいいカスタマイズ手法がございます 思考を変えてみましょう
シリウスヘッダーをGIFアニメーション画像に切り替える設置方法
シリウスサイトのヘッダーをGIFアニメーション画像に切り替えて表示するには 通常設定ではなくスタイルシートで指定することで対応が可能です
ヘッダーフレーム内にGIF画像を自動で、リサイズ調整する手順
シリウスサイトのトップヘッダーフレーム枠内に、正常にGIf画像のサイズが適合される自動リサイズ調整、および正常な動きを反映させるための工程をご案内いたします
すべてのページヘッダーで異なるGIFアニメーション表示を設定方法
シリウスサイトでは、すべてのページヘッダーで異なるGIFアニメーションの適合表示は、デフォルト指定ではできませんが、CSSに指示を加えれば簡単にできます
ヘッダーレイアウトにロゴタイプのアニメーションを設置する方法
シリウスサイトのヘッダーレイアウトにイメージ向上か?お遊び心か?目的は様々な要素で使えるロゴタイプサイズの動くアニメーションを設置する方法のご案内です
シリウスのサイト背景をGIFアニメーション|シネマで表示する方法
シリウスのサイト背景をすべてのページでワイドサイズのGIFアニメーション、シネマグラフで個別設定する方法のご案内です、よりハイレベルなデザインカスタマイズへお進みください
シリウス機能でGIF画像ファイルのリサイズが反映される保存方法
シリウスのデフォルト機能?、かと思われますがGIF画像ファイルの構造を失うことなく抽出から保存までの手順をご案内します
GIF画像がいつしか非表示になっている?プレビューでの勘違い
当サイトの解説で掲載したはずのGIF画像が、気が付いてみると非表示になっていた?回復措置...