TOP

parallaxをサイト幅に合わせ設置する解説

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

 

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

 

 

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

 

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

 

 

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

 

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

 

 

 

最新更新日 2019 0712 

 

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

 


 

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

 

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

 

 

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

 

 

Parallax...画像内テキスト

 

 

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

 

 

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

 

Parallax...画像内テキスト

 

 

ここも記事内追記

 

 

Parallax...画像内テキスト

 

 

 

 

HTML記述....

 

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

 

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

 

</div>

 

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

 

 

今回は、すぐ使えるCSS記述をコピーしてHTMLとスタイルシートに
張り付ければの二作業
画像は小さくともサイトサイズに自動調整されますので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をご覧ください..
スマホでも自動反映しますよ...

 

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

 

 

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

パララックスをサイト記事カラム内に導入..2関連解説
CSS形成パララックスデザインを導入する設置手順..その1
シリウスサイトにCSS形成のみでパララックス(parallax)スタイルを導入する手順のご案内となります..取り付けはコピペで5分、画像は良いものをご用意ください
スマホでも動く動的パララックス記事内導入3
シリウスの記事内にスクリプトを採用しパララックス効果を演出するカスタマイズ.. ただし、静的では無く動的...画像が少しせり上がり...よく使わる手法です... 当サイトは他のスクリプトが影響
動的作動なパララックススクロールデザイン構造を組み込む工程
シリウスのMTML構造に動的作動、jquery採用でスクロールによる時差移動を指示し、背景画像のずれ、せり上がりの視覚効果を発生させるパララックススタイルへとカスタマイズする工程をご案内します CSS追記のご案内です
ハイソなパララックスデザイン
シリウスMTMLテンプレートをハイソな高級感をイメージしたパララックスデザインスタイルへカスタマイズしてみましょう