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

[nmkd]

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

（参考サイト）
http://www.takahashi-dentist.com

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

[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は書き換えないで〜

[nmkd]

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

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

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

[タマキチ]

■nmkdさんへ

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

■開発の方へ

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

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

• この返信は4年、 2ヶ月前にタマキチが編集しました。
• この返信は4年、 2ヶ月前にタマキチが編集しました。

Attachments:

You must be logged in to view attached files.

[タマキチ]

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

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

[投稿者]

投稿