TOP

パララックス設営手順基本解説

シリウスサイトをCSS記述のみでパララックスデザインへとカスタマイズする
手順のご案内となります

 

今回は記事カラム 4BOX、画像スペース 5BOXとフルサイズで
コンテンツを増量したバージョンアップの解説となります

 

作動スタイルは、こちらのサイト参照


 

ここでは静的作動での動き?

 

CSSで形成するだけでパララックス(parallax)化を実行できるのですが
一つだけ現時点CSSだけでは動かせない一部作動がございます

 

重なる画像はすべて正常で、一番下のサイト背景も切り替わりはするが
スクロールに合わせて やや、上にせり上がるという動きが指定できない
状況です

 

画像がせり上がらないというサイトも多くみられるのでさほど気にすることも
ないかと思われますが、必要な方はjquery採用のカスタマイズも、
以降、お隣ページに動的作動として追記しておりますのでご確認ください

 


 

導入手順へ進みます

 

HTML記載

 

大幅にデフォルト記述を削除することになりますが
ここまでしないとうまく使えないということをご了承ください

 

レスポンシブ化は、サイト自体が構造を取り入れている場合は
合わせて画面が伸縮しますので不安なく...

 

 

こちらは画像を5つ 記事カラムが4つで進めます

 

HTMLへの記載は、以下を確認

 

入れ替える記載をご確認ください

 

<% XMLdeclaration %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<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" />
<meta http-equiv="Content-Type" content="text/html; charset=<% publishCharset %>" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title><% pageTitle %></title>
<meta name="keywords" content="<% metaKeywords %>" />
<meta name="description" content="<% metaDescription %>" />
<link rel="stylesheet" href="<% pageDepth %>styles.css" type="text/css" />
<% pageStyles %>
<% rssFeedLink %>
<% headTag %>
</head>

 

 

<body>

 

ここから~

 

<div class="parallax parallax_img_1">
<div class="box">
<div class=header h2>
<center><% headerText | tag_insert(a href="<% pageDepth %>") | tag_insert(h2) %></center>
<% pageDescription %>
</div>
</div>
</div>

 

<div class="content">
<div class="box">
<h3>sirius1</h3>
<% textTitle1 %>
<% textBody1 %>
</div>
</div>

 

 

<div class="parallax parallax_img_2">
<div class="box">
<h2>Parallax2</h2>

 

</div>
</div>

 

<div class="content">
<div class="box">
<h3>siriusu2</h3>
<% textTitle2 %>
<% textBody2 %>
</div>
</div>

 

 

<div class="parallax parallax_img_3">
<div class="box">
<h2>Parallax3</h2>

 

</div>
</div>
<div class="content">
<div class="box">
<h3>siriusu3</h3>
<% textTitle3 %>
<% textBody3 %>
</div>
</div>

 

 

 

<div class="parallax parallax_img_4">
<div class="box">
<h2>Parallax4</h2>

 

</div>
</div>

 

<div class="content">
<div class="box">
<h3>siriusu4</h3>
<% textTitle4 %>
<% textBody4 %>
</div>
</div>

 

 

 

 

<div class="parallax parallax_img_5">
<div class="box">
<h2>END</h2>
</div>
</div>
ここまでを入れ替えます

 

 

 

記述はコピーしてお使いください

 

<!-- ★フッターここから★ -->
<div id="footlink"><% footerMenu %><% PRLink %><% sitemapPageLink %></div>
<% topMenu %>
<div id="footer">Copyright (C) <% thisYear %> <a href="<% pageDepth %>"><% siteTitle %></a> All Rights Reserved.<% accessAnalyzer %></div>
<!-- ★フッターここまで★ -->

 

<% searchTag | str_replace(<!-- ★comment★ -->,サイト内検索:) | tag_insert(div id="searchbox") %>

 

</div>

 

</body>
</html>

 


 

記述解説

 

ヘッダーテキスト

 

ヘッダーテキストは、シリウス全体設定 個別設定画面で記載した
テキストが表示されます

 

フォントカラー サイズも同じく、操作画面で指示可能

 

 

また、<h3>siriusu2</h3>タグは不要かと思われますので
作動確認後削除してください

 

 

 

記事を書き入れる手順が変わります

 

記事挿入ですが、通常の記載方法とは異なります

 

通常の記事挿入は、記事1ですけど、その対象はパララックスカラムで
言えば、一番上のマス

 

2段目は、シリウス操作画面右の記事2でとなるのです

 

これは、パララックスのHTML基本構造がシリウスには対応していない
が事情

 

記事2段目には、htmlテンプレート内で書き込むことでは対応できますが、
対応可能なのはトップページのみ

 

