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

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

  • このトピックには2件の返信、2人の参加者があり、最後にnmkdにより2ヶ月、 4週前に更新されました。
3件の投稿を表示中 - 1 - 3件目 (全3件中)
  • 投稿者
    投稿
  • #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ではヘッダーメニュー程度のサイズになります。

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

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