■Blogger：おしゃれデザインに挑戦！■第２回：海外サイトのおしゃれ背景 その２

---

［The Cutest Blog on the Block］の背景画像の設置方法

---

前回の第１回：海外サイトのおしゃれ背景 その1では、海外のブログテンプレートサイト［The Cutest Blog on the Block］（以下CutestBlogと省略)からたくさんの背景画像から自分ごのみのデザインを探すレッスンを書きました。
探すだけで終わってしまい配置に関しての記事は書きませんでしたが、配置しなければ全く何の意味もないですよね。

CutestBlogのサイトに配置の説明があります。
こちらの説明の通り、配置自体はとても簡単です。

Directions:
Log onto your blog.
Click on your 'Design' tab or 'Layout' tab.
Click 'Add a Gadget'.
Click on the (+) sign next to 'HTML/JavaScript'.
Paste the entire code in that space.
Click 'Save' and you now have a new HOT blog!

↑が原文です。英語が不得意な人のためにわかりやすく説明します。

１）［レイアウト］を開きます。











■■　ガジェットとは　■■

［ガジェットを追加］というものがところどころにあり「なんだろう？」と思っている人も多いと思います。
ここでいうガジェットとは、ブログに追加する機能のことです。「ブログパーツ」とも呼ばれています。
ガジェットはたくさんの種類-- 時計やカレンダー、天気予報や最新ニュース、広告などなど --があります。
いまご覧になっている私のブログには、Amazonの広告がありますね。Amazonのアフィリエイトに参加し、このガジェットを手に入れました。私の場合は自己紹介として自分の著作物を載せていますが、このような広告で収益を上げている人もいます。
また自分のブログを賑やかに飾りたい、という目的で楽しいツールをいろいろ置いている人もいますね。
gadget-gallery.jpのようなサイトでフリーのガジェットを見つけることができます。


２）前回の第１回：海外サイトのおしゃれ背景 その1の最後で説明したように、CutestBlogで選んだはバックグラウンドのコードをコピーします。

３）サイドバーの一番上にある［ガジェットを追加］をクリックする。

４）［HTML/JavaScript］を選ぶ。
　　（＋マークをクリックする）。




５）先程コピーしたコードを、［コンテンツ］フィールドにペーストします。
　※［タイトル］はなんでもよいですが、サイドバーに表示されます。
入力しなければ、HTML/JavaScriptと表示されます。私はTHE CUTEST BLOG ON THE BLOCKと入れました。


これで完了です。きちんと表示されましたか？・・・あれ？されません？

---

背景の配置がうまくいかない理由はテンプレートデザインの種類

---

ただ、説明通りの手順を実行しても、うまく背景が表示される人とされない人がいます。

それはみなさんが選んでいるテンプレートのデザインによって決まります。

［テンプレート］によってデザインを決めていますね

テンプレートってなんだっけ？ほら、これです。最初に選んだブログデザインのことです。


選んでいる種類と設定によって、背景がきちんと表示されません。

---

［シンプル］を選んでいる場合の設定

---

［シンプル］を選んでいる人がもっとも戸惑います。
下のサンプルを見てください。
どれもブログの上の方に色や画像の帯が表示されています。
そのため背景画像が消されてしまうのです。
また背景部分を薄く表示する設定が入っているデザインもあります。

帯により背景画像がカットされています。

左画像の４つのサンプルを見てください。
これはデフォルト設定ですので、好きな色を設定している皆さんとは、違う配色だと思いますが、どれも同じように帯の色で背景が隠されています。
また右下のグリーンの帯には画像が使われています。
オレンジと水色のタイプは、背景画像が薄くなるように設定されていますね。

［背景］の設定を変更すれば、かわいい背景画像がきちんと表示されますのでやってみましょう。

これは［シンプル］の１番目のテンプレートの例です。


［上級者向け］>［背景］>［外側の背景］
カラーのプルダウンから［透明］を選んでみてください。帯が消えたはずです。

