TOP
Sirius.customize
Sirius.customize

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

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

 

すみません
記事はシリウスの初期TPを対処にしております...
レスポンシブ　ニューTPに関しては、今しばらくお待ちください..

 

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

 

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

 

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

 

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

 

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

 

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

 

 

導入手順へ進みます

 

ＨＴＭＬ記載

 

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

 

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

 

 

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

 

ＨＴＭＬへの記載は、以下を確認

 

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

 

<% 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>ｓｉｒｉｕｓ1</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>ｓｉｒｉｕｓｕ2</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>ｓｉｒｉｕｓｕ３</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>ｓｉｒｉｕｓｕ4</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>ｓｉｒｉｕｓｕ2</h3>タグは不要かと思われますので
作動確認後削除してください

 

 

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

<% textBody1 %>から

 

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

 

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

 

 

重要

 

シリウスの操作画面下にある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;ｓｉｒｉｕｓｕ4&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:"メイリオ","ＭＳ Ｐゴシック",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:"メイリオ","ＭＳ Ｐゴシック",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形成パララックスデザインを導入する設置手順..その1関連解説
パララックスをサイト記事カラム内に導入..2
シリウスサイトの幅に合わせて、パララックスレイアウトを記事カラムで設定する簡易型カスタマイズ手順です...
スマホでも動く動的パララックス記事内導入３
シリウスの記事内にスクリプトを採用しパララックス効果を演出するカスタマイズ.. ただし、静的では無く動的...画像が少しせり上がり...よく使わる手法です... 当サイトは他のスクリプトが影響
動的作動なパララックススクロールデザイン構造を組み込む工程
シリウスのＭＴＭＬ構造に動的作動、jquery採用でスクロールによる時差移動を指示し、背景画像のずれ、せり上がりの視覚効果を発生させるパララックススタイルへとカスタマイズする工程をご案内します CSS追記のご案内です
ハイソなパララックスデザイン
シリウスＭＴＭLテンプレートをハイソな高級感をイメージしたパララックスデザインスタイルへカスタマイズしてみましょう