100%表示用

HOME > 100%表示用

container幅

「container」で囲むとこの幅です。

container2幅

「container2」で囲むとこの幅です。

container-fluid幅

「container-fluid」で囲むとこの幅です。

背景画像

背景画像を付けたい要素を「div」で囲んで、そのdivに「class=”page-bgimg” style=”background-image: url()”」を付けてください。
「url()」の()にWordPressにアップロードした画像URLを入れてください。

PCで100%にする場合、画像の幅は1900px程度あるとボケづらいです。

これは「container」幅です。

背景画像では「pc_画像名.jpg」「sp_画像名.jpg」の切り替えは効きません。

背景画像 背景が暗い場合

背景画像を付けたい要素を「div」で囲んで、そのdivに「class=”page-bgimg-w” style=”background-image: url()”」を付けてください。
「url()」の()にWordPressにアップロードした画像URLを入れてください。

「page-bgimg-w」のクラスだと、テキストの色が白くなります。aタグなどではテキストの色が変わらない場合があります。

この背景画像はわざとぼかしています。画像サイズが小さいからボケたとかではないです。

これは「container2」幅です。

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

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

 

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

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

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

そのまま普段の感じで画像を入れたら大丈夫です。(画面幅以上のサイズで画像を作成してください。)
画像が画面幅以上のサイズで作られていない場合、100%表示にはならず、画像本来のサイズまでしか幅が埋まらないと思います。

背景色

背景色を付けたい要素を「div」で囲んで「style=”background-color: ;”」で囲んでください。
style=”background-color: ;”」の「: ;」の間に色の指定をしてください。
フォトショップのカラーピッカーで色を選ぶと、RGBの下に「#ffffff」と出るところがあるので、これをコピペするといいと思います。

来場予約気になるお家のコト
お問い合わせください
イベント・見学会家づくりが楽しくなる
ワクワク見学会!