［メインの背景］を［透明］にすれば、ブログのメインの部分の色も透明になります。

テンプレートによっては、右の例のように背景が薄くなってしまう場合があります。

その場合［背景］>［背景画像］をクリックして［背景画像を選択］ウィンドウを立ち上げます。

［完了］ではなく［キャンセル］を選んでみてください。

よくわかりませんが、なぜかカラーが黒になり、背景色の色の薄さがなくなりました。

もちろんタイトル部分の地色がなくなってしまうと、白や薄い色でタイトル文字を色付けしていた人は、タイトルが読みにくくなってしまいます。

［ブログのタイトル］や［ブログの説明］の文字色を読みやすい色に変更しておくのを忘れずに。

---

その他のテンプレートを選んでいる場合

---

テンプレートの種類により、［テンプレートデザイナー］で編集できる項目が変わってきます。

選んだ背景画像が表示されない人は、背景の設定部分をいろいろ変更してみてください。

テンプレート背景画像は必ず削除してくださいね。

いかがでしたか？

背景がおしゃれになるだけで、ブログの印象が全く違うものになりますね。
きっとタイトル部分ももっともっとおしゃれにしたいはずです。
次回はタイトルを画像で作るお話をしますね。お楽しみに！

■Blogger：おしゃれデザインに挑戦！■第１回：海外サイトのおしゃれ背景 その１

---

デフォルトテンプレートに満足しないで、おしゃれなブログを目指そう！

---

Bloggerの作り始めは「どんなテンプレートを使おうかな～」「どんな配色にしようかな～」と少ないテンプレートの中から、自分らしさやお気に入りを探し出しますよね。

私が最初に選んだテンプレートでのデザインはこれです。

Blogger開設初期に選んだテンプレートデザイン

正直、たいしてこだわってません。うふふ。

下のは昔私が作った自分のオフィシャルサイトです。

私が作ったオフィシャルサイト（もうありません～）

これはむちゃむちゃこだわって作ったんですよ。

私の現在の本業は３DCGクリエイター＆専門学校講師ですが、基本はグラフィックデザイナーです。WEBデザインは本職ではありませんが、それでも自分のサイトを作るときは、HTML、CSS、JavaScriptを書籍やサイトで一生懸命勉強し、素人ながらにもこだわりを入れ込んで組み立てることができました。

WEBデザインの難しいところは
●ロゴや画像や素材などのグラフィックを作る技術
●素材をWEBページに表示させるため＆機能させるための組み立てる技術
の二つが必要なところです。

でも多くの人たちが、グラフィックデザインやPCでのデザインを作れる技術を持ってはいないですよね。持っていない人が多いからこそ、Bloggerは簡単に好みのデザインにできる［テンプレートデザイナー］というものを用意してくれているわけです。

でもだんだん「もっとおしゃれにしたいな～」って思ってきているはず。
そしてそろそろテンプレートだとみんな同じに見えちゃって自分らしさが欲しくなるはず。

難しく感じるかもしれませんが、今回も手とり足とり簡単にカスタマイズできるように手ほどきしていますよ！

---

ワクワクの海外無料テンプレートサイト-The Cutest Blog on the Block-

---

Bloggerの左上に［次のブログ>>］ってありますよね？
これはBloggerで作られた世界中の人のブログへランダムに飛んでいくボタンです。
クリックしていると、様々なブログデザインが見れてとても面白いです。

でもふと気がつきます。
「あれ？このデザインどうやって作っているんだろう？テンプレートにないのに」

私もものすごくおしゃれなプロ級デザインを見つけ「けっこうデザイナーっていっぱいいるんだな」と驚きました。・・・・が、違いました。
世の中にそんなにデザイナーばっかりいるわけがありません。

プロ級デザインのブログの左上になにやら素敵なリンクを見つけました。

The Cutest Blog on the Block　



１）まずはクリックしてそのサイトを訪れましょう。

The Cutest Blog on the Blockのメニュー

２）タイトル下のグレーのラインがメニューです。（上図）
私たちはBlogger使いですから［BLOGGER] をクリックします。

