ワイドH..スライドボディ構築手順
最初のお断り
当初は、スクリプトを採用してのカスタマイズでしたが、iPhoneで反映しない事情ありで
HTML＆CSSだけで反応するようにしております..
仕上げ模様は当サイトをご覧ください
ｈTML body直下に以下記載
<div class="block-two">
<p> </p><!-- ★ヘッダーの高さ調整 pの行追加か削除で★ -->
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<strong><span style="color:#FFFFFF"><span style="font-size:48px;">ヘッダータイトル 手作業書入れ</span></span></strong>
</div><!-- /.block-two -->
ここまで
<div id="wrapper">
説明
ヘッダーテキストは手作業で別物として表示させています
理由は、タグを対置しても色合いが変？
そして、サイト上部に表示されてしまう...
ですのでシリウス機能で設定したタイトルは、サイトオプション文字の位置で検索に影響しない
,,推奨されるやりようで非表示にしてください...
同じタイトルににするか、表示を変えるか？...自己判断で...
スタイルシートに以下追加 ユーザー指定スタイル
body,html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.block-two {
display: block;
width: 100%;
height: 100%;
background-image: url("https://www.affiliateno1.com/slide-body/img/pexels-photo-62463.jpg");
background-attachment: fixed;
background-position: center center;
}
@media screen and (max-width: 768px) {
.block-two {
display: block;
width: 100%;
height: 80%;
background-image: url("https://www.affiliateno1.com/slide-body/img/pexels-photo-62463.jpg");
background-attachment: fixed;
background-position: center center;
}
}
説明
画像コードが二つ,,PCとスマホで切り替え表示ができます...
他..あちこち弄り回して変化をご確認ください...
グローバルナビ？
記事上部に表示されますね
サイト上部にも移動できるのですが、スマホ表示の際..メニューが広がりまして..?
後ほど試行錯誤してサイト上部におけないかリサーチしてみます
不要なら未設定..ですね
過去記事...あてにしないでくださいね？
シリウス新テーマ、デフォルト2カラムタイプをワイドヘッダーにカスタマイズですが、
どこで間違えたのか？
複合仕様がプラスされちゃいました？
ボディをスクロールするとヘッダーを隠す.....まあこれはOK..
もう一つ,,
サイト開くと異なるヘッダーが2回表示されますね..
一度目はスーッと消えて次が現われます..
DEMOですので、二つ目はGIF画像にしておりますが...不動画像でもOK..
スマホではどちらも不動画像にしております...
現在の作動確認状況
アンドロイドでは、確認できますが？iPhoneではぼやけ画像のみ？？？
調整中です...ぼやけが嫌な方は無理な導入はお控えください...
iPhoneでスクリプトをオンしていないと画像さえ確認できません理由ではありませんね...？
iPhone対応にカスタマイズできる方は....問題ないんでしょうけれど？
読者様より、サイト開くとアニメ画像が表示され...数秒で消えてサイトがあらわれる
仕様にできないかとの要請で作業していたら,,,間違いで..生まれたスタイルです？
でも、使えるじゃん..
要請で作ったテンプレートはこちら..参照
https://www.affiliateno1.com/animetesut/
ワイドヘッダー＋部ディスクロールでヘッダーを覆いつくす..スタイルはシリウスの
レスポンシブテンプレートで以前より試用しています...
参照
https://www.affiliateno1.com/sirius.customize/
カスタマイズ作業？...当サイトスタイルは作業が上例に比べれば超簡単..
画像が二つなので事前に用意しておきますとコードのコピペ作業で14秒...
こんなスタイルですが、入用でしたらカスタマイズは超簡単ですのでお使いください。
カスタイズに関しての要件
順不同
1..トップHTMLにコード追加するわけですが、サイト開いた状態からサイト自体に変化はありません..
単にスクロールすればよいだけ..
カテゴリーエントリーでも改変すればカスタムは実行できますが、自己判断で...?
特に何もせずであればカテゴリーエントリーに影響しません..
通常の表示です..
2..シリウス設定のヘッダー画像はそのままでもよいのでしょうが、レイアウト変更すると
ワイドヘッダーの下に画像があると...なんか違和感あり？
そう思われたならHTMｌより...<% pageHeaderImage2 %>を削除してください..
<!-- ★ヘッダー画像エリアここから★ -->
<div id="header">
<% pageHeaderImage2 %>
<div id="headertxt">
ですが、削除するとカテゴリー以下のヘッダースペースまで消えてしまうのですね..
ですので、カテゴリHTMLでは..<% pageHeaderImage2 %>を通常の画像コードで
作成し..入れ替えてください..
以下記載のコピーコードはトップHTMLですのでヘッダー表示コードは削除しております..
他詳細、後々気が付くことありましたら追記いたします
では、進めますね
ヘッダー用画像二つ事前ご用意してください
ワイドでない場合は、自動拡張されます..
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>
ここまで
</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> </p><!-- ★ヘッダーの高さ調整 pの行追加か削除で★ -->
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<% headerText | tag_insert(a href="<% pageDepth %>") | tag_insert(h2 class="title") %>
</div><!-- /.block-two -->
ここまで
<div id="wrapper">
最後にheadeエリアから記載削除
<% headerText | tag_insert(a href="<% pageDepth %>") | tag_insert(h2 class="title") %>
<!-- ★ヘッダー画像エリアここから★ -->
<div id="header">
<div id="headertxt">
<% headerText | tag_insert(a href="<% pageDepth %>") | tag_insert(h2 class="title") %> ここ削除してください
<% pageDescription2 | str_replace(id="headertext",class="desc") %>
</div>
</div>
<!-- ★ヘッダー画像エリアここまで★ -->
スタイルシートへCSS追記
ユーザー指定スタイルへ以下を張り付けます
画像コードのみ..4か所..反映確認後入れ替えてください...
body,html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.block-one {
display: none;
width: 2000px; /*100%でもよい*/
height: 2000px; /*100%でもよい*/ position: absolute;
top: 0;
left: 0;
background-image: url("https://www.ailibrary.jp/img/clipimage_61.jpg"); /*PC画像*/
background-attachment: fixed;
background-position: center center;
background-repeat: no-repeat;
-webkit-background-size: cover;
background-size: cover;
}
.block-two {
display: none;
width: 2000px; /*100%でもよい*/
height: 2000px; /*100%でもよい*/
background: url("https://www.affiliateno1.com/slide-body/img/eff9bffb%20(1).gif"); /*PC画像*/
background-attachment: fixed;
background-position: center center;
background-repeat: no-repeat;
-webkit-background-size: cover;
background-size: cover;
}
@media screen and (max-width: 768px) {
.block-one {
display: block;
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: block;
width: 100%;
height: 100%;
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;
}
}
ここまで
追加記事
単にワイドヘッダー仕様にするやりよう
本文では、ダブルヘッダーですが、ひとつでいいやと理解するなら以下の箇所を削除するだけで
変化します...
動かない画像がいいかなとも？
<div class="block-one"></div> //ここ削除//
<script>
$(".block-one").fadeIn(0);
$(document).ready(function(){
setTimeout(function() {
$(".block-two").css("display","block");
$(".block-one").fadeOut(4500); //もしくは数値を0にする//
}, -1);
});
</script>
以上です
お問い合わせは以下よりお願いいたします。
https://www.affiliateno1.com/シリウスカスタマイズサポートフォーラム/シリウスカスタマイズサポートフォーラム一覧/