2007年09月17日
地図をサイドバーや記事の下に貼り付けようぜ！
風邪引いて一昨日は部屋でずっと寝てたエトウっすよ。
最近、微妙に風邪が流行り出してるので、皆さんも気を付けた方が良いっスよ。
そんな事はどうでも良いとして．．．
えっと、てぃーだブログは沖縄のカフェ、食堂、居酒屋、バーなどの
飲食店さんも結構使ってくれてるんっすよ。
飲食店さんが登録出来る 飲食店カテゴリー もあるっすからね。
で、皆さん結構ちゃんと活用してくれてるんっすよ。(超感謝)
だけど．．．地図が載ってないお店が多くて どこにあんのか分かんねぇよ！
って感じなんすよ。
せっかく良い感じのお店だな～と思っても、場所が分からなかったら行けないじゃないっすか？
それって、お店にとってもお客さんにとってもマイナスじゃないっすか？
(もちろん、店名を検索かけて調べる人も居ますけど。)
なので、今回は 「地図を貼り付ける方法」とちょっとした応用 を書きますよ。
最近、微妙に風邪が流行り出してるので、皆さんも気を付けた方が良いっスよ。
そんな事はどうでも良いとして．．．
えっと、てぃーだブログは沖縄のカフェ、食堂、居酒屋、バーなどの
飲食店さんも結構使ってくれてるんっすよ。
飲食店さんが登録出来る 飲食店カテゴリー もあるっすからね。
で、皆さん結構ちゃんと活用してくれてるんっすよ。(超感謝)
だけど．．．地図が載ってないお店が多くて どこにあんのか分かんねぇよ！
って感じなんすよ。
せっかく良い感じのお店だな～と思っても、場所が分からなかったら行けないじゃないっすか？
それって、お店にとってもお客さんにとってもマイナスじゃないっすか？
(もちろん、店名を検索かけて調べる人も居ますけど。)
なので、今回は 「地図を貼り付ける方法」とちょっとした応用 を書きますよ。
【１】 ブログ記事に地図を載せる方法 → 応用へ移動。
まずは、ブログ管理画面の 「記事投稿」 を開くっすよ。
で、 「確認ボタン」 の 少し下に マップ ってのがあるので、そこをクリック。
↑投稿日時設定の 「＊＊分」 の下にマップってのがありまス。
沖縄県の地図が載ってるページが開いたっすね。
そしたら、そのページの地図にマウスのカーソルを合わせてださい。
で、次に地図に表示さている照準を動かして、目的地の大まかな場所に合わせてください。
照準の動かし方は、左クリックを押しっぱなしでマウスを動かすと照準が動きます。
下図は、大まかに沖縄市に合わせてました。
最終目的地は、空港通りにある 「コザミュージックタウン」 にするっすよ。
で、照準を合わせたら、地図の左上にある ＋ ボタンを押して、地図を拡大してください。
はい、拡大しまシタね。
で、下図を見ると分かりますが、結構思ってた場所と合ってないものなんすよ。
オレ、嘉手納基地に用なんかねぇよ！みたいな。
なので、また照準を動かして、空港通りあたりに合わせます。
こんな感じで、大まかな場所からどんどん範囲を狭めていって、照準を合わせるワケです。
何度か照準やズームをちょいちょいして、コザミュージックタウンに合わせました。
で、合わせたら、その目的地の周辺が少し見えるようにズームを引いて下さい。
今見ている倍率のがそのまま貼り付けられるので、あまり寄っていると見難いんすよ。
最後にページの下の真ん中にある枠から 「本文に挿入」 か 「追記部分に挿入」 かを
選んで、クリックしてください。
そしたら <iframe ～ で始まるちょこっと長いタグが指定した箇所に貼り付けられるます。
これで終了です。
記事に地図が貼り付けられているかプレビューして確認してみませう。
ちゃんと貼られていたら下記の感じな地図が出てるハズです。
これが作成された地図になります。
↓↓↓↓↓↓↓
↑↑↑↑↑↑↑
これが作成された地図になります。
どんなっすか？簡単だったんじゃないっすか？
あとは、記事投稿をすれば無事ブログに地図が貼られるワケっすよ。
もちろん、地図だけじゃなく、文章や写真も一緒に載せれるので試してみると良いっスよ。
あ、、ちなみに、この地図は記事中で動かしたり、
左上の ＋－ で倍率を変更したり出来るので、なかなか便利なものっすよ。
【２】 ブログ記事に地図を載せる方法 (応用)
カスタムプラグインを使って記事のサイドバーとか記事の下とか上に
常に地図を表示させきれるよ。ってのを書くわけでスよ。
まあ、応用って程の事でもないんスけど、地図の貼り方分からん人は分からんと思うので．．．
はい、まずは 「記事の上か下に表示させる方法」 から。
さっき、記事に貼り付けた 「地図を表示させる <iframe ～」 を全てコピーします。
コピーしたらそれを 「カスタムプラグイン 1～3」 のどれかに貼り付けて、
表示箇所を 「記事一覧の上部」 か 「個別記事の下」 に設定するだけっす。
簡単じゃないっすか？
は？ カスタムプラグインってドコにあるか分からんだと？
おい、華麗に轢き飛ばすぞ！？
じゃあ、分かりやすく説明しまス。
管理画面の左側の項目に 「ブログ環境設定」 と言うのがあるので、それを開いて下さい。
そしたら、一番上の薄い黄色の枠内に各設定項目へのリンクがあるので、
そこから「カスタムプラグインの登録」 見つけてをクリックして下さい。
で、そこの 1～3 の空いている枠のどれかにコピーした <iframe ～ のタグを貼り付けて
表示箇所を 「記事一覧の上部」 にして設定を保存して下さい。
※枠が空いてない人は、すでに入ってる情報を移動とか整理するとかするか、
サイドバーに地図貼るのあきらめるかですね。
はい、これでブログの記事一覧の上に地図が表示されているハズです。
どうよ？簡単だったんじゃないっすか？
もしも、「地図の大きさが気に入らない！」 とか 「あの、はみ出してるんですけど！？」 とか
ワガママな事をおっしゃられる People は、もう一回マップを開いて照準を合わせて、
記事に貼り付けるリンクがある枠内の横幅・縦幅の数字を好きな大きさに変更して地図を作成して下さい。
※初期は、横幅 400px、縦幅 350px になってます。
ちなみに、横幅 450px、縦幅 250px で作成すると、下のような地図になります。
↓↓↓↓↓↓↓
じゃ、次は 「サイドバーに表示させる方法」 でス。
これまでの流れがあるから説明は簡単にします。
１．マップを記事に貼り付ける前に、マップの横幅を 130～160px にして貼り付ける。
ブログのテンプレートによってサイドバーのサイズが変わるので実際にやりながら調節して下さい。
２．作成された地図のタグをコピーする。
３．カスタムプラグインの空いている枠にコピーしたタグを貼り付けて、表示箇所を 「サイドバー」 にする。
４．サイドバーの設定でカスタムプラグインを表示させる。
ブログのテンプレートによってサイドバーのサイズが変わるので実際にやりながら調節して下さい。
２．作成された地図のタグをコピーする。
３．カスタムプラグインの空いている枠にコピーしたタグを貼り付けて、表示箇所を 「サイドバー」 にする。
４．サイドバーの設定でカスタムプラグインを表示させる。
以上っす。(簡単＆超手抜き)
今までの流れを見てたらすぐに出来たんじゃないっすかね？
・・・まさか、サイドバーの設定が分からないとか
・・・もう、わざわざ画像を作成するのも面倒なので、場所だけ書きます。
カスタムプラグインで案内した 「ブログ環境設定」 の 2 つ上に 「サイドバー」 があります。
そこでちょいちょい並び替えしたり、表示されてなかったら表示させてみて下さいっすよ。
「サイドバーって、どうやって動かしたりするんですの？」 「分からないから、やってくれない？」 など、
御主人様＆御嬢様の御質問・我儘などは、めんどいので華麗にスルーさせて頂きます。
てぃーだブログのヘルプ にて御確認して下さいまし。
あ、もちろん地図の貼り付けや、カスタムプラグインの設定などの編集作業によって、
表示が変になったと苦情をしても、すべて華麗にスルーさせて頂きます。
今流行の自己責任とかいうヤツです。
そこんトコ宜しくお願いします。
エトウの役に立つかも記事
■ Web Developer でスタイルシートを簡単にカスタマイズしようか？ ※かなり長い
■ Javascript でヘッダー画像をランダムにしてみっか？
■ Javascript でヘッダー画像をランダムにしてみっか？ ～補足～
■ ブログに地図貼ってみたくないか？
■ Jtrim 使って写真を加工してヘッダー画像にしてみるかい？ ～基本～
■ Jtrim 使って写真を加工してヘッダー画像にしてみるかい？ ～応用１～
■ Jtrim 使って写真を加工してヘッダー画像にしてみるかい？ ～応用２～
■ 大きい画像をモブログしてもデザイン崩れないんだぜ？ ※かなり長い
■ 画像編集ソフト AzPainter New！
※まとめ ： ブログの役に立つかもよ。
※まとめ ： ブログの役に立つかもよ。
Posted by エトウ at 08:23│Comments(0)
│役に立つかもよ。
※会員のみコメントを受け付けております、ログインが必要です。
てぃーだオフィシャルブログ
沖縄の食べ歩き・グルメ情報
沖縄暮らし・スポット情報
てぃーだの特別企画ブログ
オフィシャルブログ
てぃーだスタッフの日常
沖縄ブログ村
画像一覧 