mixiで趣味の話をしよう

mixiコミュニティには270万を超える趣味コミュニティがあるよ
ログインもしくは登録をして同じ趣味の人と出会おう♪

開催終了対馬宣伝ホームページ作成

対馬ナビ

対馬ナビ

詳細

2013年04月13日 16:39 更新

対馬宣伝ホームページ作成作成に関しての技術を集めます。


調査事項、疑問、相談に関しては、コメントに書いていき、

重要事項
決定事項

は私がイベント詳細の中に入れます。

みなさんも意見をお願いします。

ホームページ作成の第一歩【画像をクリックでジャンプ】
http://www.7key.jp/hp/_link/5.html

画像がクリックされたら画像を入れ替える - JavaScript
http://javascript.eweb-design.com/0801_cci.html


コメント(5)

  • [1] mixiユーザー

    2013年04月24日 08:28

    【Google MAP】

    GoogleMAP を許可しているサイトで行います。

    ●1.埋め込みコード

    これで対馬の地図がでます。

    <iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.co.jp/maps?hl=ja&ui=maps&ie=UTF8&t=m&brcurrent=3,0x3569a110b1af8e0b:0x24952a1ea9084a95,1&source=embed&ll=34.31395,129.377747&spn=1.129738,1.29364&z=9&output=embed"></iframe><br /><small><a href="https://maps.google.co.jp/maps?hl=ja&ui=maps&ie=UTF8&t=m&brcurrent=3,0x3569a110b1af8e0b:0x24952a1ea9084a95,1&source=embed&ll=34.31395,129.377747&spn=1.129738,1.29364&z=9" style="color:#0000FF;text-align:left">大きな地図で見る</a></small>



    ●2.
    Google Mapsをサイトに埋め込む、iframeでの引数


    Google MapsをWebサイトにiframe埋め込む際に
    Google Mapsのサイトでカスタマイズさせてくれるのはサイズと尺度、初期位置くらいです。
    せっかく埋め込むのなら色々とカスタマイズしようと思ったのですが
    日本語のリファレンスがなかなか見当たりませんでした。
    なら自分でまとめてしまえ、という事で動作確認の取れた引数のみ、まとめました。

    まず、Google Mapsをサイトに埋め込む方法から。


    １、http://maps.google.co.jp/ にアクセスし、住所を検索

    ２、画面右端の「リンク」をクリック

    ３、出てきた窓の「埋め込み地図のカスタマイズとレビュー」をクリック

    ４、枠のサイズを選択、カスタムを選ぶと好きなサイズに出来ます

    ５、プレビュー画面でズームや位置、地図のタイプ(地図や衛星写真等)を感覚的に決めます。

    ６、HTMLをコピーし、サイトの埋め込みたい箇所に貼りつける。


    これでとりあえず、表示されます。次はカスタマイズの時間です。

    ※今回は引数を分かりやすくするため、改行してありますが
    改行するとエラーが出る可能性があるので、使用時は１行にしてください。

    <iframe
    width="600"
    height="350"
    frameborder="0"
    scrolling="no"
    marginheight="0"
    marginwidth="0"
    src="http://maps.google.co.jp/maps?
    <!-- ここから引数 -->
    <!-- 目的別 q → デフォルト d → 乗換案内(output=embedがない時のみ有効)-->
    f=q&
    <!-- マップ内仕様言語 ja → 日本語 en → 英語-->
    hl=ja&
    <!-- 緑の矢印マーカー座標(URLエンコードで入力すれば日本語も可) -->
    q=35.508591,139.4427722&
    <!-- マップタイプ m → マップ k → 衛星写真 p → 地形 e → Google Earth-->
    t=m&
    <!-- オーバービュー表示非表示 0 → 非表示 1 → 表示(output=embedがない時のみ有効) -->
    om=0&
    <!-- URL内に日本語を入れる際の文字コード -->
    ie=UTF8&
    <!-- 出力文字コード -->
    oe=UTF8&
    <!-- 地図中心座標 -->
    ll=35.508191,139.4440022&
    <!-- 尺度（0〜23、値が小さいほど縮小する） -->
    z=17&
    <!-- この引数があるとmapのみを枠に埋め込みます -->
    output=embed
    "></iframe>
    これを実行するとこうなります。
    http://techracho.bpsinc.jp/piichan1031/2010_06_16/1837




  • [2] mixiユーザー

    2013年05月05日 07:50


    対馬物産観光協会が 観光用のGoogleMapを作っています。
    http://www.tsushima-net.org/map/original/index.php


    対馬物産観光協会が観光用の地図はこちらからもみれます。
    https://maps.google.co.jp/maps/ms?msid=213986602109634625919.0004d280c962fa078c2e6&msa=0&ll=34.204917,129.295349&spn=0.017675,0.020213


    前のコメントの埋め込みコードは以下にすると
    対馬物産観光協会のGoogle Mapが表示されます。

    <iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.co.jp/maps/ms?msid=213986602109634625919.0004d280c962fa078c2e6&msa=0&ie=UTF8&ll=34.400347,129.329547&spn=0.597767,0.322884&t=m&brcurrent=3,0x35699de2b389dd29:0x1da9474c7b7ce790,1&output=embed"></iframe><br /><small>より大きな地図で <a href="https://maps.google.co.jp/maps/ms?msid=213986602109634625919.0004d280c962fa078c2e6&msa=0&ie=UTF8&ll=34.400347,129.329547&spn=0.597767,0.322884&t=m&brcurrent=3,0x35699de2b389dd29:0x1da9474c7b7ce790,1&source=embed" style="color:#0000FF;text-align:left">対馬観光地マップ</a> を表示</small>

    地図をクリックすると

    観光
    宿泊
    郷土料理

    毎に地図を検索できます。

    クリックすると説明がでます。

  • [3] mixiユーザー

    2013年05月07日 20:30

    ありがとうございます！！
    対馬支援wikiに埋め込みが成功しました
    http://www43.atwiki.jp/save_tsushima/pages/36.html

  • [4] mixiユーザー

    2013年05月08日 19:06

    ホームページを作成する為には、大きく分けてふたつの作業が必要です。

    1. htmlファイルを作成する。
    2. htmlファイルをサーバーに転送する。


    自分だけが見るテスト用のホームページを作る場合は2は必要ありません。1だけ作って出来栄えを自分で確認します。

    1は拡張子がhtmlまたはhtmのファイルにhtmlコードで書きます。

    一番簡単なのは、Windowsのメモ帳にhtmlコードを書き込んで拡張子のtxtをhtmlに書き換えます。するとアイコンがテキストのアイコンからWebのアイコンに代わります。

    htmlコードは見ることが出来ます。
    たとえば今このページのhtmlはIEブラウザの

    表示→ソース

    を選ぶと見ることが出来ます。

    何やら文字の両側に< >で囲まれたコードが出てきます。これがタグです。


    HTML文章（HTMLソース）は、タグと言うものを使って書いていきます。 < と > で囲まれたものをタグと言います。<タグ名>←のようにタグを書きます。
    タグは基本的に開始タグ（始まりのタグ）と終了タグ（終わりのタグ）に分かれています。開始のタグは<タグ名>のように書き、終了タグは</タグ名>開始タグと終了タグでひとつのセットになります。
    < > は必ず半角文字で書いてください。開始タグと終了タグの間に内容を書いていきます。
    http://www.ink.or.jp/~bigblock/html/start_o.html

    簡単なタグ
    <B>･･･････････････テキストを太字にする
    <I>･･･････････････テキストを斜体（イタリック）にする
    <U>･･･････････････テキストに下線（アンダーライン）を引く

    たくさんのタグを知りたい場合はこちらを見てください。

    HTMLタグリファレンス
    http://www.htmq.com/html/indexm.shtml


    ここまで分かったら、後はこのページを見ればだいたい分かります。

    HTML手打ちで作るホームページ講座 - nifty
    http://homepage2.nifty.com/tomoarai/


    "html"
    http://www.google.co.jp/search?q=%22html%22&biw=320&bih=416&ei=xSKKUd7gIqyeiAfIyIG4Aw&start=0&sa=N

  • [5] mixiユーザー

    2013年05月10日 15:16

    参加します
mixiユーザー
ログインしてコメントしよう！

[対馬ナビ] コミュニティトップへ

  • 2014年12月31日 (水)
  • 長崎県
  • 2014年12月31日 (水) 締切
  • イベントに参加する
  • 気になる！
参加者
2人

主催者

mixiユーザー

mixiユーザー

主催イベント60回

困ったときには

このページの上部へ