Google mapをレスポンシブにブログに埋め込む方法

カテゴリー：デジ

google mapの地図をブログに貼付するのは簡単です。マップから取得した iframeタグを挿入するだけ。
但し，マップのサイズがpx指定なので，レスポンシブに対応してません。スマホで見るとはみ出すことも。

そこで取得したタグをレスポンシブ対応に少し書き換えます。今回はテンプレートのcssをイジらずに，簡単にレスポンシブに対応する方法をまとめてみます。


スポンサーリンク



(1) Google mapからタグを取得
google mapで，ブログに埋込みたい地図を表示させる。縮尺も調整する。
左サイドメニューの [ 共有 ] をクリックすると，ウインドウが開く。[ 地図を埋め込む ] タブを選択し，iframeタグを取得する。
マップのサイズもここで指定できるが，あとで修正するので特にこだわらない。


(2) ブログ内に貼り付け
取得した iframe タグをブログ内に貼り付ける。width と height でマップのサイズが指定されている。

<iframe src="マップのＵＲＬ " width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>


(3) divタグを追加
この divタグで，iframeタグを囲む。

<div style="height: 0; overflow: hidden; padding-bottom: 75%; position: relative; width: 90%;">

width は横幅を表示範囲の割合で指定。
padding-bottom で横幅に対する縦の割合を指定する。正方形なら100%，4:3の割合なら75%，16:9の割合なら56.25%となる。


(4) iframeタグの修正
divタグにぴったりハマるサイズを iframeタグで指定するために，URL以外の部分を このstyleの記載に修正する。

style="border: 0; height: 100%; width: 100%;  top: 0; left: 0; position: absolute;"


Google ストリートビューの画像も同様に，メニューの [ 画像を共有または埋め込む ] から iframe タグを取得して，ブログに埋め込むことができます。


スポンサーリンク

河原や海辺でバーベキューを楽しむ

カテゴリー：アウトドア

お手軽にアウトドアが楽しむなら，バーベキューが一番。キャンプよりも少ない荷物で大丈夫です。晴れた日に事前準備なしでサクッと出発。
そんな お手軽バーベキューを楽しむ情報をまとめてみました。

バーベキューのちょっとしたコツ

• 魚のホイル焼き
  火加減調整ができないバーベキューでは，魚類は焦がしたり，網にくっついたりして難しい。アルミホイルに包んでホイル焼きにすると簡単に楽しめる。ホッケがイイ。
• ガーリックオイルフォンデュ
  ステンレスカップにオリーブオイルとニンニク，醤油を入れて，網の片隅に置いておく。程よく加熱されるとちょっとしたオイルフォンデュが楽しめる。エビや野菜などにあう。

• 荷物は厳選
  宿泊するキャンプと違って，準備や片付けに時間がかかるとゆっくり出来ません。多少の不便がアウトドアの良さと思って，本当に必要なグッズに絞る。
• 食材の下ごしらえ
  食材は事前にカットして，必要な分だけ持って行く。また，無駄な包装やパックも取り除いて，現地で出るゴミを減らす。
• トイレットペーパーで拭き取り
  炊事場がなく調理器具や食器を洗うことができない場合は，拭き取りができるトイレットペーパーやキッチンペーパーを持参すると便利。
• バーベキューグリルにアルミホイル
  バーベキューグリルの底にアルミホイルを敷いておくと，グリルの汚れが軽減できて掃除が楽。
• 焼き網の掃除
  焼き網に付いたコゲは食材から出た油なので，食べ終わった後も網を火にかけて焼き切ると掃除が楽。
• 火消し壺
  キャンプ場と異なり炭や灰を捨てることができないので，火消し壺相当のものに入れて持ち帰る必要がある。ダイソーで売っているオイルポットが使える。

バーベキューに必要なグッズ

グリル関連
焚き火台グリル，網，ロストル，鉄板，チャコスタ，炭，着火剤，ライター，トング，グローブ，火消し壺

タープ関連
タープ，ロープ，ペグ，ハンマー，テーブル，チェア

調理関連
箸，皿，コップ，串，包丁，まな板，料理ばさみ，さい箸，ターナー(フライ返し)，レードル(おたま)，アルミホイル

食材関連
クーラーボックス，飲料水，調味料 (塩，醤油，たれ，オリーブオイル，マヨネーズ，バター，ガーリックチップ)，食材

その他
水，バケツ，雑巾，ゴミ袋，ウェットティッシュ，キッチンペーパー，トイレットペーパー，ハンドソープ

バーベキューのできるスポット

□ 相模川 小倉橋

住所：
相模原市緑区小倉 331
津久井湖 城山ダムの下流側。

特徴：
かながわの景勝50選に選ばれている美しいアーチ型の橋で，この小倉橋下周辺の河川敷でバーベキューや水遊びができる。相模川の中では，高田橋より比較的穴場。
夏はライトアップされる。

駐車場：
河川敷に車の乗り入れができる。

トイレ：
橋近くの土手の上に水洗の公衆トイレあり。

近くのお店：
旧小倉橋から徒歩5分程度にセブンイレブンあり。

写真の見れるリンク：
相模原市観光協会
相模川の小倉橋バーベキュー！ Tami

便利なリンク

• 釣り場案内人サトシ！

スポンサーリンク




スポンサーリンク