さらに、Pタグやbrタグ使わないと文字列の整理ができない...

 

シリウス慣れした方には面倒化と??

 

ですので、対処法として以下を組み込み記事を挿入するようにしました
<% textTitle1 %>

 

<% textBody1 %>から

 

<% textTitle4 %>
<% textBody4 %>までの記載がございますが、パララックスの特徴に
合わせて、記事1 記事2 記事3の順で文章を記載すれば画像と画像の
間にある記事欄に表示されます

 

ですので、記事挿入の際は、一番上が記事1とご理解願います

 

 

重要

 

シリウスの操作画面下にあるPタグ改行をBRタグ改行に切り替えてください

 

記事1 記事2と記載する画面すべてで入れ替えてください

 

Pタグ改行の場合、文字並びにずれが生じる事情有り...のため

 

 

フッターを表示スタイルは?

 

フッターは、デフォルトのスタイルで最大幅に拡張されて表示されます

 

 

サイトのページメニューは?

 

2カラム 3カラムのページリンクは手動で追記となりますが、
元の設定が一カラムの場合

 

以下を削除しないで置けば、サイトラストにメニューは表示されます
<!-- ★サイドメニューここから★ -->
<div id="menu"<% pageColumns %>>
<% freeSpace3 %>

 

<% siteMenu %>
<% siteNewEntry %>

 

<% freeSpace4 %>
</div>
<!-- ★サイドメニューここまで★ -->
</div>

 

<!-- ★サブメニューここから★ -->
<div id="rmenu">
<% freeSpace5 %>

 

<% subMenu %>

 

<% freeSpace6 %>
</div>
<!-- ★サブメニューここまで★ -->

 

<br class="FloatEnd" />
</div>

 

入れ替え位置をご確認ください

 

2カラム、3カラムの場合は、巻末に縦並びでメニュー表示されます

 


 

フリースペース2をサイト巻末で表示

 

フリースペースを巻末で表示する際は、以下3行の記述を

 

<% textTitle5 %>
<% freeSpace2 %>
<% textBody5 %>

 

ここの中の
&lt;div class=&quot;content&quot;&gt
&lt;div class=&quot;box&quot;&gt;
&lt;h3&gt;siriusu4&lt;/h3&gt;
&lt;% textTitle4 %&gt;
&lt;% textBody4 %&gt;

 

ここに置いてください

 

&lt;/div&gt;
&lt;/div&gt;

 

 

ここで大事なのは、記事順でいうとサイト巻末に表示する

 

ページトップ というリンクコードの配置で、エントリー一覧を
表示するかどうかで位置を決めます

 

表示しなければ、記事5に書き入れます

 

表示するなら、記事5に置いたページトップリンクの上か下

 

 

エントリー呼び出し記述はHTML内ではく、操作画面の記事挿入で
ページトップの上か下、好みの位置におくことになります

 

エントリー呼び出し記述はHTML内の&lt;% textBody4 %&gt;の
下でもよいのですが、サイトのカスタマイズ等
今後、実行するなどの経過で、横幅が拡張してしまうこともあるのが理由

 

呼び出しコードは以下

 

エントリー呼び出し記述
<% entryList_n | tag_replace(h3,h4) %>

 

エントリーページの呼び出し記述で説明しましたが、

 

カテゴリーHTMLでも同位置記載となります

 

カテゴリ―呼び出し記載は以下
<% categoryListTitle | tag_insert(h3) %>

 

トップHTMLでも位置は同じ、以下記載です
<% whatsNew | addRound | tag_insert(div id="whatsnew") %>

 


 

では、スタイルシートの記載へ進みます

 

 

ここからコピーして

 

body{
-webkit-text-size-adjust: none;
font-family:"メイリオ","MS Pゴシック",sans-serif;
font-size:14px;
color:#202020;
line-height:1.5;
background:#777777;
}
a{
color:#333;
text-decoration:none;
outline: none;
}
a:hover{
color:#19b491;
}
#header h1{
padding:10px;
background:#000;
color:#fff;
text-align:center;
}
.content{
width:1000px;
margin:auto;
}
.content h3{
font-size:24px;
border-bottom:#000 solid 1px;
margin-top:30px;
margin-bottom:20px;
}
.content p{
line-height:1.8;

 

}
a.button{
display:block;
background:#18dfb3;
padding:10px 15px;
color:#fff;
margin-top:20px;
}
a.button:hover{
text-decoration:none;
background:#19b491;
}
.wrap{
margin-top:50px;
margin-bottom:50px;

 

}
.font-36{
font-size:36px;
}

 

 

 

 

 

 

