96's blog

WEBサイト制作科　６ヶ月コース

ケーキショップサイト06（Favicon作成、GoogleMap設置）

サイト制作 田中先生

Favicon作成

  • 先生が配布したケーキのイラストをPhotoShopでFavicon生成用に加工する。
  • 多角形選択ツールでケーキ以外の部分を選択してdelete。
  • イメージ→モード→RGBにしてpsd形式で保存しておく。
  • Faviconのサイズにしても何の絵かわかるように色を調整する。

１）イメージ→色調補正→明るさ・コントラストでコントラストを100。

２）フィルター→シャープ→アンシャープマスクで量・半径を増やす。

３）イメージ→色調補正→色相・彩度で彩度100、明るさ15ぐらい。

４）新規レイヤーを追加して背景を暗い色にする。

５）ヘタの部分を目立たせるために、ブラシツール（硬さ100）でデフォルメして描く。

  • jpeg最高画質でwebデバイス用に保存。
  • Faviconジェネレータはこちらを利用する。
  • 全てのhtmlファイルに以下を記述。
<linkrel="shortcut icon"href="パス/favicon.ico"type="image/vnd.microsoft.icon">
<linkrel="icon"href="パス/favicon.ico"type="image/vnd.microsoft.icon">

Google Map設置（iframe）

  • GoogleMapで任意の場所を表示した状態でリンクマークをクリックするとソースが表示されるので、htmlの地図画像のところに貼りつける。

f:id:webtm2013:20130829143901p:image:w360

Google Map設置（google API）

  • 参照元のscriptを記述。
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
  • 実行するscriptを記述。
<script>
  function initialize() {
    var myLatlng = new google.maps.LatLng(35.683851,139.753973);
    var myOptions = {
      zoom: 16,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    var contentString = '<div id="content">'+
        '<div id="siteNotice">'+
        '</div>'+
        '<div id="bodyContent">'+
        '<p><img src="images/cake_shop.jpg" width="200" height="137" alt="ウォンツケーキ店" /></p>'+
        '<p>ウォンツ県一途市三番町4-4-3<br />ケーキビル1F</p>'+
        '</div>'+
        '</div>';
        
    var infowindow = new google.maps.InfoWindow({
        content: contentString
    });

    var marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        title: 'Uluru (Ayers Rock)'
    });
    google.maps.event.addListener(marker, 'click', function() {
      infowindow.open(map,marker);
    });
  }
</script>
  • body要素にonloadを記述。
<bodyonload="initialize()">
  • GoogleMap表示用のdivを追加。
<divclass="googleMap"><pid="map_canvas"style="width:100%; height:100%"></p></div>
  • それに対応するCSSを記述。
div.googleMap {
	width: 450px; 
	height: 365px;
	padding: 4px;
}
  • 別の場所を表示するには、script内のvar myLatlng = new google.maps.LatLng(緯度,経度);を変更する。
  • 表示したい場所の緯度・経度を調べるには→住所から緯度・経度を表示するサービス：Geocoding。

FaviconとGoogle Mapを設置したサイト

 

ウォンツケーキ店