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

 

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

 

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

 

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

 

お詫び
当ページ解説は、従来のテンプレートの解説であり、1.5新バージョンテンプレートでは
未検証です..後ほど追記いたします..

 

 

ステップ1

 

ＨＴＭＬ記載は、設置したいページで指定します

 

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

 

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

 

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

 

 

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

 

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

 

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

 

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

 

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

 

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

 

ページのＨＴＭＬ指定はここで終了

---

 

 

ステップ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.をプラスしてください

 

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

 

 

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

 

 

以上です

 

 

 

ページTOP
すべてのページで異なるＧＩＦアニメーション表示を設定方法
ＧＩＦアニメ　動く画像をシリウスサイトに設置する方法のご案内
シリウスカスタマイズTOP