はてなブログを始めたけれど知識ゼロで全くわからない。
何でもいいから使い方を知りたい。
今日の記事はこういった方へお届けします。
この記事の内容
はてなブログの記事中にグーグルマップを埋め込む方法をご紹介します。
意外と使えて便利です。
タイトルからわかるようにこの記事は超初心者向けに書いています。
初心者以外の方、グーグルマップを本文に埋め込む方法をすでに知っている方はスルーしてください。
記事中にグーグルマップを埋め込む…はてなブログ開設して5ヶ月近くたった今では普通にやっています。
でも最初の頃はどうやるのかチンプンカンプンで、記事を書く前にひたすら検索してました。
はてなブログ開設したばかりの人の中にはそういう人がいると思います。
なので何もわからなかった頃を思い出して初めての人がわかりやすいように書きました。
グーグルマップをはてなブログ記事中に埋め込むためのコードをコピーする
まずは普通にグーグルマップを開きます。
開いたら適当にどこかの場所を検索してください。
今回は東京駅〜新宿駅の電車での行き方を表示しています。
この経路に特に意味はありません。
左側に検索結果が表示されます。
その左上にメニューバーがあるので（黒で囲っている部分）それをクリックして開きます。
下の方に、地図を共有または埋め込むという項目（黒く囲ってる部分）が出てきます。
これをクリックします。
共有のメニューが出てきました。
右側の地図を埋め込むをクリックします。
埋め込むためのHTMLコードと埋め込まれるマップが出てきます。
地図の大きさは大、中、小と選べるのでコードの左側にある中をクリックして選びます。
何もしないと中になります。
大きさを決めたらHTMLコードをコピーします。
コードの部分をクリックすると自動で全部選択状態になるのでコピーしましょう。
Macの人はcommand＋Cでコピーされます。
Windowsの人はCtrl＋Cだったかな？
すいませんWindowsはもう十数年来触ってないので忘れました。
または、HTMLをコピーと書いてある部分をクリックすると自動でコピーされます。
はてなブログの編集画面に戻ります。
コピーしたコードをHTML編集でペーストする
はてなブログの編集画面に戻ったらHTML編集に切り替えます。
今回は適当に用意した、まだ何も書き込んでいない編集画面です。
何も書き込んでいませんが、改行だけしたのでPタグで段落が作られています。
このPタグがなんなのかわからない人もいると思うので簡単に説明しておきます。
（僕も最初これがなんなのかわかりませんでした。）
画面に表示されている<p>と</p>はセットで段落の始まりと終わりを表しています。
<p>と</p>の間に書かれているものは一つの段落として扱われます。
上の編集画面では<p></p>が縦に並んでいます。
これは見たまま編集画面で文字を入力しないで改行だけを繰り返したので、HTML編集画面では文字が何もない空っぽの状態で段落だけが作られている状況です。
そして、先ほどコピーしたグーグルマップのHTMLコードもこの段落の中にペーストします。
つまり<p>と</p>の間です。
ちなみにですが、こういったHTMLの知識はややこしそうに思えますが、少し勉強してみると色々と役に立つことが多く、ブログを書く時間の短縮や、より見やすいブログを作るのにもつながります。
僕も知識ゼロでしたが、いずれ必要になるだろうと思って勉強しました。（まだまだですが）
決して損にはならないので時間のあるときに本を読んで、頭の片隅にでも知識を置いておくべきです。
この本は少し前のものですが初心者にもわかりやすくHTMLを解説してくれてます。
ど文系だった僕も基本的なことはこの本で学ぶことができました。
話が逸れましたがマップの埋め込みの解説に戻ります。
実際にコピーしたコードをHTML編集画面でペーストしましょう。
記事中のどの部分にグーグルマップを入れるかがすでに決まっていたら、HTML編集画面で、入れたい場所の前後の文字を探します。
その間にある<p>と</p>の間に先ほどのコードをペーストするとこのようになります。
（今回は何も書き込んでいない編集画面なのでコードだけが表示されています。）
見たまま編集に戻ってみるとこのようにグーグルマップが埋め込まれています。
念のためにプレビューでも確認して問題なく表示されていればOKです。
何がわからないかもわからない、はてなブログ始めたばかりのころ
僕もそうだったのですが、ブログをようやく立ち上げて最初に記事を書こうと思っても超初心者は意外と大変です。
はてなブログには見たまま編集がありますが、なんだかんだで結局HTML編集でやらないといけなくなる部分があるからです。
グーグルマップを記事中に埋め込む方法もそうです。
でもブログ初心者がHTMLの知識を持ってるはずがありません。
何の知識も無い初心者がいきなりできるわけないので、仕方なく調べて自分でやろうとするのですが、、、意外と無いんですよね超初心者向けのはてなブログの使い方を解説してくれる記事が。
特にどうしてもHTML編集が必要な時はなおさら初心者向けにわかりやすく解説してくれる記事がありがたいのですが、ありませんでした。
だからこの記事を作りました。
4ヶ月前にブログ立ち上げたばかりの頃を思い出して当時知っておきたかったことを解説してみました。
読んでいただければ実は超簡単なことがわかっていただけます。
グーグルマップをはてなブログ記事中に埋め込むのは、レストランのレビューや旅行記ではよく使われています。
もしそういうジャンルで記事を書くつもりの人がいたら参考にしてください。
最後まで読んでいただいてありがとうございます。