01_item

space

01 SAMPLE

space

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

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

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

以下スペース調整(space.pngのheightサイズ)

space

01_item

space

01 SAMPLE

space

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

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

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

以下スペース調整(space.pngのheightサイズ)

space

01_item

space

01 SAMPLE

space

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

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

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

以下スペース調整(space.pngのheightサイズ)

space

02-R_toDOWN

space

02 SAMPLE

space

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

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

02-R_toDOWN

space

02 SAMPLE

space

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

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

02-R_toDOWN

space

02 SAMPLE

space

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

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

space

03 SAMPLE

space

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

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

以下スペース調整(space.pngのheightサイズ)

space

03 SAMPLE

space

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

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

以下スペース調整(space.pngのheightサイズ)

space

03 SAMPLE

space

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

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

以下スペース調整(space.pngのheightサイズ)
04_item

space

04 SAMPLE

space

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

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

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

04_item

space

04 SAMPLE

space

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

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

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

04_item

space

04 SAMPLE

space

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

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

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

space

05 SAMPLE

space

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

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

以下スペース調整(space.pngのheightサイズ)

space

05 SAMPLE

space

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

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

以下スペース調整(space.pngのheightサイズ)

space

05 SAMPLE

space

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

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

以下スペース調整(space.pngのheightサイズ)
06_item

space

06 SAMPLE

space

レスポンシブ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>

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

以下スペース調整(space.pngのheightサイズ)
06_item

space

06 SAMPLE

space

レスポンシブ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>

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

以下スペース調整(space.pngのheightサイズ)
06_item

space

06 SAMPLE

space

レスポンシブ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>

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

以下スペース調整(space.pngのheightサイズ)
07_item

space

07 SAMPLE

space

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

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

以下スペース調整(space.pngのheightサイズ)
07_item

space

07 SAMPLE

space

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

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

以下スペース調整(space.pngのheightサイズ)
07_item

space

07 SAMPLE

space

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

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

以下スペース調整(space.pngのheightサイズ)
08_item

08 SAMPLE

space

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

space

08_item

08 SAMPLE

space

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

space

08_item

08 SAMPLE

space

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

space

space

09 SAMPLE

space

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

以下スペース調整(space.pngのheightサイズ)

space

09 SAMPLE

space

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

以下スペース調整(space.pngのheightサイズ)

space

09 SAMPLE

space

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

以下スペース調整(space.pngのheightサイズ)
10_item

space

10 SAMPLE

space

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

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

以下スペース調整(space.pngのheightサイズ)
10_item

space

10 SAMPLE

space

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

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

以下スペース調整(space.pngのheightサイズ)
10_item

space

10 SAMPLE

space

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

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

以下スペース調整(space.pngのheightサイズ)

このエリアにも【固定ページ】利用で画像や文章を自由に掲載可能です。(非表示設定も可)
このテーマは、レスポンシブデザインです。 スマートフォン・タブレットでの表示ご確認はこちら→ ■ レスポンシブ確認 ■ Am I Responsive?
このレスポンシブテーマは、PCのブラウザの幅に反応、本文エリアやサイドエリアの幅が可変します。
全体の背景色の変更に伴い、以下の背景部分も順応します。
 【各タイトル・本文の背景、サイドバーエリア背景、フッター背景、メニュー色も微変化】 1600万色からご希望の色を簡単選択!(濃い背景色の利用時は文字色にご注意を)

上部グローバルメニューの色を18色からカンタン選択可能です!
【新着情報】は新規投稿タイトル自動表示。 NEWマークは表示日数の指定可能です。 (新着エリアの非表示設定も可能です)
以下【ピックアップ】 【タブパネル】 【カルーセル(画像移動)】は、
 【投稿記事】や【固定ページ】から、TOPに表示したい記事を簡単に設定できます。画像は【アイキャッチ画像を設定】で自動表示。(タブパネルは画像設定無し)
 (不要なエリアは設定しなければ全て非表示とできます)
上サンプルのスライドショーは無料プラグイン(レスポンシブ対応)を利用しています。(設置方法はマニュアルでご案内しています)

マニュアル付属で簡単! 快適なCMSでのサイト運営を今すぐ開始しましょう!
 
このテーマのご案内(ご購入)は→ WordPressテーマ【GrandTheme】

サービス

サービス-A

サービス-B

料金

事業実績

お客様の声

よくあるご質問

会社概要

  • このようなサイトを簡単に管理することが出来ます。
    コーポレートサイト、キャンペーンや新製品紹介サイト等、GrandThemeをご利用下さい。

    この【Gシリーズ】のテーマは、固定ページのテンプレートを選択する事が出来ます。
    基本カラムの他、2カラム(逆側サイドバー)、1カラム(サイドバー無し)、ページによってご希望のレイアウトをお選び下さい。
    又、【固定ページ】や【投稿】の
    TOPページの【ピックアップ】【タブパネル】【カルーセル】への表示も簡単設定で可能です。
    …続きを読む

  • このようなサイトを簡単に管理することが出来ます。
    コーポレートサイト、キャンペーンや新製品紹介サイト等、GrandThemeをご利用下さい。

    この【Gシリーズ】のテーマは、固定ページのテンプレートを選択する事が出来ます。
    基本カラムの他、2カラム(逆側サイドバー)、1カラム(サイドバー無し)、ページによってご希望のレイアウトをお選び下さい。
    又、【固定ページ】や【投稿】の
    TOPページの【ピックアップ】【タブパネル】【カルーセル】への表示も簡単設定で可能です。
    …続きを読む

  • このようなサイトを簡単に管理することが出来ます。 …続きを読む

  • このようなサイトを簡単に管理することが出来ます。 …続きを読む



Copyright© 【GrandThemeサンプル】 – P 003 All Rights Reserved.