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

 

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

 

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

 

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

 

 

 

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

 

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

 

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

 

 

 

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

 

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

 

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

 

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

 

 

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

 

 

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

 

 

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

 

 

ここからカスタマイズ編

 

 

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

 

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

 

今回は

 

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

 

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

 

 

スタイルは

 

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

 

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

 

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

 

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

 

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

 

 

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

 

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

 

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

 

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

 

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

 

 

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

 

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

 

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

 

 

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

 

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

 

---

 

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

 

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

 

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

 

 

 

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アニメーション｜シネマで表示する方法
ＧＩＦアニメ　動く画像をシリウスサイトに設置する方法のご案内
シリウスカスタマイズTOP