• MENU●●●●
  • シリウスのサイト背景をGIFアニメーション|シネマで表示する方法


    シリウスカスタマイズ アコーディオンブラインドメニューシリウスへ取り付け完了 詳細は外部カスタマイズメニューでご覧ください

    スポンサー広告

    関連記事


    サイト背景全体にGIFアニメ シネマグラフで個別表示する手順と注意事

     

    シリウスサイトのサイト背景にGIF画像ファイルを呼び出す場合.....

     

    シリウスの機能が影響してか?、ファイル容量が大きいためか?

     

    デフォルト機能では画像の横サイズが980px以上であっても980pxの
    制限にとどまりそれ以上拡張されない

     

    背景全体を覆いつくせない 隙間ありの不調レイアウトになってしまいます

     

     

     

    シリウスデのフォルト機能でサイトの全体背景に、GIFアニメ シネマグラフを
    表示するには画像ファイルの容量がPNGなどと異なることで制限が課される
    様ですね

     

    背景にGIF画像を設定するには、通常画像の設定方法と同じ手順で
    サイトオプションから進めればとりあえずの表示は確認いただけます

     

    しかし 小さな容量の画像であれば表示は可能ですが、あくまで制限ある
    画像サイズでの表示となっています

     

     

     

    一つの画像で背景を覆い隠せない...が難点

     

    小さなデザイン模様であればリピートすれば何とか整列できるかな....?

     

    リピートすると以下画像が縦横に整列するのですね

     

    以上は設定すればすべてのページで同じ反映が確認されます

     

     

    と...ここまでは過去のシリウスデフォルト機能の範囲で設定した際のお話し

     

     

    現在は 外部実装をすることによりすべてのページで障害無く配置可能です

     

     

    レベルアップへ進みましょう

     

    ここからカスタマイズ編

     

     

    デフォルト機能では上記事情がございますけど

     

    それではね~ いまいちのデザインですので

     

    今回は

     

    すべてのページで 異なるGIFアニメ シネマグラフで個別表示するです...

     

    が、多くを配置するとサーバーに負担がかかるかもしれません

     

     

    スタイルは

     

    すべて同じでもいいんです...かまいません

     

    反映は トップページのみとか

     

    コンテンツに合わせたページでのみとか

     

    数種類のページで背景を個別に異なる表示とか

     

    組み合わせは自己判断で指定可能です

     

     

    取り寄せた,保存済みの画像の全体サイズを主同調整不要
    自動で拡大されます...
    が...拡大された際、画質が低いとあらが見えます

     

    できる限りは良質の画像が良いですね

     

    立幅があり横幅の狭い画像の場合 両サイドの画質が悪くなります

     

    横長ですと 当サイトみたい...desuka

     

    当サイトはエントリーページですが、背景をご確認ください
    元サイズは横500PXですが自動拡張されてます

     

     

    サイト背景を画像で設定する場合は記事台紙の後ろに表示されるので
    台紙が邪魔になりますがスタイルシートで非表示にすれば
    背景全体が画像となります

     

    すべてで表示しなくとも 記事のみの白背景で進めたいページもある
    というなら サイトオプションで背景を白で指定しておいてください

     

    今回の指定方法はすべてのページで個別指定するので 
    通常構成も必要ならそのページでは読み込み表示をしないだけの事デス

     

     

    あなたのサイトはどんなスタイルか?...知ることができないのが難点?

     

    なのである程度は自己判断で応用してください

     


     

    一つのGIf画像を指定表示する手順

     

    最初に、シリウスデフォルトでサイトオプションより背景画像を
    設定している場合は今回の指定ページが優先されます

     

    サイトオプションで、デフォルト 表示しないと設定しておいても
    無視して表示されます

     

     

     

    HTMLテンプレートでも指定はできるのですが 全体で同じ背景に
    適応してしまうので

     

    指定は表示したいページの記事ランの一番上か最下部に
    複数選択も可

     

     

    class要素を配置します

     

    以下記述を読み込ませたい どこかのページに任意の文字を書き換え
    張り付けてください

     

    <div class="任意の文字"></div>

     

    記載例...このままでも使えます
    <div class="backgroundgif"></div>

     

    ページ指定はここまで

     

    次はスタイルシートで追記します


     

    スタイルシートを開きます

     

    任意の文字を記述の頭に指定します
    上記例を使う場合は 記載の変更はしません

     

    以下の記載を任意の文字に書き換える
    .backgroundgi

     

    以下記述のコードをスタイルシートの一番下でよいので貼り付けて

     

    読み込ませたいGIF画像のコードを書き換えてください

     

    background: url(画像コード);

     

    書き換え例
    background: url(img/gifoi.gif);

     

     

    ここから
    .backgroundgif {

     

    width:auto;
    height: 100%;
    z-index: -19;
    background: url(img/gifoi.gif); 画像コード
    background-repeat: no-repeat;
    background-position: center center;
    position: fixed;
    overflow:hidden;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size:cover;
    }
    ここまで

     

     

    GIF画像は パソコンにあるファイルを一度シリウスで読み込んで
    画像管理画面に保存して そのコードを使います

     

     

    スタイルシートで指定された画像が ページに配置した読み込みで
    表示されますが 複数ページに指定しておけばどこにでも同じ画像が
    表示されるのです

     

    以下の読み込みコードを配置すればどのページでも読み込まれます
    <div class="任意の文字"></div>

     

     


     

    異なる画像をページごとに指定する

     

    複数の画像をページごとに個別に表示する場合は

     

    異なる任意の文字を指定のページに張り付け

     

    <div class="任意の文字"></div>

     

     

     

    スタイルシートにもう一つ 指定コードを追加します

     

    一部ではなく上記コード全体をもう一つ追加するということです

     

    指定の任意の文字が変わるので別コードとして認識されますので
    誤動はありません

     

     

    任意の文字と合わせるため書き換え

     

     

    ここ書き換え
    .backgroundgif {

     

    width:auto;
    height: 100%;
    z-index: -19;
    background: url(img/gifoi.gif); 画像コードも書き換え
    background-repeat: no-repeat;
    background-position: center center;
    position: fixed;
    overflow:hidden;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size:cover;
    }
    ここまで


     

    別な画像を 別なページで読み込ませる場合 異なる指定を
    スタイルシートに追加すれば良いだけです

     

     

    記事のみに専念する通常のページは 読み込み記述を
    ページ内に配置しなけば サイトオプションで設定された背景が
    表示されます

     

     

    スマートフォン対応のアイフォン設定をしている場合では追記作業は
    ございませんが

     

    当サイトご案内のレスポンシブ構造を取り入れている場合

     

    media記述内に上記コードを追加してください

     

    mediaコード
    @media screen and (min-width: 769px) and (max-width: 2499px) {

     


     

    簡単にシネマグラフを作成する

     

    GIF画像でシネマグラフのようにきれいに作りたいという場合

     

    ユーチューブ動画より シネマのコンテンツを流用するとか

     

    自分で作成した動画より 簡単にシネマグラフを作成するサービスがございます

     

    巻末の関連記事で以下のメニューをご確認ください
    YouTube動画やMP4からGIF画像を作成する方法のご案内

     

     

     

     


     

     

    トップページ
    シリウスのサイト背景を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画像ファイルの構造を失うことなく抽出から保存までの手順をご案内します

       広告

    .













    お勧め目 抜粋






















































    shop

    特典付き広告..ポチする
    【上位版】次世代型サイト作成システム「SIRIUS」


    シリウスカスタマイズで気を付けること


    サイトにnorton|ノートンの安全評価を付ける


    カスタムに使える情報

    Webデザインで使えるWeb配色ツールまとめサイト