全幅デザインに固定背景
パララックス風のデザインが作れます。
中身のコンテンツの形やデザインは様々に変えられます。
コピペでそのまま使う場合、文字数があまり違うと上手く表示されないときがあるので注意。
背景画像は著作権フリーのものを使うように注意しましょう。
お気軽にお問合せください。
a要素を使って、クリックするとスマホなどからすぐにメールや電話できるようになっています。
全幅固定背景デザインの構成
一番外側のdiv.wide-wrapで全幅にし、縦幅も指定しています。
.wide-fixedで背景のスタイル、idごとに背景をつけます。
次のdiv.column-colorでコンテンツのボックスを作り、色や形を変えたりします。
div.column-colorのbefore要素を使って、形を足したり、傾けたりします。
div.content-boxで中身の文章の位置を調整したり、傾かないようにします。
アクセス
- 〇〇駅徒歩8分
- ＪＲ東海道本線(東京-熱海)
- 〇〇電鉄
- 小田急〇〇線
- 〇〇バス 〇〇徒歩3分
- 〇〇駅―〇〇行
- 〇〇駅南口―〇〇駅行
スマホではパララックスできない
スマホでは背景固定のCSSが働きません。
そのため、ページ全体の背景を固定します。
パンくずリストや、背景をつけていないコンテンツには背景をつけましょう。
交互に並べる
背景が画像固定のコンテンツと単色背景のコンテンツを交互に並べます。
同じ縦幅にするとさらにバランスが良くなるでしょう。
背景の色が様々な場合は、単色背景の色は一つに絞った方が全体がまとまります。
固定背景にボタンのみ(div.column-colorを消してボタンにする)のデザインもシンプルで良いです。
PR Blocks(Beta)
人物説明を簡単に入力できます。
FontAwesomeのアイコンか、画像かを使えます。
全体のリンク先を設定することが出来ます。
スタッフ２
アイコンや枠の色
フォントの色や大きさを変える場合や
全体に枠や背景色をつける場合は追加CSSでカスタマイズします。
スタッフ３
段落にはできません。
短い説明に向いています。
画像の大きさを変えたり
枠をつけるなどの装飾を追加CSSでカスタマイズできます。
VK PRコンテンツも使える
こちらを使っても、画像とメディアのようなデザインが作れます。
違いは、こちらの方がCSSで配置などを変更しやすい点です。
フォントの色、ボタンの色やFontAwesomeアイコンなどがエディタで設定できますが、
枠をつけたり、影をつけたりする場合は追加CSSでカスタマイズします。
全体を全幅背景固定にしてこのようなデザインにすることもできます。
〇〇〇〇株式会社
- 所在地
- 〒2xx-00xx神奈川県〇〇市〇〇5xx
- 電話
- 04xx-5x-4xxx
- フリーダイヤル
- 0120-3xx-4xx
- ファックス
- 04xx-5x-1xxx
- メール
- support@〇〇〇.jp
- 代表者
- 不動産 太郎
- 事業内容
- 不動産売買・賃貸仲介及び管理業
- 建築・リフォーム業