ヘッダーの画像内にロゴタイプのアニメーションを表示するということは遊び心の気配りとしても
使えるとは思いますが、いいもの、素敵なものを配置するとサイトのイメージ向上の要因と
なりえることもあるやしれません？
ブログ　サイト　ホームページ等で多く取り入れられているのをお見掛けします。

 

 

ヘッダー画像はそのままで上の重なりにロゴサイズのアニメーションを
重ね表示する....といいましてもスタイルは固定化されていません..

 

ヘッダー画像が無地の場合もあるし....

 

非表示としている例もあれば

 

当サイトの他ページみたく、片隅に置いてる例もありますので(過去のこと現在はノン）

 

掲載方法は人さまざま...

 

大まかな範囲としてヘッダー画像内のどこかに置いてみる...で進めます...

 

今回の手順は、シリウスデフォルト機能で設定するロゴ画像とは
異なり　HTML　CSS指定でのカスタマイズ追加となります..

 

 

お詫びです
当記事は、シリウスの1.5以前バージョン対応です。
1.5でも作動はできますが、再度確認の上詳細は後程追記いたします
お待ちください...

 

 

当サイトのヘッダーでは、左右に二つ配置しておりますが、ご案内の事情で
DEMOの意味合いを含むと理解してください（TP変えたので未掲載)

 

 

二つ配置などしますと、にぎやかすぎてなんか変なサイトと批評される
かもしれませんので通常は一つの配置でよいかと.....

 

 

解説の項目１．２では、トップ　カテゴリー　エントリーページを
対象にしていますが、リンク集ページまで配置するなら同手順です

 

また　トップ　カテゴリー　エントリーページでは3つの異なるアニメーションを
配置できますが、ページ事の個別指定はできません

 

しかし、エントリーページに限り　、ページ事の個別指定は
ＣＳＳを追加すれば可能です....2つめの項目で追加してございます

 

簡単カスタマイズ追加

 

項目３では、すべてのページで個別指定可能とする方法を
新たに追加しております

 

面倒な作業はしたくないという場合は、そちらをご利用ください

 

 

項目1　作業手順

 

ロゴサイズの画像をお持ちの場合は、それをお使いください

 

適合サイズの画像をお持ちでない場合は、サイズ指定でロゴサイズに
変更します

 

ＧＩＦアニメーション画像すら、お持ちでない方は簡単に実践経験しましょう

 

以下のアニメーションをマウスの模擬クリックで画像の保存としてＰＣに
取り込んで、シリウス操作画面で記事欄に呼び出してください....

 

 

 

PCよりシリウス管理画面を経由で読み込んだ画像コード
<img src="<% pageDepth %>img/aifo1.gif" alt="" />

 

 

サイズ指定を追加します
height:150px;width:250px;

 

書き換え記述コード例
<img src="<% pageDepth %>img/aifo1.gif" style="height:150px;width:250px;" alt="" />

 

はい、縮小されました

 

 

次に追加を含んだコードを、HTMLテンプレートに追記するのですが、
HTML指定だけではヘッダー内のレイアウト似タイトルがずれたりと
異常が見られてしまうのでＣＳＳで位置指定をするために

 

id指定を付け加えます

 

指定は任意ですが例として

 

headerrogoとします
div要素を加えて....以下例

 

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

 

 

トップページHTMLテンプレートを開いて以下に到達

 

<!-- ★ヘッダーここから★ -->
<% pageTopic %>
<div id="header">
ここに追加します
<% headerText | tag_insert(a href="<% pageDepth %>") | tag_insert(h2) %>
<% pageDescription %>
</div>
<!-- ★メインコンテンツここから★ -->

 

 

追記後
<!-- ★ヘッダーここから★ -->
<% pageTopic %>
<div id="header">
<div id="headerrogo"><img src="<% pageDepth %>img/aifo1.gif" style="width:250px;height:100px;" alt="" /></div>
<% headerText | tag_insert(a href="<% pageDepth %>") | tag_insert(h2) %>
<% pageDescription %>
</div>
<!-- ★メインコンテンツここから★ -->

 

 

これでトップページの設定は、完了

 

 

カテゴリー　エントリーＨＴＭＬでは以下の箇所

 

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

 

 

ｈＴＭｌは、ここで終了

 

次は、スタイルシートへ移動します

 

以下項目へ到達

 

#header h2 ,#header .title {
width: 550px;
font-size: 36px;
line-height: 36px;
position: relative;　改行してください
left: 30px;　改行してください
top: 50px;
<% pageTitleFontSize %>
<% pageTitlePlace %>
}

 

ヘッダータイトルが長い場合、アニメーションと重なります
タイトルを短くするか　デフォルト機能で文字を小さくするかの手段も
ございますが

 

表示範囲を長くするには以下の数値を変更で対処できます
width: 550px;

 

