シリウスサイトのトップページのヘッダーに、機能外指示によりGIｆアニメーション画像を
正常作動するよう設置する...

 

また、どんな大小サイズの画像でもHTML記載によりフレーム内に自動で合わせ
調整される指定を説明いたします..

 

その前にヘッダーで、GIｆアニメーション画像を表示すると言っても通常操作手順では
なくHTMLテンプレートに記述追加で指定することになるのですが、操作画面で
通常設定されたヘッダー画像についての説明がございます...

 

 

操作画面で設定されたヘッダー画像の縦サイズが、ほかの下層ページ
およびトップページで指定されているわけですね

 

大小のランダムな画像でもすべてのフレーム内である程度サイズは
変化するものの

 

縦サイズがデフォルトの250PXですとかなり圧迫されたイメージに
なるかもしれません

 

できれば、３００PX以上が望ましいかと....

 

当ページは、250PXほどですが

 

デフォルトサイズは以下ですが　拡張されるといささか....苦しいかな？

 

 

良いスタイルをお考え下さい

 

 

MTMLでの指定

 

反映されるスタイルは、ＴＭＬテンプレートでの指定ですので、

 

トップページで指定すればトップのみ　

 

カテゴリーで指定すればカテゴリーページはすべて統一
エントリーページでも同様です

 

 

初めにGIF画像をシリウス記事欄に読み込んでください

 

<img src="<% pageDepth %>img/dans.gif" alt="" />

 

記述が確認されましたら　自動調整されるサイズの指定を追加します
width　heightともにPX指定では制限アリなので　制限なし記号％で
支持します...と枠内いっぱいに自動で拡張される...デス

 

追加記載を確認
<img src="<% pageDepth %>img/dans.gif" style="width:100%;height:100%;" alt="" />

 

トップHTMLの原本記載ですが、ここ　に追加します

 

<!-- ★ヘッダーここから★ -->
<% pageTopic %>
<div id="header">
ここです
<% headerText | tag_insert(a href="<% pageDepth %>") | tag_insert(h2) %>
<% pageDescription %>
</div>
<!-- ★ヘッダーここまで★ -->

 

 

 

追加後
<!-- ★ヘッダーここから★ -->
<% pageTopic %>
<div id="header">
<img src="<% pageDepth %>img/aifo1.gif" style="width:100%;height:100%;" alt="" />
<% headerText | tag_insert(a href="<% pageDepth %>") | tag_insert(h2) %>
<% pageDescription %>
</div>
<!-- ★ヘッダーここまで★ -->

 

保存を選択してください

 

 

カテゴリー　エントリーHTMＬでは多少記述に違いがありますね

 

原本
<!-- ★ヘッダーここから★ -->
<% pageTopic %>
<div id="header"<% pageHeaderImage %>ここが違う>
<% headerText | tag_insert(a href="<% pageDepth %>") | tag_insert(h2) %>
<% pageDescription %>
</div>
<!-- ★ヘッダーここまで★ -->

 

しかし、同様に書き換えてください

 

画像コードを書き換えなければトップと同じとなりますので
異なる画像を置く際は画像コードのみ書き換えです

 

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

 

書き換え完了後、保存を選択して...

 

ここでプレビュー確認しますと作動する画像は適合表示されてはいるが
ヘッダータイトルが表示されていない...という確認がされると思います

 

GIF画像は、今あなたのサイトで設定してあるヘッダー画像の上に重なり
表示されるので何ら支持を付け加えることはありませんが....

 

html指定だけではヘッダータイトルがどこかへ押しやられ表示されないのです

 

ですので、スタイルシートで表示されるよう指定します

 

 

スタイルシートの以下項目へ到達

 

原本の　position: relative;を絶対ここ動かん指定　
position: absolute;に書き換え

 

もう一つ　left: 30px;指定を
left: 30０px;に書き換え

 

 

 

原本
#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: 550px;
font-size: 36px;
line-height: 36px;
　　　　position: absolute;
left: 300px;
top: 50px;
<% pageTitleFontSize %>
<% pageTitlePlace %>
}
ここまで

 

で...表示は正常に確認できるはずです

 

 

GIF画像のリサイズカスタマイズでした

 

今後も気が付いたことがあれば追記いたします

 

 

ページTOP
ヘッダーフレーム内にGIF画像を自動で、リサイズ調整する手順
ＧＩＦアニメ　動く画像をシリウスサイトに設置する方法のご案内
シリウスカスタマイズTOP