VWSとは フォーラム Lightning [ 質問者返信待ち ] Google Mapの全幅表示について

[ 質問者返信待ち ] Google Mapの全幅表示について

5件の投稿を表示中 - 1 - 5件目 (全5件中)
  • 投稿者
    投稿
  • #39166

    nmkd
    参加者

    Lightning Proにデフォルトスキン「Origin II」を使用しています。
    TOPページにGoogle Mapを設置していますが、全幅表示は可能でしょうか。
    CSSカスタマイズが必要であれば記述をいただけると幸いです。
    念の為参考サイトのURLを送ります。

    (参考サイト)
    http://www.takahashi-dentist.com

    このサイトの様にGoogle Mapを全幅表示(かつレスポンシブ対応)したいです。
    恐れ入りますがご教授いただけると幸いです。

    #39197

    Vektor,Inc
    キーマスター

    1. 該当のページを1カラムに指定
    2. Outerブロックを設置。
    3. Outerブロックレイアウト設定で全幅を指定
    4. Outerブロック左右の余白は「アウターエリア内に余白を追加する」
    5. Outerブロック上下余白はなし
    6. Outerブロック内にHTMLブロックを入れてGoogleMapの地図をiframeで埋め込み
    7. 地図以外のところに影響が出ないように Outer ブロックの 高度な設定 でcssクラス test を追加
    8. 外観 > カスタマイズ > 追加CSSで

    .test.vk_outer.vk_outer-paddingLR-use {
    	padding-left:0;
    	padding-right:0;
    }
    .test.vk_outer.vk_outer-paddingLR-use iframe {
    	width:100% !important;
    }

    でいけると思います。上手く行かない場合は下記参照の上必要に応じて調整してみてください。

    全てのWordPressテーマで使える!デザインをピンポイントで変更する方法 〜親テーマのCSSは書き換えないで〜

    #39245

    nmkd
    参加者

    ご返答ありがとうございます!
    無事に設定が行え、動作確認まで完了しています。
    ありがとうございます!!

    何度も大変申し訳ございません。
    縦幅が極端に短くなっておりまして、サイズを変更したいです。
    縦幅の調整方法をご教授いただけないでしょうか。
    ※スマホでは見やすいサイズではありますが、PCではヘッダーメニュー程度のサイズになります。

    恐れ入りますが何卒よろしくお願いします。

    #43274

    タマキチ
    参加者

    ■nmkdさんへ

    縦幅の調整は下記のCSSを追記すればよいかと思います。
    .gmap.vk_outer.vk_outer-paddingLR-use iframe {
    height: 任意の数字px;
    }

    ■開発の方へ

    googlemapを指示通りに挿入してみましたが、添付画像のように下部に余白ができてしましました。
    調べてみて下記のCSSを追記することで解決できました。
    .vk_outer .vk_outer_container {
    line-height: 0 !important;
    }

    このやり方が正しいか分からないのですが、もし可能でしたら改修対応願います。

    • この返信は1ヶ月、 2週前にタマキチが編集しました。
    • この返信は1ヶ月、 2週前にタマキチが編集しました。
    Attachments:
    You must be logged in to view attached files.
    #43283

    タマキチ
    参加者

    前回の返信に間違いがありましたので訂正させていただきます。
    .gmap.vk_outer.vk_outer-paddingLR-use iframe

    .test.vk_outer.vk_outer-paddingLR-use iframe

    前の投稿の例ではcss名はtest出なくてもよいので私はgmapにしていました。まぁなので任意のcss名でよいかと思います。

5件の投稿を表示中 - 1 - 5件目 (全5件中)
  • このトピックに返信するにはログインが必要です。