WordPress

WordPress ユーザー必見!Google Mapで地図の見た目を綺麗に:枠線を追加、角を丸くする

広告:ページ内にてアフィリエイト広告を利用しています。

Google Map で地図表示に枠線を付ける

WordPressを使用している方で、Google Mapで地図を表示させたいと考えている方も多いでしょう。しかし、地図が単調な見た目になってしまうことがあります。綺麗な見た目で表示したいですね。

ポイント

本記事では、

Google Mapの地図に枠線を追加し、角を丸くする方法を紹介します。

地図の見た目をアップグレードして、ユーザーにとってより魅力的なものにしましょう。

おすすめ副業

\ココナラ成功パターンを詳しく見たい方は こちら をクリックしてください/

PR

CSS を使って画像に枠線を付けたり、角を丸くするサンプル

■ Google Map で枠線を付ける

Google Map を中央寄せして、CSS で枠線を付けています。

■ Google Map で枠線を付けて角を丸くする

Google Map を中央寄せして、CSS で太い枠線を付けて角を少し丸くしています。

CSS を使って画像に枠線を付けたり、角を丸くする方法

Google Map を利用して、枠線を付けたり角丸にする方法です。

■ Google Map を利用する方法

Step.1 Google Map から HTML を取得する

Google Map の画面

Google Map で左上の小窓に「住所」、または、「ランドマーク」、または「店名」などを入力して虫眼鏡で検索して目的の場所を見つけます。

画面左上のメニュー(横三本線のアイコン)をクリックします。メニューが現れますので「地図を共有または埋め込む」をクリックします。

Google Map の HTML を取得する画面

「地図を埋め込む」 をクリックし、左上のプルダウンでサイズを選び、「HTMLをコピー」 表記をクリックします。

(クリップボードに、埋め込み用のコードをコピーされます)

Step.2 Google Map を記事に貼る

カスタム HTML ブロックに Google MAPのコードを埋め込む画面

ブロックを 「カスタム HTML」 で指定し、先ほどの 貼り付け用コード を貼り付けます。

■ Google Map に枠線をつける

枠線を表示したい場合は、HTML の style="border:0;" を style="border:1px solid;" に書き換えます。

■ 枠線を付ける場合の書き換え例

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2624.1826142657083!2d2.2928388157398545!3d48.87379520757581!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e66fec70fb1d8f%3A0xd9b5676e112e643d!2z44Ko44OI44Ov44O844Or5Yex5peL6ZaA!5e0!3m2!1sja!2sjp!4v1652617185232!5m2!1sja!2sjp" width="600" height="450" style="border:1px solid;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

Google Map の埋め込みコードにはすでに style="border:0;" で CSS が埋め込まれていますので、直接書き換えます。

枠線を付けるプロパティは「border」です。線の太さ、色、線の種類を指定できます。

実践を引く

CSS:「border : 1px solid

「1px」が線の太さ、「solid」が線の種類(実践)を指定しています。

太い赤い破線を引く

CSS:「border : 10px dashed #ff0000」

「10px」が線の太さ、「dashed」が線の種類(破線)、「#ff0000」で赤色を指定しています。

border で引ける線の種類

border プロパティでは、4種類の線を引くことができます。

実線:solid
 
2本線:double
 
破線:dashed
 
点線:dotted
 

■ Google Map を角丸表示する

枠線を表示したい場合は、HTML の style="border:0;" に "border-radius: 30px" を追加します。

■ 枠線を付ける場合の書き換え例

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2624.1826142657083!2d2.2928388157398545!3d48.87379520757581!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e66fec70fb1d8f%3A0xd9b5676e112e643d!2z44Ko44OI44Ov44O844Or5Yex5peL6ZaA!5e0!3m2!1sja!2sjp!4v1652617185232!5m2!1sja!2sjp" width="600" height="450" style="border:1px solid; border-radius: 30px" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

Google Map の埋め込みコードにはすでに style="border:0;" で CSS が埋め込まれていますので、直接書き換えます。

角丸にするプロパティは「border-radius」です。丸みを px または % で指定します。

角丸(30px)にする

CSS:「border-radius: 30px

角丸の大きさを 30px で丸めています。

角丸(30%)にする

CSS:「border-radius: 30%

角丸の大きさを 30%(パーセント指定)で丸めています。

円にする

CSS:「border-radius: 50%

角丸の丸みを 50% にすると円になります。(もとが正方形の場合は真円になります)

CSS を使うことで、いろいろな表現・デザインができて楽しいですね。

WordPress もっと!お役立ちテクニック

WordPress のお役立ちテクニックはこちら

まとめ:Google Mapで地図の見た目を綺麗に!

CSS では、枠線をつけたり、角丸表示にすることができる。

(Google Map 以外にも応用できます)

ポイント

  • 枠線を付ける場合は「border」プロパティを使う
  • 角丸にする場合は「border-radius」プロパティを使う

多様なデザインで表現することができますので、記事のデザインが楽しくなりますね、

40代・50代「会社員におすすめ」の在宅でできる副業5選

40代・50代「会社員におすすめ」の在宅でできる副業5選(初心者でもできる)

40代、50代だからこそ気が付く、不安に思う将来設計、しかし今から大きなチャレンジは難しい。投資もリスクが多い。いまこそやってみたいのが「副業」です。本記事では40代、50代におすすめの副業5選を紹介します。

続きを見る

20代・30代「専業主婦におすすめ」の在宅でできる内職・副業3選

20代・30代「専業主婦におすすめ」の在宅でできる内職・副業3選(初心者でもできる)

20代、30代の主婦にとって、これからの人生設計、お金の心配は少なからずありますね。20代、30代の主婦が不安に思うお金の問題を少しでも解決するべく、初期投資が無い(または少ない)主婦におすすめの副業ができれば安心ですね。記事では、20代、30代専業主婦におすすめの副業3選を紹介します。

続きを見る

地方がチャンスのおすすめ副業を紹介!

地方で快適に暮らす!地方がチャンスのおすすめ副業を紹介!在宅でパソコンがあれば「できる」副業

都会は住みにくい!地方の方が自然もあり、ちょうど規模の街で素敵に暮らすのは人生設計として最高ですね。しかし地方は本業の給料が低いのがネック、そこで是非お勧めしたいのがインターネットでできる副業です。本記事では、地方で快適に暮らす!おすすめ副業を紹介します。ゆるーくまったり人生過ごしたいですね。

続きを見る

この副業
アフィリエイトスクール
ノートパソコン
もっと WordPress のノウハウを知りたいときは

WordPress の情報、テクニック一覧はこちらをクリック!

クリックアイコン
PR
―― 今日のおみくじ ――

第 53 番

”末吉"


今日のメッセージ

「好き」はいつしか「愛」になる。かけがえのない「愛」になる。
ブログの始め方
レンタルサーバー
WordPress
AFFINGER

ブログランキング・にほんブログ村へ  

Presented By Boon Boon Blog .Com

広告の設置・収入について

当サイトは Amazonのアソシエイトとして、適格販売により収入を得ています。

当サイトは Google アドセンスを利用し、広告により収入を得ています。

当サイトは ASP が提供するサービスを利用し、広告、適格販売により収入を得ています。

電気通信事業法改正に伴う表記