トップページへ

サンプル

HOME > サンプル

100%表示用テンプレートについて1

通常の「page.php」テンプレートから「.container」クラスを外したテンプレートです。
通常の固定ページの幅で作成したいときは、その都度「.container」クラスで囲んでください。

100%表示用テンプレートについて2

「.container」ではなく「.container2」のちょっと幅広にできるクラスを使用しても大丈夫です。

100%表示用テンプレートについて3

こちらは「.container-fluid」のクラスで囲んでいます。「.container2」よりも幅広で左右に15pxだけpaddingが入っています。

100%表示用テンプレートについて4

「.container」「.container2」「.container-fluid」のどのクラスでも囲んでいない場合はこんな感じです。

背景画像が必要な場合

背景画像が必要な場合は「.page-bgimg」クラスで囲んでください。
その際、背景画像のurlを「.page-bgimg」クラスのところに書いてください。

 

背景画像が必要な場合2

「.page-bgimg-w」のクラスのとき文字の色が白になります。

100%で画像を入れたい場合

そのまま普段の感じで画像を入れたら大丈夫です。

PCで画像上に文字、スマホで画像下に文字

全体を「.page-bgimg-pc」クラスで囲み、
画像を「.bg-pc」で、テキストを「.bg-pc-text」で囲んでください。

 

PCで画像上に文字、スマホで画像下に文字2

全体を「.page-bgimg-pc」クラスで囲み、
画像を「.bg-pc」で、
文字を白くする場合はテキストを「.bg-pc-text-w」で囲んでください。
スマホでは文字は黒くなります。

©2021 LIDGEHAUS -Shintanigumi-.