外部サービス連携 – どんどん！ブログノウハウ紹介ブログ

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

Boon ☆《ブログ魂》 — Mon, 16 May 2022 11:00:00 +0000

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

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

本記事では、Google Mapの地図に枠線を追加し、角を丸くする方法を紹介します。地図の見た目をアップグレードして、ユーザーにとってより魅力的なものにしましょう。

＼自宅でする副業で月に〇万円の収入増があると嬉しすぎる！／

ココナラ副業を始めよう

【記事】ココナラで成功する方法はこちら

実際に４か月でプラチナランク（売り上げ10万円以上）を達成した筆者が、ココナラで成功する方法を詳しく解説します。こちらをクリックしてください

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

■ Google Map で枠線を付ける

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

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

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

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

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

■ Google Map を利用する方法

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

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

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

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

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

Step.2 Google Map を記事に貼る

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

■ Google Map に枠線をつける

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

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

style="border:1px solid;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade">

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

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

実践を引く

CSS：「border : 1px solid」

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

太い赤い破線を引く

CSS：「border : 10px dashed #ff0000」

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

border で引ける線の種類

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

実線：solid

２本線：double

破線：dashed

点線：dotted

■ Google Map を角丸表示する

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

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

style="border:1px solid; border-radius: 30px" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade">

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 のお役立ちテクニックはこちら

【自宅で出来る・一人で出来る】ブログ・アフィリエイトで始める副業

ブログ

比較的安定した収入がある会社員が、月々プラスアルファの収入を得たいと思った時に最もおすすめしたい副業は「ブログ・アフィリエイト」です。

「ブログ・アフィリエイト」とは、自分のブログを開設し企業の広告を貼ることで、読者が広告をクリックして商品を購入した場合に紹介報酬が手に入る副業です。

人気の出るサイトであれば、大きな収益が期待できることも。ストック型の収益モデルのため、作業時間以上に収益をあげられる可能性がある副業です。定年して会社を退職した後も、収入を確保し続けることができます。

ブログ・アフィリエイトの始め方がわからない場合でも手順通りやれば大丈夫、具体的な手順はこちらを参照してください。

＼１日早く始めれば、１日早く収入が増える／

ブログ・アフィリエイトの始め方はこちらから

プラスアルファの人生は、始めなければ始まらない

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

CSS では、枠線をつけたり、角丸表示にすることができる。（Google Map 以外にも応用できます）

ポイント

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

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

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

40代・50代「会社員におすすめ」の在宅でできる副業５選はこちら

ドンドン！副業情報局

40代・50代「会社員におすすめ」の在宅でできる副業５選（初心者でもできる） | ドンドン！副業情報局４０代・５０代の会社員、今の給料で満足して生活できていますか？さらに、老後に不安なく貯金できていますか？４０代、５０代だからこそ気が付く、不安に思う将来設計、し...

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

ドンドン！副業情報局

20代・30代「専業主婦におすすめ」の在宅でできる内職・副業３選（初心者でもできる） | ドンドン！副業情... ２０代、３０代の主婦にとって、これからの人生設計、お金は心配ごとの一つです。２０代、３０代の主婦が不安に思うお金の問題を少しでも解決するべく、初期投資が無い（ま...

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

本サイトは「どんどん情報局」が運営しています。

著作者：Boon ☆

どんどん情報局はメディア記事の執筆を通して世の中に有益な情報を発信することを心がけています。

「どんどん情報局」の紹介はこちら

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

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

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

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

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

【WordPress】自分の Twitter （タイムライン）をサイドバーに表示する方法

Boon ☆《ブログ魂》 — Wed, 13 Jan 2021 14:50:00 +0000

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

Twiiter のタイムラインをサイトのサイドバーに表示する方法です。

タイムラインを表示することで、新着情報などをツイートした情報をサイトでも表示できますので、読者に新しい情報の提供価値が生まれます。

＼自宅でする副業で月に〇万円の収入増があると嬉しすぎる！／

ココナラ副業を始めよう

【記事】ココナラで成功する方法はこちら

Twitter のタイムラインを埋め込んだイメージ

Twitter のタイムラインをサイトのサイドバーに埋め込むと、自分のツイート（タイムライン）をサイトで表示します。

比較的簡単に埋め込むことができますので、その方法を紹介します。

なんか変なことつぶやいたら表示されちゃいますね！

Twitter のタイムラインをサイトのサイドバーに表示する方法

STEP

Twitter のタイムライン URL 発行ページにアクセスする

Twitter からタイムラインを表示する URL を発行してもらう必要がありますので、発行サイトにアクセスします。

https://publish.twitter.com/

こちらにアクセスすると、Twitter のアドレスを入力するページを表示します。

「Enter a Twitter URL」にあなたの Twitter の URL を入力して、願いを込めて Enter キーを押してください！（別に願いこめなくても動きますけど！）

STEP

タイムラインを選択する

「Embedded Timeline」をクリックします。

STEP

オプションを設定します

「set customization options.」をクリックします。

オプションを設定します。

Height (px)	高さです。ディフォルト（入力なし）の場合、やたらめったら縦に長い表示になりますので適切な高さ（400～600推奨）を入力します。
Width (px)	横幅です。ディフォルトから変更不要です。
How would you like this look？	背景色です。「Light」と「Dark」がありますが、ディフォルトの「Light」を推奨します。「Dark」を選ぶと真っ黒です！
What language would you like to display this in？	ディフォルトの「Automatic」のままで変更不要です。
Opt-out of tailoring Twitter	チェック不要です。

