TOP

すべてのページヘッダーでGIFアニメーションを自由に選択指定する設置手順

シリウスのすべてのページでヘッダーに、GIF画像を異なる個別指定で
設置する手立てはあるもののいまいちの機能で精度不足

 

今回は、シリウスサイトヘッダーに、トップからエントリーページまで
すべて異なるGIFアニメを選択し取り付ける方法をご案内します

 

でも、すべてのページでGIFアニメーションとしてのヘッダーを表示させる
必要性もないと思われるので、設置したいページで好みに合わせて
ご利用ください

 

デフォルトでも設定はできるのですが全体設定で配置すると
動きませんし、カテゴリー エントリーではフレーム枠に、入り切れずか
画像上部しか表示されないとか、ございますがそれらにかかわらずの
設定方法となります

 

 

ステップ1

 

HTML記載は、設置したいページで指定します

 

div要素で idコードを作成します

 

さらに、ヘッダーの表示枠サイズ内に自動調整される%指定をします
width:100%;height:100%

 

headergif は、スタイルシートで作動の指示をするもので
名称は任意です

 

 

<div id="headergif">画像コード</div>

 

シリウス画像コードでの記載例...画像コードだけ入れ替えればOK

 

<div id="headergif"><img src="<% pageDepth %>img/aifo1.gif" style="width:100%;height:100%;" alt="" /></div>

 

記述を設置したいページの記事カラムの一番上に張り付けます

 

複数のページで同一画像を表示する場合は、ページごとに張り付けます

 

異なる画像を表示する場合は、画像コードだけを入れ替えてください

 

ページのHTML指定はここで終了


 

 

ステップ2

 

スタイルシートへ進みます

 

以下の項目に、重なりを支持する
z-index: 1000;を追加します

 

#header h2 ,#header .title {
width: 550px;
font-size: 36px;
line-height: 36px;
position: relative;
left: 30px;
top: 50px;
<% pageTitleFontSize %>
<% pageTitlePlace %>
}

 

書き換え後

 

#header h2 ,#header .title {
width: 700px;
font-size: 36px;
line-height: 36px;
position: relative;
left: 20px;
top: 50px;
<% pageTitleFontSize %>
<% pageTitlePlace %>
z-index: 1000;
}

 

 

スタイルシート内に新しく追加する記述
ページに置く画像を正常に反映させる指定

 

headergif 名で作成

 

ここから
#headergif {
height: <% headerHeight %>;
width: 900px;
position: absolute;
left: 269px;
top:0px;
display: block;
z-index: 1;
}
ここまで

 

記述は記号一つの記載ミスでも不作動か、ずれが発生します
コピーして張り付け後、改行してください

 

 

headergif カスタマイズ
検証はデフォルト3カラム、2カラムで行いましたが、事情により
ずれとかがあるかもしれません

 

その際は以下で調整してください

 

 

width: 900px; サイト幅に合わせる
サイト幅に合わせて書き換えるのですが、 900px;以上のサイズの場合
同数値ですとサイドに1px.の隙間が見られますので、1px.をプラスしてください

 

サイト幅が、980pxなら981pxとします

 

 

left: 269px; 画像の位置ずれ
画像が左寄りでしたら、数値書き換えで調整

 

 

以上です

 

 

 

ページTOP
すべてのページで異なる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アニメーション、シネマグラフで個別設定する方法のご案内です、よりハイレベルなデザインカスタマイズへお進みください
シリウスのトップページ背景をGIFシネマで全体表示する設定方法
シリウスのトップページ専用で背景をGIF画像シネマグラフで全体表示する簡単な設定方法のご案内です、下層には対応いたしませんが海外サイトのような構築が可能です
シリウス機能でGIF画像ファイルのリサイズが反映される保存方法
シリウスのデフォルト機能?、かと思われますがGIF画像ファイルの構造を失うことなく抽出から保存までの手順をご案内します