ヘッダーレイアウトにロゴタイプのアニメーションを設置する方法

TOP

ヘッダー画像の上の重なりにロゴタイプアニメーションを配置する手順

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

 

 

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

 

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

 

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

 

当サイトの他ページみたく、片隅に置いてる例もありますので

 

掲載方法は人さまざま

 

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

 

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

 

 

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

 

 

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

 

 

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

 

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

 

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

 

簡単カスタマイズ追加

 

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

 

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

 

 

項目1 作業手順

 

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

 

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

 

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

 

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

 

 

 

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指定だけではヘッダー内のレイアウト似タイトルがずれたりと
異常が見られてしまうのでCSSで位置指定をするために

 

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>
<!-- ★メインコンテンツここから★ -->

 

 

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

 

 

カテゴリー エントリーHTMLでは以下の箇所

 

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

 

 

hTMlは、ここで終了

 

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

 

以下項目へ到達

 

#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 %>
}

 

 

 

追加する記述

 

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

 

 

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

 

 

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

 

 

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

 

<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 超簡単な設置方法

 

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

 

 

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

 

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

 

 

説明します

 

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

 

画像のファイルコードのみ所有のコードに書き換えてください
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;

 

タイトルに横位置指定
サイトによりタイトルが左へずれていた場合 
サイトの横サイズが、90pxなら 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;
}
ここまで

 

 

 

追加する項目

 

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

 

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

 

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

 

ここまで

 

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

 

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

 

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

 

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

 

 

 

長々とご苦労様でした

 

 

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

 

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

 

 

 

 

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

ヘッダーレイアウトにロゴタイプのアニメーションを設置する方法関連解説
YouTube動画やMP4からGIF画像を作成する方法のご案内
シリウスサイト内にGIFアニメファイル 動く画像をyoutube動画やMP4から簡単に設置するカスタマイズ方法ご案内です
シリウスサイトへ3D GIFアニメーション画像を設置してみよう
シリウスサイト内に3D GIFファイルのアニメーション画像を設置.❔.3次元として脳が理解する立体化 スタイルとは?詳細カスタマイズのご案内です
一部分だけを動かすGIF画像加工シネマグラフ参考まとめ
一部分だけを動かす加工を施し魅力的なスタイルを表現するGIF画像シネマグラフをご覧いただき製作の手本として参照ください シリウスに洗練されたシネマグラフをカスタマイズしてナイスなサイトへ....
GIF画像の編集が思うように進まれない方へ|ずるっこカスタマイズ
シリウス内にGIF画像を自主制作して設置しようとしても思うようにことが進まれない方は 多少ずるっこですがいいカスタマイズ手法がございます 思考を変えてみましょう
シリウスヘッダーをGIFアニメーション画像に切り替える設置方法
シリウスサイトのヘッダーをGIFアニメーション画像に切り替えて表示するには 通常設定ではなくスタイルシートで指定することで対応が可能です
ヘッダーフレーム内にGIF画像を自動で、リサイズ調整する手順
シリウスサイトのトップヘッダーフレーム枠内に、正常にGIf画像のサイズが適合される自動リサイズ調整、および正常な動きを反映させるための工程をご案内いたします
すべてのページヘッダーで異なるGIFアニメーション表示を設定方法
シリウスサイトでは、すべてのページヘッダーで異なるGIFアニメーションの適合表示は、デフォルト指定ではできませんが、CSSに指示を加えれば簡単にできます
シリウスのサイト背景をGIFアニメーション|シネマで表示する方法
シリウスのサイト背景をすべてのページでワイドサイズのGIFアニメーション、シネマグラフで個別設定する方法のご案内です、よりハイレベルなデザインカスタマイズへお進みください
シリウスのトップページ背景をGIFシネマで全体表示する設定方法
シリウスのトップページ専用で背景をGIF画像シネマグラフで全体表示する簡単な設定方法のご案内です、下層には対応いたしませんが海外サイトのような構築が可能です
シリウス機能でGIF画像ファイルのリサイズが反映される保存方法
シリウスのデフォルト機能?、かと思われますがGIF画像ファイルの構造を失うことなく抽出から保存までの手順をご案内します