３）プルダウンに［BACKGROUNDS（背景）］［TEMPLATES（テンプレート）]［BANNERS（バナー）］とありますが、今回選ぶのは［BACKGROUNDS］です。

「テンプレートを作るんだから［TEMPLATES]じゃないの？」と勘違いしないでくださいね。どうやらリストにあるデザインをそのままつくるHTMLコードのようです。
ちょっと敷居が高いですね。そして種類も１０種類くらいしかありません。
私たちは千種類以上もある背景から自分好みのものをチョイスする楽しみを味わいましょう！

---

時間をかけて自分好みの背景をみつけよう！

---

The Cutest Blog on the Blockの背景デザインリスト

現在の1ページ目はこれです。
あんまり好きじゃないな・・・なんてこの画像だけ見て判断しないでくださいね！
無料の背景画像が千種類以上あるわけですから、きっとあなたの好みのデザインが見つかるはずです。

1ページに10個の背景デザインが並んでいますね。
そしてサムネイル（サンプル画像）の下にページ番号があります。
1ページに10個×118ページもあるのだから、1200近いデザインがあるというわけです。

リストの下にページ番号があります

クリックしてどんどんページをめくり、いろいろなデザインを見ていってください。
とはいえ、1ページずつ見てたら疲れちゃって30ページくらいで飽きちゃうかもしれません（笑


■■■ 効率的な探し方 ■■■■■■■■■■■■■■■■

１）カテゴリーで表示する

カテゴリーのプルダウンメニュー

１ページ１ページ見ていっても構いませんが、まずはカテゴリーから好みのキーワードで選んでみましょう。カテゴリー別になっているので、イメージがまとめられていて探しやすくなります。

ただカテゴリーに進むとBackボタンがありません。またカテゴリーを選び直したければ、再度プルダウンの［BACKGROUNDS］を選んでください。

２）［Suggested/Similar Images]（おすすめ/類似イメージ）から探していく

なんとなく「いいな」と感じたサムネイルをクリックしてみてください。

サムネイルをクリックすると選んだ背景ページに

選んだ背景画像のページに飛ぶと、下の方に［Suggested/Similar Images]という６つのリストが出ますね。これは選ばれた画像の似たイメージを表示しているようです。

ここからどんどんクリックして探して行ってもいいですね。

---

選ぶ基準のアドバイス

---

「好きなものを選ぶ」　もちろんこれが基本です。
ブログ（HP作成）初心者の方には、押さえておきたいポイントをアドバイスしますね。

１：「好き」なだけで決めず、ブログのコンセプトに合わせる
みなさんは何をコンセプトにブログを書かれていますか？
デザイン＝コンセプトと言っても過言ではないのです。

自分のブログコンセプトをより視覚化してくれているイメージや色合いを選びましょう。

２：中心の背景色に気をつける
中心の色は文字色に影響を与えます。両側の色は文字には影響がありません。
暗い色合いを選べば、白っぽい文字にしなければなりません。
それが悪いわけではありませんが、背景色によって文字の色も変えなければいけないことを覚えておいてください。

３：２種類の幅のどちらかを選ぶ（重要）

左が３コラム、右が２コラム

同じデザインでも３COLUMN（コラム）と２COLUMNの２種類の幅を持つものがあります。
簡単に言うと、ブログ本体の幅です。
ブログ本体の幅は、サイドバー（自己紹介やブログアーカイブがあるところ）を含んだ幅です。

自分のブログがどのくらいの幅か、確認してみてください。（下図）

［テンプレートデザイナー］＞［幅を調整］を表示してください。
ここであなたのブログの幅をいつでも自由に変更できますよね。

２コラムの場合：幅760ピクセルくらいでないと入りません。かなり狭いですね。
※デザイン名には2CLUMNとは書いていませんが、３COLUMNという名前でないものが2CLUMNです。

３コラムの場合：デザインにもよりますが幅960ピクセルくらい使用できます。

