サイトマップ
動的作動スタイルのパララックスデザインテンプレート
パララックスデザインの視覚効果を向上させる手法として多く用いられる
見せることに視点を置いた動的スタイルの実行は、CSS記述だけでは
難易な構築ですが、jqueryを採用することでHTMｌサイトでも容易に
反映させることが可能となりました..
...いらん記事でも冒頭では検索エンジン対応で致し方なく...です
シリウスを動的な作動を見せるパララックスデザインテンプレートへと
カスタマイズする工程をご案内します..
作動のDEMOサイトはこちです..が、レスポンシブTPに導入の際は戻りボタンに
障害あり...対処ＣＳＳは完了してますが、詳細及びデモスタイルをご確認ください...
http://www.affiliateno1.com/parallax_demo1/
さて、今回ご案内するパララックスデザインはスタンダードなデザイン...
縦スライド
画像 記事 画像 記事画像とつながります..
スクロールの際、画像が上にせり上がるという多くのサイトで
採用されている形状となります..
事前説明
jquery
jquery採用と言ってますが、サーバーにjqueryを入れずとも作動するよう
配布HTML記載にjqueryは、含めてございます..
試しに、シリウスの新規サイトを作ってCSSを入れてみてください..
MTML内記載の呼び出しコードは、不要としないでください
https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js
を削除すると動かなくなりますので削除しないでください
jqueryがもし呼び込まれない場合は、せり上がりが見られないだけで
通常のCSS掲載の作動はしますが..
とりあえずパララックスデザインコード組み込んでせり上がりが見られないときは、
jqueryダウンロードしてサーバーに入れてください..
ダウンロード
https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js
画像の用意
画像は、DEMOでご確認のように3つ使いますので、パソコン用３つ、
スマートフォン用３つで計6つをＣＳＳに入れ込みますが、どちらも同じ画像で
よいとするなら3つでも構いません
画像は３００PXサイズであっても、パソコン画面いっぱいに綺麗に
自動拡張されますが低画質の場合は粗が見られます..
できる限りは大きめで....
逆にスマートフォンでは自動縮小します..
画像3段なら記事も3段となります
記事挿入について
ここ大事
ここの解説は、お隣のCSS形成のパララックスデザインページと
ほとんど同じ記載法なのであいすみませんが、以下で他の詳細を
含めてご確認願います..シリウス専用にソースは書き換え済みなので..
CSS形成パララックスデザインを導入する設置手順..その1
同じような記事を書くとすぐに検索順位が下がってしまう事情有りで
すみません..
異なることは、1記事が多くなると 2記事の縦サイズが余裕なく
狭まります..(CSS指示で対処は可能）
記事挿入で、はじめの行の頭が、ヒトマスずれます
以下行のようにです
などは家の中も湿っぽくなり不快感を感じていると
などは家の中も湿っぽくなり不快感を感じていると
対処法
ここ大事
操作画面で、通常はPタグ改行が最下部のメニューで指定されえているかと
思いますが、HTMLを大賀場に変えたので文字列にずれが見られます...
BRタグ改行に変えることで正常に整列します…
記事背景カラー
記事背景は、シリウス機能で指定する背景カラーが表示されます
画像と画像の間にある記事書くとこですよ...
背景を画像にすると画像が現れるということ
HTMLテンプレート内書き換え記述
CSS形成パララックスデザインと同じ位置に組み込みます
以下記述は、画像上のテキスト以外、書き換え無しでOK
bodyより下へ
<body>
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-P5H6QV" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-P5H6QV');</script>
<% if:siteMode(normal) %>
<!-- ★ヘッダーここから★ -->
<div class="bg-holder pic1" data-width="1024" data-height="768">
<div class=header h2>
<center><% headerText | tag_insert(a href="<% pageDepth %>") | tag_insert(h2) %></center>
<% pageDescription %>
</div>
</div>
<!-- ★ヘッダーここまで★ -->
<section>
<div class="content">
<% textTitle1 %><!-- ★記事3に書く★ -->
<% textBody1 %>
</div>
</section>
<div class="bg-holder pic2" data-width="1024" data-height="768">
<div class="content">
<h2>画像上テキスト</h2>
</div>
</div>
<section>
<div class="content">
<% textTitle2 %><!-- ★記事2に書く★ -->
<% textBody2 %>
</div>
</section>
<div class="bg-holder pic3" data-width="1600" data-height="1200">
<div class="content">
<h2>画像上テキスト</h2>
</div>
</div>
<section>
<div class="content">
<% textTitle3 %><!-- ★記事3に書く -->
<% textBody3 %>
</div>
</section>
<section>
<div class="content">
<% textTitle4 %>
<% freeSpace2 %><!-- ★フリースペース★ -->
<% entryList_n | tag_replace(h3,h4) %><!-- ★エントリー表示★ -->
<% textBody4 %>
</div>
</section>
<!-- ★フッターここから★ -->
<div id="footer">
<div class="inner">
<% footerMenu | tag_insert(div id="footlinkbox") %>
<% searchTag | str_replace(<!-- ★comment★ -->,) | str_replace(image,submit) | tag_insert(div id="searchbox") %>
<div id="footsub"><% PRLink %><% sitemapPageLink %></div>
</div>
<div class="copyright">Copyright (C) <% thisYear %> <% siteTitle %>All Rights Reserved.<% accessAnalyzer %></div>
<!-- ★フッターここまで★ -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- parallax scroll本体 -->
<script src="js/jquery.parallax-scroll.min.js"></script>
<script>
$(function() {
$(".bg-holder").parallaxScroll({
friction: 0.6
});
});
</script>
<script>//<![CDATA[
!function(a,b){"function"==typeof define&&define.amd?define(["jquery"],b):b(a.jQuery)}(this,function(a){"use strict";var b,c={friction:.5},d=a(window),e=0;return window.requestAnimationFrame=function(a){var b=(new Date).getTime(),c=Math.max(0,5-(b-e)),d=window.setTimeout(function(){a(b+c)},c);return e=b+c,d},b=function(b,e){return{init:function(){this.$background=a(b),this.settings=a.extend({},c,e),this._initStyles(),this._bindEvents()},_initStyles:function(){this.$background.css({"background-attachment":"scroll"})},_visibleInViewport:function(){var a=d.height(),b=this.$background.get(0).getBoundingClientRect();return b.top<a&&b.bottom>0||b.bottom<=a&&b.top>a},_bindEvents:function(){var a=this;d.on("load scroll resize",function(){a._requestTick()})},_requestTick:function(){var a=this;this.ticking||(this.ticking=!0,requestAnimationFrame(function(){a._updateBgPos()}))},_updateBgPos:function(){if(this._visibleInViewport()){var a=d.width(),b=d.height(),c=this.$background.data("width"),e=this.$background.data("height"),f=c/e,g=this.$background.width(),h=this.$background.height(),i=g/h,j=f>i,k=g/c,l=e*k,m=this.$background.offset().top,n=d.scrollTop(),o=n-m,p=b+l,q=o*(b/p),r=o/b,s=(b-h)/2;s=j?s*r:s;var t=j?2*this.settings.friction*i:this.settings.friction*i,u=j?"auto "+b+"px":a+"px auto",v=q*t-s;this.$background.css({"background-size":u,"background-position":"50% "+v+"px"})}this.ticking=!1}}},b.defaults=c,a.fn.parallaxScroll=function(a){return this.each(function(){new b(this,a).init()})},b});
//]]></script>
<script>$(function(){$(".bg-holder").parallaxScroll({friction:0.6});});</script>
<script>
</div>
</div>
ここまでを入れ替え
</body>
</html>
エントリ―記事一覧を表示する記述ですが
最新記事 カテゴリー一覧をを表示する際は、
以下に書き換えてください
トップHTML用呼び出しコード
<% whatsNew | addRound | tag_insert(div id="whatsnew") %>
カテゴリ―呼び出し記載は以下
<% categoryListTitle | tag_insert(h3) %>
エントリー呼び出し記述
<% entryList_n | tag_replace(h3,h4) %>
画像上のテキスト
2段 3段目の画像の左端に表示されるテキストで、
ほとんど必要ないんですが、テキストを1文字でも入れなければ
画像が表示されなくなります
イメージテキストでも、記号でもよいので文字入れしてください
<h2>画像上テキスト</h2>
記事幅、レスポンシブで読み込まれるよう記述追加
ご注意...ここの解説はシリウスのデフォルトテンプレートでは必要なのですが、
レスポンシブテンプレートでしたら追加不要の項目です..
記事幅は、9００pxにしてますが、狭くする際は改行してください
レスポンシブ作動で、スマ―トフォン閲覧ではレイアウトは縮小されますが
MTML headへの検索エンジンに対するスマートフォンサイトであることを
伝える指令記述はこちらページを参照にmetaの近くに入れ込んでください
シリウス2カラムテンプレート レスポンシブデザイン設定方法
指令記述
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
<link rel="stylesheet" media="all" type="text/css" href="<% pageDepth %>/styles.css" />
ここまで...デフォルトテンプレート対応でした..
スタイルシート
画像コードの指定行は6つありますが、パソコン表示用が3
スマホサイズに自動縮小が3で
上覧がスマホ用画像
下覧がパソコン用
画像コードを書き換えてください
ヘッダーのタイトルカラーは、シリウス操作でOK
文字サイズもシリウス操作でOK
記事幅はここで書き換え
あちこちいじりまわしているんで、あまり改行はせずとも
大丈夫かと思います
スタイルシートへの追加行
スタイルシートの一番下へ貼り付けてください
ここから
/*パララックスA */
html,
body {
width: 100%;
height: 100%;
}
body {
font-family: "lato", sans-serif;
font-size: 18px;
font-weight: 400;
line-height: 1.778;
color: #222;
margin: 0;
}
.header h2 ,#header .title {
width: 700px;
font-size: 56px;
line-height: 26px;
position: relative;
left: 30px;
top: 300px;
<% pageTitleFontSize %>
<% pageTitlePlace %>
}
.header h2 a, #header h2 a:visited,#header .title a,#header .title a:visited {
color: #6A8902;
text-decoration: none;
<% pageTitleColor %>
}
h1, h2, h3, h4, h5, h6 {
font-weight: 900;
}
/* Backgrounds */
.bg-holder {
width: 100%;
height: 100%;
background-size: cover;
background-position: 50% 50%;
color: #fff;
}
.bg-holder .content {
color: #fff;
text-align: center;
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
h2 {
font-size: 42px;
line-height: 1.5;
}
.pic1 {
background-image: url('img/pexels-photo-52065.jpg'); スマホ画像
}
.pic2 {
background-image: url('img/nature-sunset-person-woman.jpg'); スマホ画像
}
.pic3 {
background-image: url('img/pexels-photo-11746.jpg'); スマホ画像
}
@media (min-width: 768px) {
.pic1 {
background-image: url('img/pexels-photo-52065.jpg'); PC画像
}
.pic2 {
background-image: url('img/nature-sunset-person-woman.jpg'); PC画像
}
.pic3 {
background-image: url('img/pexels-photo-11746.jpg'); PC画像
}
}
/* Content ＆Sections */
section {
padding: 48px;
}
section .content {
margin: 0 auto;
max-width: 900px; //記事幅
}
section .content{
_height:10px;
padding-top: 20px;
padding-bottom: 20px;
min-height:400px;
margin-top:10px;
background-repeat: repeat-y;
background-position: left;
margin-top:<% topMenuMargin(47,0) %>;
}
.content h2 {
width: 700px;
font-size: 32px;
line-height: 26px;
position: relative;
left: 200px;
top: 200px;
}
@media screen and (max-width: 640px) {
.content h2 {
width: 700px;
font-size: 32px;
line-height: 26px;
position: relative;
left: 50px;
top: 200px;
}
}
section p {
margin: 10;
}
section p + p {
text-indent: 2em;
}
section + hr {
border: 0;
border-top: 1px solid #ccc;
height: 0;
}
/* Intro */
.intro h1 {
margin: 0;
font-size: 48px;
line-height: 1.5;
}
.intro p {
margin: 0;
font-size: 24px;
}
ここまで
.....
PC用画像だけでも入れてみると反映は確認いただけます
2017 0704
ＣＳＳは、シリウス配布のレスポンシブＴＰでも作動は確認できております
修正として、2段，3段画像に表示されるテキストの左よせを解消いたしました
left: 400px;ですね、ただし好みで調整する際は数値変更...
.content h2 {
width: 700px;
font-size:px;
line-height: 26px;
position: relative;
left: 400px;
top: 200px;
}
しかし、スマートフォンでの閲覧でテキスト位置が固定されていて
文字隠れを起こしてしまう障害がありまして、レスポンシブコード追加で
何とか...
スマートフォンでは、小さく左寄せするよう指示改変
@media screen and (max-width: 640px) {
.content h2 {
width: 700px;
font-size: 32px;
line-height: 26px;
position: relative;
left: 50px;
top: 200px;
}
}
気が付くことありましたら再追記いたしますね
ページトップ
動的作動なパララックススクロールデザイン構造を組み込む工程
シリウスサイトをパララックス仕様にカスタマイズ
シリウスカスタマイズＴＯＰ
- CSS形成パララックスデザインを導入する設置手順..その1
- シリウスサイトにCSS形成のみでパララックス（parallax）スタイルを導入する手順のご案内となります..取り付けはコピペで5分、画像は良いものをご用意ください
- パララックスをサイト記事カラム内に導入..2
- シリウスサイトの幅に合わせて、パララックスレイアウトを記事カラムで設定する簡易型カスタマイズ手順です...
- スマホでも動く動的パララックス記事内導入３
- シリウスの記事内にスクリプトを採用しパララックス効果を演出するカスタマイズ.. ただし、静的では無く動的...画像が少しせり上がり...よく使わる手法です... 当サイトは他のスクリプトが影響
- ハイソなパララックスデザイン
- シリウスＭＴＭLテンプレートをハイソな高級感をイメージしたパララックスデザインスタイルへカスタマイズしてみましょう
