PC画面いっぱいの大きな画面ではなく、デフォルトサイト900px幅程度で
parallax効果をサイトで表してみたい方は、HTMLテンプレートへの記述
改編ではなく記事内に挿入すれば、それはそれなりに表示されます..

 

で、あくまで記事内スペース...サイト全体をパララックスにする仕様ではありません..

 

 

当ページでは、DEMOで入れてますのでご参照ください...
サイト全体を意味しない..個別のエントリーページでも可能...
スタイルシートの割り込みにＣＳＳを追加すれば個別の反映で使えます..

 

トップHTMLやカテゴリーならスタイルシート　ユーザー指定スタイルへですね...

 

 

最初のお断り...
シリウスの初期からあるTP　レスポンシブTP　ニューテンプレートでも反映しますが、
視差効果の作動はパソコンでのみ...
スマホでは中間画像は表示されますけどスライスはしません..

 

当ページをスマホで見ればご理解いただけると思いますが、スマホではパラ効果なくとも
良いのでは？
そんな方だけご利用ください...

 

 

 

最新更新日　2019　0712　

 

では、シリウスのサイト幅に合わせて、parallaxを設定します...

 

---

 

今回は、サイト幅内、記事カラムに、parallaxを配置する手順ですが

 

こちらで不明な箇所は、その1でご確認ください
CSS形成パララックスデザインを導入する設置手順..その1

 

 

記事内に置くとこんなスタイルに自動調整されます...

 

 

記事は記事カラム内で追記します

 

 

今回は、すぐ使えるＣＳＳ記述をコピーしてＨＴＭＬとスタイルシートに
張り付ければの二作業
画像は小さくともサイトサイズに自動調整されますので3つ
いいものお探しください

ここも記事内追記

 

 

 

HTML記述....

 

上例でよければ..まずは記事内に貼り付けるHTMLコードから...

 

<div class="parallax parallax_img_1">
<div class="box">
<span style="color:#FFFFFF">Parallax...画像内テキスト</span>

 

</div>

 

</div>
記事は記事カラム内で追記します

 

 

今回は、すぐ使えるＣＳＳ記述をコピーしてＨＴＭＬとスタイルシートに
張り付ければの二作業
画像は小さくともサイトサイズに自動調整されますので3つ
いいものお探しください
<div class="parallax parallax_img_2">

 

<div class="box">
<span style="color:#FFFFFF">Parallax...画像内テキスト</span>

 

</div>

 

</div>
ここも記事内追記

 

<div class="parallax parallax_img_3">

 

<div class="box">
<span style="color:#FFFFFF">Parallax...画像内テキスト</span>

 

</div>

 

</div>

 

ここまで....

 

 

 

では、スタイルシートへ指示追加します...

 

スタイルシート記載追加

 

スタイルシート内の記述は、以下になりますが、上にも記載の通り個別ページなら
スタイルの割込みでも作動します...

 

 

画像コードについて?

 

画像コードは,CSSでサーバーから読み込むのでアップしてのコードを書き込んでください..
もしくはシリウス関数をサイトのURLに書き換える..アップの必要..
初めて使う画像は、まだサーバーに画像ファイル無いでしょう..プレビュー確認もできません
アップ必須..

 

既に使っている画像ならコードを取り出して下さいね...

 

 

パソコンとスマートフォン表示について?

 

今回の更新までは、スマートフォン対応のメディアコードありませんでしたけど異なる画像も
使いたいと要望があり..パソコン用、スマートフォン用と異なる指定ができるよう追加しました。

 

画像の高さですが、スマートフォンでは縦幅がありすぎると感じられましたら統制可能です...
メディアコード内　height:30%;の数値で調整ください..

 

@media screen and (max-width: 769px) {
div.parallax{
height:50%;
background-position: 90% 10%;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}

 

 

コピーする画像コードはあたしのサーバーから読み込まれる記載ですので、イメージは
すぐ理解できると思います..書き換えお忘れにならないよう願います..

 

 

 

では行きますか？

 

背景に使う画像コードは、3つとも書き換えてスタイルシート....ユーザー指定スタイルへ
貼り付けてください

 

div.parallax{
height:300px;
background-position: 90% 10%;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
.content{
padding:30px 0;
}

 

.box{
max-width: 100%;
margin: 0 auto;
}

 

 

.box2{
max-width: 100%;
margin: 0 auto;
}

 

 

.box h2{
line-height: 600px;
font-size: 50px;
color: #fff;
text-align: center;
font-weight: bold;
text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

 

/*パソコン用画像コード*/
.parallax_img_1{
background-image: url(https://www.affiliateno1.com/img/retouched-1817894_1920.jpg);
}

 

.parallax_img_2{
background-image: url(https://www.affiliateno1.com/img/ben123.jpg);
}

 

.parallax_img_3{
background-image: url(https://www.affiliateno1.com/img/iblog4.jpg);
}

 

 

/*スマホ用指示コードここから*/
@media screen and (max-width: 769px) {
div.parallax{
height:30%;
background-position: 90% 10%;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}

 

.content{
padding:30px 0;
}

 

.box{
max-width: 100%;
margin: 0 auto;
}

 

 

.box2{
max-width: 100%;
margin: 0 auto;
}

 

 

.box h2{
line-height: 505;
font-size: 50px;
color: #fff;
text-align: center;
font-weight: bold;
text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
/*スマホ用画像コード*/
.parallax_img_1{
background-image: url(https://www.affiliateno1.com/img/ben123.jpg);
}

 

.parallax_img_2{
background-image: url(https://www.affiliateno1.com/img/retouched-1817894_1920.jpg);
}

 

.parallax_img_3{
background-image: url(https://www.affiliateno1.com/img/iblog4.jpg);
}
}

 

ここまで...

 

 

あとがき
メディアコードなしでもスマートフォン画面で縮小しますが、見せたい箇所が隠れてしまう
なんてこともあるので、追加しておいたほうが良いですね..

 

パソコンでは、作動確認できるのにスマーフォンでは不作動...？
パラ効果のCSS指示が読み込まれない...ということですね..
ま、永くサイト運営して入ればトップ以外..記事内にパラ効果などいらんものですけど...
考えてみます...

 

パララックス効果をトップPでとかで表示されたい方は、当説明は不採用にして
parallax_demo1をご覧ください..
スマホでも自動反映しますよ...

 

良いサイト作りにお励みください。

 

 

ページトップ
ＣＳＳ形成のみでパララックスをサイトに導入..その1
シリウスサイトをパララックス仕様にカスタマイズ
シリウスカスタマイズＴＯＰ