あまり狭いと日本語の場合、英文字と違いフォントが大きいですから読みにくくなってしまいます。
なので３コラムのデザインがおすすめです。


４：タイトルバナーはただのサンプルです（背景に組み込まれてはいません）

下の画像のように、タイトルが置かれる部分に最初からタイトルバナーデザインが置かれているデザインがありますが、これは組み合わせの例のようです。
両脇の背景が実際のデザインですのでバナーデザインは無視して、背景だけで判断しましょう。

タイトルバナーが入っているデザインの例

もしタイトル部分のデザインを使用したい場合は、別に配置しなければなりません。
タイトルバナーのデザインはプルダウンメニューの［BANNERS］にありますが、配置したい場合は今回とは別のやり方になります。
ロゴや額に写真を入れ込んだりする場合はPhotoshopやGIMPなどの画像編集ソフトを使用して画像を作成します。
このやり方はまた今度レクチャーしますね！乞うご期待！

---

デザインを選んだらメモ帳にコピーしておく

---

１種類に絞らずにたくさんのデザインを選んでおきましょう。
実際に何種類も配置して、ぴったりくるデザインを選んだほうがラクだし、楽しいですよ。

コピーしておくもの。
●コード（下画像の赤枠）
●そのデザインのURL
コードとURL、どちらかで構いませんし、両方でも良いです。

URLをとっておけば、いつでもそのデザインのページに行けますから便利ですよね。もちろんブックマークでも構いません。せっかく好きなデザインを見つけてもコピーし忘れると、あれどこだっけ？とまた探さないといけなくなりますよ！

---

さて今回はとても長文の記事になってしまいました。
なので一回区切って、実際に配置するテクニックは、次号に回したいと思います。

素敵なデザインをじっくり探してくださいね！

◆Blogger：アドバイス◆第４回：トラフィックにある謎サイトはクリックしちゃダメ！

Bloggerを使ってブログを作ると、［統計］という便利な機能を見つけて「ここで私のブログのアクセス数がわかるのね！」とウキウキし、
「わ～今日はアメリカから５０件もアクセスがある！やった～」なんて浮かれてしまいますよね。

でもまって！

いったいどこの誰が、私のサイトをそんなにも見たがるのでしょうか。
しかも日本語で書いているのにアメリカからって！？

Bloggerの統計画面

みなさんもこのような自分のブログの［統計］画面を見たことありますよね。
そして赤枠で囲まれた箇所に［トラフィック］というのがありますね。

初心者の私は、トラフィック項目にある、たくさんアクセスしているサイトが気になって、クリックしてそのサイトを何度も訪問してしまいました。
だってvampireナントカは100回以上もアクセスしてるし、7secretナントカだって40回近くアクセスしているし、気になるに決まってるじゃないですか！

それってスパムサイトだそうです！きゃ～！
アクセスするとウィルス感染する恐れがあるそうです！きゃ～きゃ～！

見慣れないサイトはクリックしちゃダメ！！


詳しいことは「Blogger トラフィック」で検索すると様々な方が詳しく教えてくれますよ！


私はこちらのサイトを参考にしました。
Bloggerの統計トラフィック　リファラースパム対策

私のブログは商用でもないし、統計など全くいらないのですが、こちらのサイトを参考に「GoogleAnalytics」のアカウントを作成してみました。
Bloggerではスパム対策はできないようなのでAnalyticsでフィルタの設定をしました。


今回はブログのカスタマイズとは関係ないのですが、Blogger初心者の私が陥った世の中の怖さを同じBlogger初心者の方と共有したいと思いました。スパムやーねぇ。

◆Blogger：アドバイス◆第３回：［ブログタイトルの説明］のサイズ変更

前回の［ブログアドバイス第２回：読みやすいフォント（書体）とフォントサイズ］で投稿コメントのフォントのサイズや書体を変更する方法を書きました。

それを参考に、エミちゃんも自分のサイトのフォントを変更したのですがメールでこのような疑問を投げかけてきました。

