【GrandThemeサンプル】 – P 003

※パララックス（parallax　視差効果）スクロール
スクロールの背景移動スピードを変える事で奥行感を出しています。
PCテンプレート（ブラウザ幅769px以上）にて動作します。
768px以内はPC閲覧では背景固定。タブレットやスマホは通常スクロールです。

各背景画像は【固定ページの編集】でアイキャッチ画像を選択するだけの簡単設定。
ひとつおきでの背景設定や、テクスチャ（模様）や色のみにしたりするのもお勧めです。

★TOPのパララックスエリア各ブロックでアイテム（画像）を移動させる事が出来ます。
※PCテンプレート（ブラウザ幅769px以上）、TOP（index）ページのみにて動作。
768px以内のPC閲覧、タブレットやスマホではアイテムは非表示となります。

この各ブロックの通常のページ編集はもちろん、
使用する背景画像の構図に合わせ、左寄せ、右寄せ等、
タグで簡単に（この文章の長方形エリアを）設定可能です。
TOPページで「続きを読む」としたい場合は、以下のように、
【「続きを読む」タグ】（more）挿入で個別ページへリンクします。

見出しや長方形エリアの設定一覧は以下をご覧下さい。 …続きを読む

各ブロックの上下の高さ調整も可能です。（移動アイテム追加の場合は変更不可※）
初期設定では全ブロック共通で、
◎パソコンでの最低高さ768ピクセル、
◎タブレットでの最低高さ500ピクセル、
◎スマホでの最低高さ200ピクセル、
で設定しています。

ブロック内の掲載内容量が上記よりも多ければ、自動的に上下の高さは長くなり、背景画像の大きさも可変します。
※パララックスへの移動アイテム（画像）の追加をする場合には
768ピクセルを超える高さに変更するとアイテムが出現するスクロール箇所に
ズレが生じますので、全ブロック初期の高さ（768ピクセル）でご利用下さい。

■パララックスへの移動アイテム（画像）の追加

TOPページのパララックスエリアの各ブロックでアイテム（画像）を移動させる事が出来ます。
アイテムの開始位置はご自由です。画像でご自由に作成して下さい。（透過エリアを含めたPNGかGIF）
全ての動きはこちらのデモサイトでご確認頂けます。→ 【P003 デモサイト】
※PCテンプレート（ブラウザ幅769px以上）で、TOPページのみにて動作します。
768px以内のPC閲覧、タブレットやスマホではアイテムは非表示となります。

設定タグ一覧は、 …続きを読む

パララックスのブロック数は10、右のリンクで各移動が可能です。
ブロックを個別に非表示にすることも【非公開】とするだけで可能です。
※最低1ブロックの表示はして下さい。
※パララックスへの移動アイテムご利用の場合は途中のブロックが抜けると
　以降で移動アイテムの出現にズレが生じますので下ブロックから非表示として下さい。
右のリンクエリアは全て非表示（未使用）とする事も可能です。
display: none;を追加するだけです（マニュアルにて以下箇所ご説明）。

/* === TOP パララックスナビ === */
#bgTOP .menu {
background:url(“images/h_bg.png”) repeat;
display: none;
}

レスポンシブCMSのテーマなので、パソコン、タブレット、スマートフォンにレイアウト対応します。
パララックスの背景画像の動きと移動アイテムは、PC用のみの効果ですのでご注意下さい。
タブレットとスマホは背景画像がみづらく、又移動アイテムも非表示となるので、
掲載内容（本文）下に、それぞれ個別のアイキャッチ画像を以下タグで掲載できます。
掲載したいブロックの固定ページ編集画面で設定して下さい。
（このサンプルサイトの1ブロック目にデモ画像設定しています）

★タブレット用　（画像サイズ：幅768ピクセル以上、高さ自由）■デモ画像サイズ
<div class=”p_tab_img”><img src=”http://◎◎◎.jpg” /></div>
★スマートフォン用　（画像サイズ：幅640ピクセル以上、高さ自由）■デモ画像サイズ
<div class=”p_sp_img”><img src=”http://◎◎◎.jpg” /></div>

※タッチデバイス（タブレット、スマートフォン等）でパソコン用のテーマを表示した場合、
パソコンのスクロール量とは異なる為、パララックスの箇所は、
スクロールすると各画像の上下間にずれ（空き）が生じます。
空きを目立たせない方法として、背景設定を一つおきにしたり、
天地部分がサイトの背景色に近い画像や透明化等でご利用する事をお勧めします。

【パララックスエリアの背景で使用する画像サイズ】
使用する画像サイズはご自由です。
サンプルは1500×1125ピクセル（縦横比4：3）程度を使用しています。
閲覧者ブラウザの横幅に応じて画像はワイドに拡大可変しますので、
大きな画像の方が画質は綺麗ですが、閲覧は重くなります。
ご利用になる絵柄に応じてサイト表示ご確認の上、大きさはご決定下さい。

縦横比は4：3にする必要はありませんし、各画像違うサイズでもOKです。
5：5や、掲載する内容量によっては縦長の画像でも良いでしょう。

【スライドショーの追加利用も可能です】
※ワイド100%指定の場合、画面の左右には（以下スライドショーのように）スペースが入ります。
※パララックス移動アイテム追加する場合はブロックの高さが768ピクセルを超えないようご注意下さい。
ご利用はプラグイン【Easing Slider】がレスポンシブ対応でお勧めです。他ページや記事、複数設置も可能です。

TOPページはパララックスのみ(下のエリアは全て非表示)で良いという場合は、
ダッシュボードの【外観】＞【テーマの編集】＞
メインインデックスのテンプレート (index.php)
を開き、<!–パララックスエリア–ここまで–>の下を全て消して、
</body>
</html>
と記載して、下ボタンで【ファイルを更新】して下さい。

テーマはご自由にカスタマイズ（改造）して頂いて構いません。
ただカスタマイズに関するご質問についてはお答え出来ませんのでご了承下さい。
カスタマイズご依頼や、制作が困難な場合等は、制作サービスを承っておりますので、
どうぞお気軽にご相談下さい。

【CMSホームページ制作★　GFW】
（テーマご購入者様は1テーマご購入料金分をお値引させて頂きます）
※レスポンシブでは無く、閲覧環境デバイス（機器）に応じてのテーマ振り分けもご依頼下さい。