div.parallax{
height:700px;
background-position: 50% 50%;
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: 800px;
font-size: 50px;
color: #fff;
text-align: center;
font-weight: bold;
text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
.header h2 ,#header .title {
width: 700px;
font-size: 56px;
line-height: 26px;
position: relative;
left: 30px;
top: 300px;  //ヘッダータイトルの高さを指示
<% pageTitleFontSize %>
<% pageTitlePlace %>

 

}
}

 

/*画像コード*/
.parallax_img_1{background:url(img/1a.png);

 

}
.parallax_img_2{

 

background:url(img/kjhp.jpg);
}

 

.parallax_img_3{
background:url(img/dscf0114.jpg);
}

 

 

.parallax_img_4{
background:url(img/60sg.bmp);
}

 

.parallax_img_5{
background:url(img/dscf0200.jpg);
}

 

 

/*メディアクエリ*/
@media screen and (max-width: 1000px){
.content{
width:auto;
padding:10px;
}
.box{
width:auto;
}
}

 

ここまでを、スタイルシートの一番下へ貼り付けてください

 

 

カスタマイズ

 

カスタマイズする箇所は、すくなめですが、主だった箇所を抜粋してます

 

 

 

 

body{
-webkit-text-size-adjust: none;
font-family:"メイリオ","MS Pゴシック",sans-serif;
font-size:14px;
color:#202020;
line-height:1.5;
background:#777777; /記事カラムの背景カラー
}

 

 

height:700px;縦サイズ

 

画像は、小さな画像でも自動でパソコン画面サイズまで自動で
拡張されますので、低画質の場合はアラが出ます

 

画像コードを1から5まで5つ入れ替えてください

 

上から順にです
.parallax_img_1{background:url(img/1a.png);

 

}

 

パソコンで合わさるように指定しておりますが、必要でしたら数値を
書き換えて調整ください

 

 


 

記事の縦サイズは、各ページとも自動でコンテンツ量に合わせ
て拡幅しますので問題ないかと....

 

 

念のためですが、パララックススタイルは、シリウスのCSSの影響もあり
HTMLコード CSS記述は、わずかな記載ミスでレイアウトが崩れます

 

最初は、シリウスで新規サイトを作成し、取り付けてみてはいかがでしょうか?

 

画像さえあれば、15分でできるかと思いますが...?

 

参照
画像にGIF、動く画像を入れ込んでも反映は確認いただけます

 

CSSだけですので、プレビュー画面で作動はすぐに確認できます

 

 

 

CSS形成パララックスデザインを導入する設置手順..その1

シリウスサイトをCSS記述のみでパララックスデザインへとカスタマイズする手順のご案内となります今回は記事カラム 4BOX、画像スペース 5BOXとフルサイズでコンテンツを増量したバージョンアップの解説となります作動スタイルは、こちらのサイト参照ここでは静的作動での動き?CSSで形成するだけでパララッ...

≫続きを読む

 

パララックスをサイト記事カラム内に導入..2

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

≫続きを読む

 

動的作動なパララックススクロールデザイン構造を組み込む工程

パララックスデザインの視覚効果を向上させる手法として多く用いられる見せることに視点を置いた動的スタイルの実行は、CSS記述だけでは難易な構築ですが、jqueryを採用することでHTMlサイトでも容易に反映させることが可能となりました.....いらん記事でも冒頭では検索エンジン対応で致し方なく...で...

≫続きを読む

 

ハイソなパララックスデザイン

今回ご案内するパララックスデザインのスタイルは、上から下まで画像の連動となり 2段、3段目の記事カラムのスペースはなく、画像上に記事置きするタイプで、やや高級感を打ち出せますが、構造上トップページでの組み込み専用となります参考画像記事は画像の中に出現する形態ですBOXサイズは、CSSにより指定でき、...

≫続きを読む

 

 

 

ページトップ
CSS形成パララックスデザインを導入する設置手順..その1
シリウスサイトをパララックス仕様にカスタマイズ
シリウスカスタマイズTOP

 

 

 

CSS形成パララックスデザインを導入する設置手順..その1関連解説
パララックスをサイト記事カラム内に導入..2
シリウスサイトの幅に合わせて、パララックスレイアウトを記事カラムで設定する簡易型カスタマイズ手順です...
動的作動なパララックススクロールデザイン構造を組み込む工程
シリウスのMTML構造に動的作動、jquery採用でスクロールによる時差移動を指示し、背景画像のずれ、せり上がりの視覚効果を発生させるパララックススタイルへとカスタマイズする工程をご案内します CSS追記のご案内です
ハイソなパララックスデザイン
シリウスMTMLテンプレートをハイソな高級感をイメージしたパララックスデザインスタイルへカスタマイズしてみましょう