「ブログのテキストのサイズを変更しました。でもそしたら「ブログタイトルの説明」まで大きくなってしまいました。他のところは全て色とサイズが指定できるようになっているのに、ブログタイトルの説明のところだけ、色しか指定できません。サイズ指定のボックスがでないの。これって私だけ？」

そうなんです。これって仕様なんです。

「ブログタイトルの説明」のフォントサイズは［テンプレートデザイナー］では設定できないのです。

ちょっと不親切ですよねぇ。

私も「ブログタイトルの説明」が大きくなって見栄えが悪くなったのがイヤでイヤで、いったいどこでそのサイズを設定しているのか、探しまくりました。

見つかりました！

ただここからはHTML＆CSSの編集になります。

でもより自分ごのみのデザインに直すには、テンプレートデザイナーの編集から脱出して、いつかはチャレンジしなければいけない領域なのです。

私もちょこっとしか勉強してないレベルの人なので、難しいことはできません。

私と一緒に少しずつ簡単なところからチャレンジしていきましょう！

---

Step1 : ［HTMLの編集］ウィンドウを開きましょう

---

投稿画面のHTMLではありません。
［テンプレート］＞［HTMLの編集］ボタンで開きます。

---

Step2 : ［.Header .description］という記述を探します

---

ホームページを自作したことのない人にとって、このHTMLのずらずら並んだ英文字を見ただけで尻込みしてしまうと思います。
もちろんすべて理解する必要はないので安心してください。

探した箇所をちょこっとだけ書き換えるだけです。

だけれど、このずらずらと長い2000行以上の文字列の中から探すのが大変です。

探しやすくするために、わかりやすく位置を教えますのでのんびりやりましょう。

１）開いたときは一番下の行が表示されていると思います。スライダーを上まで動かして、一番上の行を表示してください。

２）みなさんが選んだテンプレートデザインによって、行数（行番号）は人それぞれです。

ですがだいたい近い位置にあると思うので、私のHTMLの行番号を参考にして、近くの行番号で探してみてくださいね。

３）たたまれている行を開きます。

だいたい14行あたりに黒い三角がついていると思います。

文字列は「<b:skin>…</b:skin>」です。

この三角をクリックすると、たたまれて省略されていた行が開いて表示されます。

４）　　/* Header

　　　----------------------------------------------- */

という記述を探します。

私のHTMLでは163行目ですが、人によっては200行目あたりにあるかもしれません。

見つけやすい文字列なので、探しやすいと思います。

５）

/* Header

----------------------------------------------- */

と

/* Tabs

----------------------------------------------- */

の間を見てみましょう。

ちょうど