要するに「高さ」だけ設定して 「Update」ボタンをクリックします。

STEP

URL をコピーする

「Copy Code」ボタンをクリックして、発行された URL をクリップボードにコピーします。

STEP

WordPress のウィジェットに貼り付けます

WordPress 管理画面で、サイドバーに「テキスト」ウィジェットを配置し、先ほど取得した Twitter のコードを（テキストタブの入力フィールドに）貼り付けます。

公開して完了です！

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

まとめ

WordPress で Twitter のタイムラインをサイドバーに埋め込む方法は超簡単です。

Twitter からタイムラインのコードを払い出す
サイドバーのテキストウィジェットにコードを貼り付ける

バンバンつぶやいて、サイトに表示しちゃいましょう！

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

40代・50代「会社員におすすめ」の在宅でできる副業５選はこちら

ドンドン！副業情報局

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

ドンドン！副業情報局

アフィリエイトスクールのすすめ

アフィリエイト初心者や経験者にとって、正しいスキルを学ぶことは成功につながる重要な要素です。間違った手順でブログ運営をしていたらいつまでたっても成功しません。正しい知識はスクールで身に着けるのが一番です。

＼説明会参加無料／

おすすめスクールはこちらから

おすすめアフィリエイトスクールはこちら

１日早く始めれば、１日早く収益化できる。

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

本サイトは「どんどん情報局」が運営しています。

著作者：Boon ☆

どんどん情報局はメディア記事の執筆を通して世の中に有益な情報を発信することを心がけています。

「どんどん情報局」の紹介はこちら

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

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

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

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

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

【プラグイン不要】WordPressで簡単！Google Mapをブログ記事に埋め込む方法

Boon ☆《ブログ魂》 — Tue, 19 May 2020 15:25:12 +0000

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

WordPress でブログを書く上で、読者にとって役立つ情報を提供することは重要です。

例えば、場所や地図を示すことも一つの魅力的な表現方法ですね。Google Map は簡単に記事に埋め込むことができます。Google Map が用意している埋め込み用の URL をコピー＆ペーストするだけで表示することができる簡単機能です。

本記事では、WordPress で Google Mapを埋め込む方法を紹介します。地図を記事に埋め込むことで、読者に渡す襄王が増えて良い記事になりますね。

＼自宅でする副業で月に〇万円の収入増があると嬉しすぎる！／

ココナラ副業を始めよう

【記事】ココナラで成功する方法はこちら

Google Map の埋め込み例

「凱旋門」の地図を埋め込んでみます。

パリの地図を見ると楽しくなりすぎて、もろもろ止まらなくなるので危険ですね。

Google Map を埋め込む方法

プラグインを使う方法もありますが、あまりプラグイン漬けになっても、WordPress が「わけわかめ」になりますので、直接貼る方法です。

（直接貼る方法が圧倒的に簡単です）

■ Step.1 Google Map で埋め込みたいページを表示する

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

■ Step.2 埋め込みコードを取得する

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

「地図を埋め込む」をクリックします。

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

これで、クリップボードに、埋め込み用のコードをコピーします。

■ Step.3 WordPress の任意の場所に貼り付ける

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

埋め込む大きさ（大・中・小）

埋め込みURLを取得する際、大きさ「大」「中」「小」を選べます。

それぞれの大きさで埋めこんだサンプルです。

大きさ「大」の場合

大きさ「中」の場合

大きさ「小」の場合

サイト、記事の目的沿って使い分けてください。

枠線（ボーダー）をつける方法

そのまま URL を張り付けた場合は、地図の周りに枠線（ボーダー）が表示されません。

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

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

style="border:1px solid;" allowfullscreen="" loading="lazy">

一か所書き換えるだけで枠線を付けることができて簡単です。

ポイント

Google Map に枠線を付ける、角を丸くする方法

【自宅で出来る・一人で出来る】ブログ・アフィリエイトで始める副業

ブログ

ブログ・アフィリエイトの始め方がわからない場合でも手順通りやれば大丈夫、具体的な手順はこちらを参照してください。

＼１日早く始めれば、１日早く収入が増える／

ブログ・アフィリエイトの始め方はこちらから

プラスアルファの人生は、始めなければ始まらない

まとめ：Google Mapをブログ記事に埋め込む方法

Google Map の地図をサイトに埋め込む方法です。

ポイント

Google Map から HTML を取得する
HTML をサイトに埋め込む

めっちゃ簡単ですね。

Enjoy！「あんなとこへの行き」方や、「こんなとこへの行き方」をバンバン紹介できますね！

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

40代・50代「会社員におすすめ」の在宅でできる副業５選はこちら

ドンドン！副業情報局

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

ドンドン！副業情報局

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

アフィリエイトスクールのすすめ

＼説明会参加無料／

おすすめスクールはこちらから

おすすめアフィリエイトスクールはこちら

１日早く始めれば、１日早く収益化できる。

本サイトは「どんどん情報局」が運営しています。

著作者：Boon ☆

どんどん情報局はメディア記事の執筆を通して世の中に有益な情報を発信することを心がけています。

「どんどん情報局」の紹介はこちら

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

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

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

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

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