ワイドヘッダー設定手順

ワイドH..スライドボディ構築手順

最初のお断りです...

 

シリウス新テーマ、デフォルト2カラムタイプをワイドヘッダーにカスタマイズですが、
どこで間違えたのか?

 

複合仕様がプラスされちゃいました?
ボディをスクロールするとヘッダーを隠す.....まあこれはOK..

 

もう一つ,,
サイト開くと異なるヘッダーが2回表示されますね..

 

一度目はスーッと消えて次が現われます..
DEMOですので、二つ目はGIF画像にしておりますが...不動画像でもOK..

 

 

読者様より、サイト開くとアニメ画像が表示され...数秒で消えてサイトがあらわれる
仕様にできないかとの要請で作業していたら,,,間違いで..生まれたスタイルです?
でも、使えるじゃん..

 

要請で作ったテンプレートはこちら..参照
https://www.affiliateno1.com/animetesut/

 

 

ワイドヘッダー+部ディスクロールでヘッダーを覆いつくす..スタイルはシリウスの
レスポンシブテンプレートで以前より試用しています...
参照
https://www.affiliateno1.com/sirius.customize/

 

カスタマイズ作業?...当サイトスタイルは作業が上例に比べれば超簡単..
画像が二つなので事前に用意しておきますとコードのコピペ作業で14秒...

 

こんなスタイルですが、入用でしたらカスタマイズは超簡単ですのでお使いください。

 

カスタイズに関しての要件

順不同

 

1..トップHTMLにコード追加するわけですが、サイト開いた状態からサイト自体に変化はありません..
単にスクロールすればよいだけ..
カテゴリーエントリーでも改変すればカスタムは実行できますが、自己判断で...?
特に何もせずであればカテゴリーエントリーに影響しません..
通常の表示です..

 

2..シリウス設定のヘッダー画像はそのままでもよいのでしょうが、レイアウト変更すると
ワイドヘッダーの下に画像があると...なんか違和感あり?
そう思われたならHTMlより...<% pageHeaderImage2 %>を削除してください..

 

<!-- ★ヘッダー画像エリアここから★ -->
<div id="header">
<% pageHeaderImage2 %>
<div id="headertxt">

 

ですが、削除するとカテゴリー以下のヘッダースペースまで消えてしまうのですね..
ですので、カテゴリHTMLでは..<% pageHeaderImage2 %>を通常の画像コードで
作成し..入れ替えてください..

 

以下記載のコピーコードはトップHTMLですのでヘッダー表示コードは削除しております..

 

他詳細、後々気が付くことありましたら追記いたします

 

では、進めますね

コード追加

 

ヘッダー用画像二つご用意してください
ワイドでない場合は、自動拡張されます..

 

 

head内に以下コード貼り付け

 

<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0">
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

 

<style>
body,html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}

 

.block-one {
display: none;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
<!-- ★ヘッダー画像コード 例コードあり 書き換えてください★ -->
background-image: url("https://www.ailibrary.jp/img/clipimage_61.jpg");
background-attachment: fixed;
background-position: center center;
background-repeat: no-repeat;
-webkit-background-size: cover;
background-size: cover;
}

 

.block-two {
display: none;
width: 100%;
height: 100%;
<!-- ★二つ目のヘッダー画像コード 例コードあり 書き換えてください★ -->
background: url("https://www.affiliateno1.com/slide-body/img/eff9bffb%20(1).gif");
background-attachment: fixed;
background-position: center center;
background-repeat: no-repeat;
-webkit-background-size: cover;
background-size: cover;
}
</style>
ここまで

 

</head>

 

body直下に以下コード貼り付け

 

<body>
ここから
<div class="block-one"></div>

 

<script>
$(".block-one").fadeIn(0);
$(document).ready(function(){
setTimeout(function() {
$(".block-two").css("display","block");
$(".block-one").fadeOut(4500);
}, -1);
});
</script>

 

 

<div class="block-two">
<p>&nbsp;</p><!-- ★ヘッダーの高さ調整 pの行追加か削除で★ -->
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<header><span style="font-size:48px;"><span style="color:#FFFFFF">タイトル</span></span></header>
</div><!-- /.block-two -->
ここまで

 

<div id="wrapper">

 

 

これだけで発動します。

 

 

お問い合わせは以下よりお願いいたします。
https://www.affiliateno1.com/シリウスカスタマイズサポートフォーラム/シリウスカスタマイズサポートフォーラム一覧/

 

 

更新履歴