/* Tabs　のすぐ上に

.Header .description {

font-size: 130%;

}

という記述があります。見つかりましたか！？※人によっては130％ではないかもしれません。

この記述が見つかるまで頑張りましょう！

---

Step3 : 「font-size」を書き直します

---

「font-size」が私のものは130％になっていますが、みなさんはどうでしょうか？

この130％というのは、「ページのテキストサイズ」に対しての割合です。

どうりで大きくなってしまうはずです。

ここを80％などとと小さくしても良いし、ピクセルで設定してもOKです。

私のブログでは

.Header .description {

font-size: 13px;

}

とピクセルでサイズ指定にしてあります。本文（14px)よりもjじゃっかん小さくしたというわけです。

このときセミコロン（；）や中括弧（｝）などは削除しないように気をつけましょう。

Step4 : プレビューで確認してみましょう

テンプレートを保存する前でも、書き換えたことでどのように変化したか確認することができます。

［テンプレートをプレビュー］ボタンを押してみてください。

HTMLだったウィンドウがプレビューに切り替わります。

文字サイズが気に入らなければ［テンプレートを編集］ボタンを押し、再び書き換えてみてください。

文字のサイズを色々と入力してみて、好みのサイズになったら［テンプレートを保存］を押します。

あとは［戻る］ボタンでOKです。

---

いかがでしたか？

文字サイズを直すのはとても簡単でしたね。探すのがじゃっかん難しかったでしょうか。

ブログタイトルの説明文が小さくなったことで、ちょっとオシャレになりホッとしましたか。

ただHTML（直した箇所はCSS）がどのように機能しているのか、記述ルールはどのようになっているかは説明していませんので、ほかの箇所はむやみに変更しないようにしましょう。

◆Blogger：アドバイス◆第２回：読みやすいフォント（書体）とフォントサイズ

---

フォントサイズはセンスと配慮のバランスが大事

---

Bloggerを使ってみて、私が一番残念に思った仕様は「英文字ならリストにたくさんあるのに、日本語書体は選べない！！」ということです。
Bloggerはもともと海外のサービスなので、日本語に対してはあまり気づかってくれていないようです。

しかしフォントサイズは自由に変えることができます。
Bloggerの場合［テンプレートデザイナー＞上級者向け＞ページのテキスト］で設定できますよね。

初めてブログを作る人は、何px（ピクセル）に設定したらいいんだろう、と悩むことと思います。
そしてきっと判断基準は「このくらいが好み」という自分視点になってしまうのではないでしょうか？

もちろん「適切」とはその人その人の感じ方です。
しかしWEBサイトには「ユーザビリティ」という考え方が必須です。
簡単に言うと、使いやすさ、見やすさ、ですね。

「適切　フォントサイズ」などで検索をかけると、たくさんの意見を参考にすることができます。

大手企業のサイトに関わっている方の書き込みにこんなものがありました。
●13px未満だとどの年代でも読みにくいという意見がある
●高齢者になると16px未満だと読みにくい

しかしデザイン面で言えば、文字が小さいほうが「クール」「おしゃれ」な感じがします。
Facebookが代表的な例です。

しかし文字が小さければ、目が疲れます。
つまり文字のサイズは「センスと配慮」のバランスであるわけです。
文字が小さくて読みにくいだけで、読むのをやめてしまうという読者がいることも覚えておきましょう。

現在私のブログは13pxにしてあります。

---

本文の中で文字のサイズを変える

---

↑上の文字はサイズを大きくしたのではなく
フォントのプルダウンメニュー「標準」を「小見出し」に変えたのです。

ただ本来は、文字のサイズを変えるだけではなく、スタイル（デザイン）を設定するのが目的です。
この記事を書いている時点では、ただの色違いの大きめ書体です。
スタイルを変える設定をした場合、その後は全てそのスタイルに置き換わります。
文字を変えるというよりもデザイン設定が変わるわけです。
小見出しのデザイン設定は、また次回のお話にします。


さて、本文のフォントサイズは、テンプレートデザイナーで設定したサイズが「標準」となりますが、

このアイコンで、小さくしたり大きくしたりできるということです。

ということは、標準設定でのフォントサイズが小さすぎると、ここで使用できる［小］［最小］が潰れて読めなくなってしまいます。
なんだかもったいないですね。

１４pxのフォントサイズ
●これは標準サイズです
●これは［小］のサイズです
●これは［最小］のサイズです


サイズがおかしいことに気がつきましたか？
文字を投稿ページで打っているときは、［小］と［最小］は明らかに違うのですが、みなさんが見ているプレビューでは［小］と［最小］のサイズが同じです。
指定した標準フォントサイズから、たぶん「マイナス」してサイズを決めていると思うので、これ以上小さなサイズにできないのでしょうね。

---

読みやすい書体に変更する

---

デフォルトでは日本語フォントは「MS Pゴシック」で見えているはずです。

ただBloggerでは、日本語書体を設定から全く選ぶことができないですよね。

選べるのは

[Arial] [Courier][Georgia]などなど英語書体だけです。

必然的に、

勝手にゴシックになる英語書体

勝手に明朝になる英語書体

どちらかを選んでいると思います。

「Blogger　フォント変更」で検索すると、たくさんヒットします。
多くの方が、「メイリオ」という読みやすくて美しいフォントに変えています。
今みなさんが見ている私のこのブログもメイリオになっています。

もちろんフォントは機種依存ですので、見ているPCにメイリオがインストロールされていなければ、MS Pゴシックかもしれません。
またMacをお使いの方は、ヒラギノで見えていると思います。


では変更の手順です。

１）　以下のテキスト（CSSソース）をそのままコピーします。

body, textarea { font-family:"meiryo","メイリオ","ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", sans-serif; }


２）　［テンプレートデザイナー＞上級者向け＞CSSを追加］　を選びます。

３）入力フィールドに、先ほどコピーしたCSSソースをペーストしてください。

　［ブログに適用］ボタンを押さなくても、入力フィールドに入れただけで、下に表示されている自分のブログのフォントが変わるのがわかります。
もし元に戻したいのであれば、このCSSソース全文を削除すればよいだけです。


４）最後は必ず［ブログに適用］ボタンを押すのを忘れずに。



いかがでしたか？
フォントの種類やサイズは、「読みやすい」ということが最も大切です。
メイリオは読みやすくて美しいフォントとして開発された書体なので、ぜひ使ってみてください。
ただ書体は大きくすればするほどカッコ悪くなってしまうので、センスと配慮のバランスで決めましょう。

---

追記

メイリオはWindowsVista以降のフォントです。
もしお使いのOSがWindowsXPならばメイリオ・フォントはインストールされていません。
↓こちらのサイトからダウンロードしてください。
Windows XP 向け ClearType 対応日本語フォント
今まで見ていたサイトの文字が見やすくなるのでおすすめです。

◆Blogger：アドバイス◆第１回：マップのリンクと表示

お店などの情報をブログで投稿するとき、位置情報を一緒に載せてあげれば、多くの人に役立ちますよね。
私もたくさんの海外在住のブロガーさんの現地情報にお世話になりました。
ガイドブックには載っていないような、地元の人しかわからない美味しくて安いレストランをたくさん利用させてもらっています。

さて、マップのリンクは大きく分けて２種類あります。
昨日ランチで食べた新宿の安くて美味しいカレー食べ放題のお店を参考に説明します。

---

【Aタイプ】　文字へのリンクする方法

---

インド料理レストラン-　HATTI　-　※場所はこちら

↑　↑　↑　↑　↑　↑　↑　↑　↑　
レストラン名には、レストランのHPのアドレスをリンクしています。
「こちら」には、GoogleMapのアドレスをリンクしています。クリックして確かめてみましょう。

画像１：Bloggerのリンク編集ウィンドウ

【１】 どのブログのシステムにも、投稿ページには文字のサイズや太さなどが設定できるメニューがあり、その中に必ず［リンク］メニューがあります。
指定の文字列（お店の名前など）を選択して、［リンク］メニューをクリックすれば上の画像のようにリンクを編集するウィンドウが立ち上がります。

【２】リンク先のURLをコピペします。

【３】読者のことを考えて、［このリンクを新しいウィンドウで開く］にチェックを入れておきましょう。そうしないと、読んでいたブログページがリンク先のページになってしまうため、元に戻るのが面倒くさいですよね。

---

GoogleMapのリンクURLを調べよう

---

リンクのやり方がわかったら、GoogleMapのURLをコピーのやり方を学びましょう。

GoogleMapでは、リンクのURLをコピーしやすい仕様になっています。ありがたいですね。

画像２：GoogleMapのリンクURLの調べ方

【１】赤丸で囲まれた部分が、現在開いているページのリンクの表示アイコンです。

【２】2列ありますが、上の列が［メールやチャット用のリンク］。つまり今回のテキストデータでリンクするやり方にはこちらを使います。

https://maps.google.com/maps?q=%E6%97%A5%E6%9C%AC,+%E6%9D%B1%E4%BA%AC%E9%83%BD%E6%96%B0%E5%AE%BF%E5%8C%BA%E8%A5%BF%E6%96%B0%E5%AE%BF%EF%BC%97%E4%B8%81%E7%9B%AE%EF%BC%95%E2%88%92%EF%BC%95+%E3%83%8F%E3%83%83%E3%83%86%E3%82%A3%E3%83%BC%EF%BC%88%EF%BC%A8%EF%BC%A1%EF%BC%B4%EF%BC%B4%EF%BC%A9%EF%BC%89&hl=ja&ie=UTF8&ll=35.695826,139.70246&spn=0.007807,0.016512&sll=35.506611,139.44169&sspn=0.061206,0.082312&oq=+%E3%83%8F%E3%83%83%E3%83%86%E3%82%A3%E3%83%BC&hq=%E3%83%8F%E3%83%83%E3%83%86%E3%82%A3%E3%83%BC(HATTI)&hnear=%E6%97%A5%E6%9C%AC,+%E6%9D%B1%E4%BA%AC%E9%83%BD%E6%96%B0%E5%AE%BF%E5%8C%BA%E8%A5%BF%E6%96%B0%E5%AE%BF%EF%BC%97%E4%B8%81%E7%9B%AE%EF%BC%95%E2%88%92%EF%BC%95&t=m&z=17

わ～URL長すぎ！
と、コピーすると上のようにものすごく長くて驚いちゃいますが、今回はブログの文字列そのものにリンクをするので、長くてもいっこうにかまいません。これは画面では表示されないからです。
※もし文字にリンクせず、そのままURLを貼り付けるのであれば、□短縮URL詳細　を使用しましょう。

---

【Bタイプ】　GoogleMapをブログに埋め込む方法

---

次はGoogleMapそのものを、ブログに小さく埋め込むやり方です。

画像として配置するのではなく、GoogleMapそのものなのです。

なので、小さなウィンドウの中でGoogleMapが機能しています。試しに下のGoogleMapを動かしてみてください。小さくてもちゃんとGoogleMapです。
みなさんもどこかのサイトで使ったことありますよね。

大きな地図で見る

さて、ではこれをどのように設置するかです。

HTMLを使用しますが、え？なにそれ？って人には敷居が高く感じるかもしれません。

wikiによると「HTML（エイチティーエムエル）とは、ウェブ上の文書を記述するためのマークアップ言語である。文章の中に記述することでさまざまな機能を記述設定することができる。」だそうです。
どう作るかわからなくても、みなさんが書いているブログそのものも、HTMLではどのように書かれているか見ることができます。※後で見てみましょう。


私はHTMLを詳しく教える技術はないので、今回はGoogleMapをBloggerに配置するやり方だけを教えますね。

【１】先ほどのGoogleMapのリンクのURLを見てください。上の列が[メールやチャット用のリンク]、そして下の列が［ウェブサイトへの地図埋め込み用HTMLコード］になります。

画像3：GoogleMapのリンクURLウィンドウ

【２】コピーするURLはこれ（赤丸）でよいのですが、サイズ等をきちんと設定するために、［埋込み地図のカスタマイズとプレビュー]をクリックして開きましょう。
そこでサイズ指定ができます。

画像４：埋込みマップのサイズ指定

カスタムでサイズを指定すれば、横長にすることもできます。

画像４の一番下に［サイトに地図を埋め込むにはこのHTMLをコピーして貼り付けます］と書いてありますが、投稿ページそのものに貼り付けても意味がありません。それではこのへんな文字列がそのまま文字として投稿されるだけです。


【３】Bloggerの投稿ページをHTMLで開きましょう。

投稿している記事のメニュー部分に[HTML］というボタン（赤丸箇所）があります。
そこをクリックすると、今書いている記事をHTMLで表示・編集することができます。

GoogleMapを埋め込みたい箇所（行）に、先ほどのGoogleマップの埋込みHTMLコードをコピペしましょう。
これで、ブログにマップを埋め込むことができました。

ちなみに<br />とは改行のタグです。HTMLも勉強するといろいろ出来て面白いですよ。


いかがでしたか？
これからは、お気に入りのスポットやレストランの場所をたくさんの人にブログで教えてあげられますね。