position: relative;では、レイアウト崩れになるので改行してください

 

left: 30px;では、タイトルが横っ飛びのやはリレイアウト崩れとなりますので
改行してください

 

 

 

以下に書き換え

 

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

 

 

 

追加する記述

 

ｉｄ　headerrogo指定の項目を追加します

 

 

#headerrogo {
width: auto;
position: absolute;
left: 270px;　横位置調整
top: 100px;　上からのスペースサイズ　縦位置の調整
}

 

 

ＣＳＳで調整を支持することで位置調整してください

 

 

 

項目２　エントリーページ個別指定をスタイルの割り込みで設定

 

エントリーページの個別指定をする際は、項目1　のエントリーＨＴＭＬ内の
追加は行わないでください

 

指定してますと、優先されてしまい今回のカスタマイズが反映されないと
なるのです

 

項目1で指定したＣＳＳ指定はそのままで使います

 

スタイルの割り込みで各ページで選択したアニメーションを
自由に選んでして逸しますとページごとに個別表示が可能となります

 

個別ページ設定から
スタイルの割り込み窓を開きましょう

 

headタグ窓へ記載する記述は以下ですが、項目1の記述と違いが見られますね

 

追加...これがないとレイアウト崩れ
<div id="container">

 

</div>を一つ外します...あるとトップになぜか隙間が空くので...
<div id="headerrogo"><img src="<% pageDepth %>img/aifo1.gif" style="width:250px;height:150px;" alt="" />

 

画像コードはページごとに変えてもＯｋ

 

 

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

 

 

 

スタイルの割り込み窓

 

項目1のスタイル―トでしたら　以下記述を貼り付ければ完了

 

 

#header {
height: <% headerHeight %>;
background-image: url(img/header.jpg);
overflow:hidden;
background-repeat: no-repeat;
background-position: left top;
width:100%;
border-bottom:solid 1px #EBEBEB;
}

 

#headerrogo {
width: auto;
position: absolute;
left: 270px;
top: 40px;
display: block;
}

 

 

ページごとですから、ページごとに指定することになりますが
不要なページでは指定しなければよいだけです

 

 

いかがでしたか？

 

ストレートな方法ですが、面倒と感じられた方もおられるでしょうね

 

 

そんな場合は、HTMLテンプレートなど無視した超簡単な設置方法も
ございます

 

ご確認ください

項目3　超簡単な設置方法

 

この指定を行う際は、項目１．２の手順はすべて関与しませんので
ここだけの手順で完了します

 

 

こちらではＨＴＭＬテンプレートへの指定は行いませんが、すべての
ページで異なるアニメーションの指示が可能

 

指示だけはスタイルシートで行いますが、一度書き換えれば終了します

 

 

説明します

 

表示する指定コードは各ページの記事カラム内においてください
画像コードはそれぞれに違いがってもＯＫです

 

画像のファイルコードのみ所有のコードに書き換えてください
img/gifok.gif

 

<div id="headerrogo"><img src="<% pageDepth %>img/gifok.gif" style="width:250px;height:100px;" alt="" /></div>

 

ページ指定はこれだけ

 

 

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

 

---

 

次は原本コードへ到達

 

スタイルシートでは以下項目だけ書き換え　追加行がございます

 

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

 

}

 

原本のままではタイトルが長く折り返す場合、アニメの下に隠れてしまうので
画像上に重なるよう指示を追加しました
z-index: 10;..追加

 

タイトル表示の横範囲を拡張しました
width: 700px;

 

タイトルに横位置指定
サイトによりタイトルが左へずれていた場合　
サイトの横サイズが、90ｐｘなら　320ほどがベストです
left: 300px;

 

 

改行後コード

 

ここから
#header h2 ,#header .title {
width: 700px;
font-size: 36px;
line-height: 36px;
position: absolute;
left: 300px;
top: 50px;
<% pageTitleFontSize %>
<% pageTitlePlace %>
　　　　z-index: 10;
}
ここまで

 

 

 

追加する項目

 

ページに置くＩＤコードをスタイルシート#header以下に
新たに追記します

 

ページごとに画像が異なっても以下で指示されます

 

ここから
#headerrogo {
width: auto;
position: absolute;
left: 320px;
top: 100px;
display: block;
z-index: 1;
}

 

ここまで

 

アニメの横位置はここで指定
left: 320px;

 

高さ位置
top: 100pxはここで指定

 

アニメ画像のわずかなサイズの違いで高さの調整が必要になります

 

プレビュー確認で調整しましょう

 

 

 

長々とご苦労様でした

 

 

これで終わります....

 

気が付くことがありましたら追記します

 

 

 

 

ページトップ
ヘッダーレイアウトにロゴタイプのアニメーションを設置する方法
ＧＩＦアニメ　動く画像をシリウスサイトに設置する方法のご案内
シリウスカスタマイズＴＯＰ