contact_008
クリニック、歯科医、鍼灸院などに便利な診療時間の表が入ったコンタクトブロック
クリニックなどに便利な１週間の曜日別診療予定表をテーブルで組み込みました。テーブルで作っていますので、文字として編集可能です。時間の区分変更や診療・休診の設定も簡単です。
MORE
contact_007
GoogleMapとともに多くの情報を掲載したいときに使えそうなパターン
ロゴや住所、営業時間など掲載情報が多くても対応可能な大きなレイアウト。右にGoogleMapを表示しています。幅全体に色をつけています。
MORE
contact_006
電話・メール・申し込みの３つをSiGNで作ったボタンで並べる
width指定したブロックにボーダーを設定。そして、３つ並べるボタンはwidth指定した画像です。基本となるボタンの色と、一つだけ色を変えて目立つようにしたい時を想定しました。
MORE
contact_005
ブロック自体のwidth指定をしたブロックで半分は余白なしで写真をレイアウト
ブロックの背景に色をつけてブロックを認識しやすいようにするために、CSSでブロック事態のwidth指定をしています。ブロックの余白設定はゼロに、そして２分割としています。右の文字情報はカラム２に対して設定したpaddingで上下左右に余白が入るようにしています。
MORE
contact_004
３つのアクションに誘導したい時に使えそうなすっきりレイアウト
１カラムの中央配置＋３カラムの２ブロックの組み合わせ。
基本は大きく表示している電話での問い合わせを歓迎している想定。電話以外で３つのコンバージョンへ誘導したい時に使えそうです。
MORE
contact_002
ブロック自体のwidth指定をして中央配置にしたパターン
背景に色をつけるにはブロックのwidth指定が必要になります。パソコンでは任意のピクセル数で指定し、スマホではそのままだとデバイスの幅より大きくなってしまうのでスマホ用のCSSで指定しなおす必要があります。
MORE
contact_001
左右違いのブロックでFacebook pluginを表示
左の幅広側にロゴ、キャッチなどと一緒に「電話番号」と「問い合わせへのバナー」を並べています。電話番号とお問い合わせバナーはSiGNで作っており、パソコンでは幅50%、スマホでは幅100%に設定しています。
MORE
