WP-Plugins
WordPressのプラグイン
Share buttons by lockerz / Add to any
ソーシャルボタンの設置
WPtouch
スマフォサイトに最適化してくれる
Contact Form 7
お問い合わせページの設置
RSS import
投稿内や固定ページにRSSを埋め込むには下記を記述
[RSSImport display="3" feedurl="" displaydescriptions="true" truncatedescchar="説明文の文字数(デフォルトは200)"]
- wp-contentのpluginsにDLしたプラグインを入れる
フォント
ほか
- デザインとは(他との)違いを作ること。その中に意味を込めていく
固定レイアウト
固定レイアウト
レイアウトの設定
前回のM,Sサイズは%指定。
今回はpx指定。
- Lサイズ:横幅960px
- Mサイズ:横幅620px
- Sサイズ:横幅300px
index.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>固定レイアウト</title> <link rel="stylesheet" href="style-l.css"> <link rel="stylesheet" href="style-m.css" media="only screen and (min-width:640px) and (max-width:979px)"> <link rel="stylesheet" href="style-s.css" media="only screen and (max-width:639px)"> <!--Webフォントの設定--> <link href="http://fonts.googleapis.com/css?family=Maven+Pro:900,400" rel="stylesheet" type="text/css"> </head> <body> <!--▼container--> <div id="container"> <!--▼header--> <div id="header"> <!--▼site--> <div id="site"> <h1><img src="img/logo.png" alt="PICKUP STREAM"></h1> <p>快適で楽しくて爽快な時間をプロデュース</p> </div> <!--▲site--> <!--▼nav--> <div id="nav"> <ul> <li><a href="#">HOME</a></li> <li><a href="#">CATEGORY</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">CONTACT</a></li> </ul> </div> <!--▲nav--> </div> <!--▲header--> <!--▼headerpost--> <div id="headerpost"> <img src="img/mall.jpg" alt=""> <div id="lead"> <h2>買い物に出かけよう</h2> <p>隣町に新しくできたショッピングセンターには楽しいお店がたくさんあります。1か所にまとまっているので、たくさん歩き回る必要もなく、楽々とお買い物ができておすすめです。</p> <p class="date">2012年8月3日</p> <p class="more"><a href="#">MORE</a></p> </div> </div> <!--▲headerpost--> <!--▲content--> <div id="content"> <!--▼post--> <div class="post"> <a href="#"> <img src="img/windmill.jpg" alt=""> <h2>風車と風の関係</h2> <p>風車は風を受けて回転します。このとき、効率よく風を受けるためには、風上に向かって真正面をむかなければなりません…</p> <p class="date">2012年8月1日</p> <p class="more_s">MORE</p> </a> </div> <!--▲post--> <!--▼post--> <div class="post"> <a href="#"> <img src="img/leaf.jpg" alt=""> <h2>ツルを伸ばしてどこまでも</h2> <p>ツル植物は太い木の幹に巻きつき、どんどんとツルを伸ばしていきます。太陽の当たる方向に葉をつけ、枝を伸ばしていく…</p> <p class="date">2012年7月28日</p> <p class="more_s">MORE</p> </a> </div> <!--▲post--> <!--▼post--> <div class="post"> <a href="#"> <img src="img/sand.jpg" alt=""> <h2>海岸のデコレーション</h2> <p>海岸には砂や貝殻しかないように思ってしまいますが、よく見ると草花も生えていることがわかります。ただし、海水や潮風…</p> <p class="date">2012年7月20日</p> <p class="more_s">MORE</p> </a> </div> <!--▲post--> <!--▼post--> <div class="post"> <a href="#"> <img src="img/flower.jpg" alt=""> <h2>色とりどりの絨毯</h2> <p>原生花園では今年も色とりどりの花が咲いています。特に今年は原色の色鮮やかな花がたくさん咲いていますので、週末には…</p> <p class="date">2012年7月5日</p> <p class="more_s">MORE</p> </a> </div> <!--▲post--> </div> <!--▲content--> <!--▼footer--> <div id="footer"> <p>PICKUPxSTREAM</p> <!--▼iconmenu--> <div id="iconmenu"> <ul> <li><a href="#"><img src="img/twitter.png" alt="Twitter"></a></li> <li><a href="#"><img src="img/facebook.png" alt="Facebook"></a></li> <li><a href="#"><img src="img/googleplus.png" alt="Google Plus"></a></li> <li><a href="#"><img src="img/rss.png" alt="RSS Feed"></a></li> </ul> </div> <!--▲iconmenu--> <!--▼submenu--> <div id="submenu"> <ul> <li><a href="#">Privacy Policy</a></li> <li><a href="#">Terms of Use</a></li> <li><a href="#">Contact</a></li> </ul> </div> <!--▲submenu--> <small>Copyright © PICKUP STREAM</small> </div> <!--▲footer--> </div> <!--▲container--> </body> </html>
style-l.css
@charset "UTF-8"; * { margin: 0; padding: 0; } /*layout*/ body { margin: 24px 10px; font-family: Meiryo, "メイリオ", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", sans-serif; } #container { width: 960px; margin: auto; } #header { margin-bottom: 10px; overflow: hidden; } #headerpost { margin-bottom: 30px; } #content { margin-bottom: 30px; } /*content*/ #content { overflow: hidden; } .post { float: left; width: 216px; margin-right: 32px; margin-bottom: 25px; } .post:last-child { margin-right: 0; } .post + .post + .post + .post { margin-right: 0; } /*post*/ .post img { width: 216px; height: auto; vertical-align: bottom; border: none; } .post h2 { font-size: 16px; margin: 5px 0 0; } .post p { font-size: 12px; margin: 10px 0; } .post .date { float: left; margin: 0; } .post .more_s { float: right; color: #fff; font-size: 14px; font-family: "Maven Pro", Helvetica, Arial, sans-serif; background-color: #666; background-image: url(img/more_s.png); background-repeat: no-repeat; background-position: 94% 50%; padding: 3px 25px 3px 5px; margin: 0; } .post a { color: #000; text-decoration: none; display: block; overflow: hidden; } .post a:hover { background-color: #cfffb2; } /*site*/ #site { float: left; } #site h1 { margin: 0; } #site h1 + p { color: #999; margin-top: 10px; } #site img { vertical-align: bottom; } /*nav*/ #nav { float: right; font-size: 22px; font-family: "Maven Pro", Helvetica, Arial, sans-serif; padding-top: 40px; } #nav ul { margin: 0; padding: 0; } #nav li { list-style-type: none; float: left; } #nav li a { display: block; float: left; margin-left: 20px; text-decoration: none; border-bottom: solid 5px transparent; color: #000; } #nav li a:hover { border-bottom-color: #ff1e97; } /*headerpost*/ #headerpost img { float: left; vertical-align: bottom; } #headerpost #lead { float: left; width: 300px; color: #fff; margin-left: 25px; overflow: hidden; } #headerpost h2 { margin: 20px 0; } #headerpost .more { font-size: 18px; font-family: "Maven Pro", Helvetica, Arial, sans-serif; text-align: right; } #headerpost .more a { color: #fff; background-image: url(img/more_s.png); background-repeat: no-repeat; background-position: right center; display: block; padding: 10px 30px 10px 0; text-decoration: none; } #headerpost { background-color: #333; background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#888)); background: -webkit-linear-gradient(#000 0%, #888 100%); background: -moz-linear-gradient(#000 0%, #888 100%); background: -o-linear-gradient(#000 0%, #888 100%); background: -ms-linear-gradient(#000 0%, #888 100%); background: linear-gradient(#000 0%, #888 100%); overflow: hidden; } /*footer*/ #footer { font-family: "Maven Pro", Helvetica, Arial, sans-serif; color: #fff; background-color: #333; padding: 10px 10px 20px; } #footer p { float: left; margin: 0; } /*iconmenu*/ #iconmenu { float: right; } #iconmenu ul { margin: 0; padding: 3px 0 0; } #iconmenu li { display: inline; list-style-type: none; } #iconmenu img { border: none; } /*submenu*/ #submenu { clear: both; } #submenu ul { margin: 10px 0; padding: 3px 0 0; font-size: 12px; } #submenu li { display: inline; list-style-type: none; } #submenu a { color: #ff1e97; font-weight: bold; border-right: solid 1px #fff; padding-right: 6px; margin-right: 3px; text-decoration: none; } #submenu li:last-child a { border: none; } #submenu li + li + li a { border: none; } /*Copyright*/ small { font-size: 12px; font-weight: bold; display: block; }
style-m.css
@charset "UTF-8"; /*layout*/ #container { width: 620px; } /*post*/ .post { width: 300px; margin-right: 20px; } .post:nth-child(even) { margin-right: 0; } .post img { width: 300px; } .post h2 { font-size: 22px; } .post p { font-size: 16px; } .post .more_s { font-size: 18px; } /*nav*/ #nav { padding-top: 0; } #nav li:nth-child(2) { float: none; overflow: hidden; } /*headerpost*/ #headerpost { position: relative; } #headerpost img { float: none; } #headerpost #lead { float: none; position: absolute; left: 0; bottom: 0; background-color: rgba(0,0,0,0.7); width: auto; padding: 10p 20px; margin: 0; } #headerpost h2 { font-size: 20px; margin: 0 0 20px 0; } #headerpost p { font-size: 14px; margin: 0 0 20px 0; } #headerpost .date { float: left; margin: 0; } #headerpost .more { float: right; margin: -12px 15px 0 0; }
style-s.css
@charset "UTF-8"; /*layout*/ #container { width: 300px; } .post { float: none; width:300px; margin-tight: 0; } /post/ .post img { width: 300px; } .post h2 { font-size: 22px; } .post p { font-size: 16px; } .post .more_s { font-size: 18px; } /*site*/ #site { float: none; } #site img { width: 300px; height: auto; } /*nav*/ #nav { float: none; font-size: 14px; padding-top: 6px; } #nav ul li a { margin-left: 0; margin-right: 10px; } /*headerpost*/ #headerpost img { float: none; width: 300px; height: auto; } #headerpost #lead { float: none; background-color: #252525; width: auto; padding: 10px 10px; margin: 0; } #headerpost h2 { font-size: 20px; margin: 10px 0 10px 0; } #headerpost p { font-size: 14px; margin: 0 0 20px 0; } #headerpost .date { float: left; margin: 0; } #headerpost .more { float: right; margin: -12px 15px 0 0; }
可変レイアウト
可変レイアウト
実際のサイト↓
http://puisto.moo.jp/kadai/0910/sample.html
sample.html
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <title>メディアクエリ</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="style-l.css"> <link rel="stylesheet" href="style-m.css" media="only screen and (min-width:600px) and (max-width:979px)"> <link rel="stylesheet" href="style-s.css" media="only screen and (max-width:599px)"> <!--WebFonts--> <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Maven+Pro:900,400"> </head> <body> <!--▼#container--> <div id="container"> <!--▼#header--> <div id="header"> <!--▼#site--> <div id="site"> <h1><img src="img/logo.png" alt="PICKUP STREAM "></h1> </div> <!--▼iconmenu--> <div id="iconmenu"> <ul> <li><a href="#"><img src="img/twitter.png" alt="Twitter"></a></li> <li><a href="#"><img src="img/facebook.png" alt="Facebook"></a></li> <li><a href="#"><img src="img/googleplus.png" alt="GooglePlus"></a></li> <li><a href="#"><img src="img/rss.png" alt="RSS Feed"></a></li> </ul> </div> <!--▲iconmenu--> <!--▼headermenu--> <div id="headerimg"> <img src="img/header.jpg" alt=""> </div> <!--▲headerimg--> <!--▼nav--> <div id="nav"> <ul> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">CONTACT</a></li> </ul> </div> <!--▲nav--> </div> <!--▲header--> <!--▼content--> <div id="content"> <div class="date"><span>1</span>AUG</div> <h2>海岸のデコレーション</h2> <div class="cat">CATEGORY: <a href="#">海と海岸と空</a></div> <p>海岸には砂や貝殻しかないように思ってしまいますが、よく見ると草花も生えていることがわかります。ただし、海水や潮風、強い日差しなどの影響で、大きく育つものは見当たりません。その多くは小さく、地を這って伸びています。</p> <p><img src="img/sand.jpg" alt="海岸線で生息する小さな植物"></p> <p>こうした植物は「海浜植物」と呼ばれ、砂をかぶって埋もれても、茎が伸びてまた葉を出す仕組みになってます。</p> <p>ところどころに顔を出す緑色の小さな葉っぱは、海岸をかわいくデコレーションしてくれます。海への道中で踏んづけてしまう前に、足元にあるものを観察してみるのもおもしろいですよ。</p> </div> <!--▲content--> <!--▼sidebar--> <div id="sidebar"> <!--▼.menu--> <div class="menu"> <h3>CATEGORIES</h3> <ul> <li><a href="#">山と森林</a></li> <li><a href="#">海と海岸と空</a></li> <li><a href="#">都市と建築</a></li> <li><a href="#">地下</a></li> </ul> </div> <!--▲.menu--> <!--▼.menu--> <div class="menu"> <h3>RECENT POSTS</h3> <ul> <li><a href="#">海岸のデコレーション</a></li> <li><a href="#">風車と海風の関係</a></li> <li><a href="#">ツルを伸ばしてどこまでも</a></li> <li><a href="#">色とりどりの絨毯</a></li> <li><a href="#">休日に買い物にいくなら</a></li> <li><a href="#">高層ビルと風の関係</a></li> </ul> </div> <!--▲.menu--> </div> <!--▲sidebar--> <!--▼footer--> <div id="footer"> <p>PICKUP STREAM</p> <small>Copyright © PICKUP STREAM</small> </div> <!--▲footer--> </div> <!--▲container--> </body> </html>
style-l.css
@charset "UTF-8"; /* layout */ body { margin: 24px 10px; font-family: Meiryo, "メイリオ", "Hiragino Kaku Gothic Pro", sans-serif; } #container { width: 960px; margin: auto; } #header { margin: 0 0 50px; } #content { width: 600px; float: left; margin: 0 0 50px; } #sidebar { width: 300px; float: right; margin: 0 0 50px; } #footer { clear: both; } /* site */ #site { float: left; } #site h1 { margin: 0; line-height: 1; } /* #iconmenu */ #iconmenu { float: right; text-align: right; } #iconmenu ul { margin: 0; padding: 3px 0 0; } #iconmenu li { display: inline; list-style-type: none; } #iconmenu img { border: none; } /* headerimg */ #headerimg img { vertical-align: bottom; } /* nav */ #nav { font-family: "Maven Pro", Helvetica, Arial, sans-serif; font-size: 14px; overflow: hidden; border-top: solid 1px #fff; background-color: #000; } #nav ul { margin: 0; padding: 0; } #nav li { list-style-type: none; float: left; } #nav li a { display: block; width: 120px; padding: 6px 0; border-right: solid 1px #fff; color: #fff; text-align: center; text-decoration: none; } #nav li a:hover { background-color: #0097d8; } /* content */ .date { float: right; background-color: #0097d8; padding: 8px 22px; border-radius: 55px / 48px; text-align: center; font-family: "Maven Pro", Helvetica, Arial, sans-serif; font-weight: bold; color: #ffffff; } .date span { display: block; font-size: 32px; line-height: 1.0; } #content h2 { font-size: 28px; border-bottom: solid 1px #aaa; margin: 0 0 6px; padding: 0 0 3px; } .cat { font-size: 14px; color: #666; } .cat a { text-decoration: none; color: #666; } #content p { line-height: 1.6; } /* メニュー */ .menu { margin-bottom: 50px; } .menu h3 { font-family: "Maven Pro", Helvetica, Arial, sans-serif; font-size: 26px; color: #66c1e8; margin: 0 0 5px; } .menu ul { margin: 0; padding: 0; border-top: solid 1px #aaa; } .menu li { margin-bottom: 0; list-style-type: none; border-bottom: solid 1px #aaa; } .menu li a { display: block; font-size: 14px; text-decoration: none; color: #666; padding: 10px 0 10px 20px; background-image: url(img/listmark.png); background-repeat: no-repeat; background-position: 0 50%; } .menu li a:hover { background-color: #b4f0ff; } /* #footer */ #footer { font-family: "Maven Pro", Helvetica, Arial, sans-serif; color: #fff; background-color: #000; padding: 10px 10px 20px; } #footer p { margin: 0; } #footer small { font-size: 12px; font-weight: bold; display: block; }
style-m.css
@charset "UTF-8"; /*layout*/ #container { width: 100%; } #content { width: 62.5%; } #sidebar { width: 31.25%; } /*image*/ img { max-width: 100%; height: auto; }
style-s.css
@charset "UTF-8"; /* layout */ #container { width: 100%; } #header { margin: 0 0 15px; } #content { width: 100%; float: none; } #sidebar { width: 100%; float: none; } /* image */ img { max-width: 100%; height: auto; } /* iconmenu */ #container { position: relative; } #iconmenu { position: absolute; right: 8px; bottom: 6px; } #footer { padding-bottom: 60px; } #site, #iconmenu { float: none; } /* nav */ #nav li a { width: auto; padding: 5px 8px; } /* content */ .date { float: none; font-size: 12px; line-height: 2.5; display: inline; padding: 3px 10px; border-radius: 5px; } .date span { font-size: 12px; display: inline; } #content h2 { font-size: 24px; }
GPS機能とTwitterの連携
GPS機能とTwitterの連携「東京スカイツリー」の緯度経度
なんとなく気が引けて、tweet部分はぼかしてます。
実物は、こちらで
geo.js
(function($) { /* 設定 */ var geo = { twitter: "http://search.twitter.com/search.json", lat: 35.710058, // 緯度 lng: 139.810718, // 経度 rad: 3, // 半径(km) addr: "東京スカイツリー", // 表示されている住所・施設名 timerGetTweet: 0, // getTweet関数のループを止めるためのタイマーID格納用 google: new google.maps.Geocoder() // このgeo.googleを通じてMaps APIを利用します。 }; /* 実行 */ $(function() { getTweet(); slideTweet(); $("#area-tweets").hover(function() { $(this).find("p").first().stop(); }, function() { slideTweet(); }); // form要素のsubmit時 $("#twitterModule .area-input").submit(function() { getAddress(); // sumitiイベントのデフォルト動作(action属性への遷移。この場合は同じページの再読込)をキャンセルし、リロードしないようにします。 return false; }); // input要素のblur時 $("#twitterModule input").blur(function() { getAddress(); }); }); /* 入力 */ function getAddress() { // var value = $("#twitterModule input").attr("value"); var value = $("#twitterModule input").val(); // 表示内容と入力内容の間に変更がなかった場合は何もしません。 if (geo.addr === value) { return false; } // 入力内容を表示内容として保存します。 geo.addr = value; // getGeocode関数を実行します。 getGeocode(); } /* 取得(位置情報 */ function getGeocode() { if (!geo.google) { return false; } geo.google.geocode({ "address": geo.addr }, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { geo.lat = results[0].geometry.location.lat(); geo.lng = results[0].geometry.location.lng(); } // すでに登録されたツイートを削除するためresetTweetを実行します。 resetTweet(); // getTweetは30秒ごとに実行するようになっているので、タイマーIDを使って、いったんそのタイマーを中断します。 clearTimeout(geo.timerGetTweet); // 新たにgetTweetを実行します。 getTweet(); }); } /* 消去 */ function resetTweet() { var mod = $("#twitterModule"), // ツイートエリアの高さを取得します。 // モジュールの高さ - タイトルエリアの高さ - インプットエリアの高さ areaHeight = mod.height() - mod.children(".title").height() - mod.children(".area-input").height(); h = 0, // ツイートブロックの高さ集計用 index = 0; // 削除基点となるツイートブロックのインデックス番号用 // eachメソッドでツイートブロック(p)の高さを順に加算して、ツイートエリアの高さを越えた時点で、そのインデックス番号を取得して終了する。 $("#area-tweets p").each(function(i) { h += $(this).height(); if (areaHeight < h) { index = i; return false; } }); // nextAllメソッドとremoveメソッドでインデックス番号以降のツイートブロックを削除する。 $("#area-tweets p").eq(index).nextAll().remove(); } /* 取得(ツイート) */ function getTweet() { var area = $("#area-tweets"), // Twitter Search APIのURLにパラメータを付加する。 url = geo.twitter + "?geocode=" + geo.lat + "," + geo.lng + "," + geo.rad + "km"; $.getJSON(url + "&callback=?", function(data) { var results = data.results, p = $("<p>", { "class": "address" }); // 住所表示用 // 住所を表示するブロックを追加する。 p.text(geo.addr + " 周辺").appendTo(area); for (var i = results.length; i--; ) { var p = $("<p>"), user = $("<a>", { "class": "user", target: "_blank" }), date = $("<span>", { "class": "date" }), datetime = new Date(results[i].created_at); user.text(results[i].from_user).attr("href", "http://twitter.com/" + results[i].from_user); date.text( datetime.getFullYear() + "/" + (datetime.getMonth() + 1) + "/" + datetime.getDate() + " " + datetime.toLocaleTimeString() ); results[i].text = results[i].text.replace(/(https?:\/\/[\-\/a-z0-9_~.#?&=%]+)/ig, "<a target='_blank' href='$1'>$1</a>"); results[i].text = results[i].text.replace(/@([a-z0-9_]+)/ig, "<a class='reply' target='_blank' href='http://twitter.com/$1'>@$1</a>"); p.append(user, date, "<br>", results[i].text).appendTo(area); } // 30秒後に再実行させます。 // ループ中断用にタイマーIDを格納します。 geo.timerGetTweet = setTimeout(getTweet, 30000); }); } /* 表示 */ function slideTweet() { var p = $("#area-tweets > p"), h = 0; if (!p.length) { setTimeout(slideTweet, 500); return false; } h = p.first().innerHeight(); p.first().animate({ marginTop: -h }, { duration: (h + Math.round(p.first().css("marginTop").slice(0, -2))) * 50, easing: "linear", complete: function() { $(this).remove(); slideTweet(); } }); } })(jQuery);
index.html
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <title>GPS機能とTwitterの連携</title> <link rel="stylesheet" href="css/style.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script src="http://maps.google.com/maps/api/js?sensor=false"> </script> <script src="js/modernizr.js"></script> <script src="js/geo.js"></script> </head> <body> <div id="container"> <header> <h1>Twitter x Geocode</h1> </header> <div id="wrapper"> <div id="twitterModule"> <p class="title">Twitter Module</p> <div id="area-tweets"></div> <form class="area-input"><input type="text" value="東京スカイツリー"> </form> </div> </div> <footer></footer> </body> </html>
style.css
@charset "UTF-8"; * { margin: 0; padding: 0; } body { background: #09F; } header { height: 40px; display: block; background-image: -webkit-gradient(linear, left top, left bottom,color-stop(0, rgb(77, 135, 235)),color-stop(1, rgb(29, 97, 181))); background-image: -moz-linear-gradient(-90deg,rgb(77, 135, 235) 0%,rgb(29, 97, 181) 100%); background-image: linear-gradient(-90deg,rgb(77, 135, 235) 0%,rgb(29, 97, 181) 100%); } h1 { color: #fff; font-size: 1.2em; font-family:Verdana, Geneva, sans-serif; font-weight: bold; text-align: center; padding: 6px 0 0 10px; } /* ツイッターモジュール */ #twitterModule { width: 300px; height: 300px; overflow: hidden; border: 10px solid #09F; position: absolute; left: 0; top: 40px; background: #fff; } #twitterModule .title { position: relative; padding: 0 2px 6px 0; background: #09F; color: #F2F2F2; font-size: 18px; } /* ツイートブロック */ #area-tweets p { padding: 1em; font-size: 14px; line-height: 1.2em; } #area-tweets p a { color: #3774ed; text-decoration: none; } #area-tweets p a.reply { color: #666; } #area-tweets .user, #area-tweets .date { padding-right: 1em; font-style: normal; font-weight: normal; color: #999; text-decoration: none; } /* 住所入力エリア */ #twitterModule .area-input { position: absolute; bottom: 0; width: 100%; padding-top: 10px; background: #09F; } #twitterModule .area-input input { padding: 5px 12px 2px; width: 275px; height: 16px; font-size: 12px; border: 0; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; } #area-tweets .address { padding: 1em; color: #279572; font-weight: bold; }
Google Maps API
Static Maps API
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Google Map Test</title> </head> <body> <a href="http://maps.google.com/maps/api/staticmap?center=35.724943,139.719913&zoom=16&size=500x500&maptype=roadmap&sensor=false">マップで見る</a> </body> </html>
Maps JavaScript API
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Google Map API</title> <!--[1]Google Map APIを呼び出し--> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&language=ja"></script> <!--[2]どんな地図を描くかのメイン--> <script> //地図を初期化し表示 function initialize() { //地図を表示する緯度経度を指定する var latlng = new google.maps.LatLng(35.724943, 139.719913); //地図必須プロパティを設定 var myOptions = { //ズームレベルの指定0〜17 zoom: 13, //地図の中心を指定(上記で設定の緯度経度latlng) center: latlng, //地図のタイプ設定 // ROADMAP: デフォルト、SATELLITE: 写真タイル、 HYBRID: 写真タイルと主要な機能、 TERRAIN: 物理的な起伏を示すタイル mapTypeId: google.maps.MapTypeId.ROADMAP };//地図プロパティここまで //<div id="map_canvas">と結びつけて、その領域に地図を描く var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions); //中心にマーカーの表示 var marker1 = new google.maps.Marker({ position: latlng, title:"南池袋", }); marker1.setMap(map); //マーカーの追加表示 var myLatlng = new google.maps.LatLng(35.718278,139.705824); var marker2 = new google.maps.Marker({ position: myLatlng, title:"切手の博物館" }); marker2.setMap(map); //マーカーをクリックしたら、情報ウィンドウを表示 var marker1text = 'ここは<span style="color:#0066cc;">南池袋</span>です' var infowindow1 = new google.maps.InfoWindow({ content: marker1text, maxWidth: 200 }); google.maps.event.addListener(marker1, 'click', function() { infowindow1.open(map,marker1); }); var marker2text = 'ここは<span style="color:#0066cc;">切手の博物館</span>です' var infowindow2 = new google.maps.InfoWindow({ content: marker2text, maxWidth:200 }); google.maps.event.addListener(marker2, 'click', function() { infowindow2.open(map, marker2); }) }//initialize() </script> </head> <body onLoad="initialize()"> <!--地図はここに描画される--> <div id="map_canvas" style="width: 640px; height: 480px;"></div> </body> </html>
ルート検索マップ(詳細)
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Google Maps API SDK</title> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <!--[1]Google Maps APIを呼び出し--> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&language=ja"></script> <!--[2]どんな地図を描くかのメイン処理 --> <script type="text/javascript"> //地図初期化し表示 function initialize(position) { //地図を表示する緯度経度を指定する var latlng = new google.maps.LatLng(35.728926,139.71038); //地図必須プロパティを設定 var myOptions = { //ズームレベルの指定 0〜17 zoom: 15, //地図の中心を指定(上記で設定の緯度経度latlng) center: latlng, //地図のタイプ設定 //ROADMAP:デフォルト、SATELLITE:写真タイル、HYBRID:写真タイルと主要な機能、TERRAIN:物理的な起伏を示すタイル mapTypeId: google.maps.MapTypeId.ROADMAP };//地図プロパティここまで //ルート検索 var rendererOptions = { draggable: true, preserveViewport:false }; var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions); var directionsService = new google.maps.DirectionsService(); var request = { origin: "池袋",//出発点 destination: "富士山",//到着点 travelMode: google.maps.DirectionsTravelMode.DRIVING,//運転モード unitSystem: google.maps.DirectionsUnitSystem.METRIC, optimizeWaypoints: true, avoidHighways: false, avoidTolls: false }; directionsService.route(request, function(response, status) { if (status == google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(response); directionsDisplay.setPanel(document.getElementById("directionsPanel")); } }); //<div id="map_canvas">と結びつけて、その領域に地図を描く var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); //ルート検索地図に表示する directionsDisplay.setMap(map); }//initialize() </script> </head> <body onload="initialize()"> <!-- 地図はここに描画される --> <div id="map_canvas" style="width: 640px; height: 480px;"></div> <div id="directionsPanel" style="width: 640px; height: 480px;"></div> </body> </html>
池袋から学校までのルートマップ
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <title>ルートマップ</title> <style> html, body { margin: 0; padding: 0; } div#map_canvas { width: 500px; height: 500px; } </style> <script src="http://maps.google.com/maps/api/js?sensor=true"></script> <script> var map; var directionsDisplay = new google.maps.DirectionsRenderer; var directionsService = new google.maps.DirectionsService(); function initialize() { var myOptions = { center:new google.maps.LatLng(35.728926,139.71038), zoom: 13, mapTypeId:google.maps.MapTypeId.ROADMAP, }; map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); directionsDisplay.setMap(map); calcRoute(); } var end = new google.maps.LatLng(35.724442,139.715447); function calcRoute() { var request = { origin: "池袋", destination:end, travelMode: google.maps.DirectionsTravelMode.DRIVING, optimizeWaypoints: true, }; directionsService.route(request, function(response, status) { if (status == google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(response); } }); } </script> </head> <body onload="initialize();"> <div id="map_canvas" style="width: 500px; height: 500px;"></div> </body> </html>
RSSの取得
リンクシェアの新着情報一覧を取得する
<?php require_once("function.php"); $url="http://www.linkshare.ne.jp/index.xml"; $xml=simplexml_load_file($url); $hits=$xml->channel->item; ?> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>リンクシェアサイトの新着情報 RSS表示</title> </head> <body> <p>リンクシェアサイトの新着情報一覧</p> <ul> <?php foreach ($hits as $hit) { ?> <li><a href="<?php echo h($hit->link); ?>"><?php echo h($hit->title); ?></a></li> <?php } ?> </ul> </body> </html>
function.php
<?php //htmlspecialchars: 文字列中のHTMLを無効化します function h($str) { $str=htmlspecialchars($str, ENT_QUOTES); $str=str_replace("&lt;!--","<!--",$str); $str=str_replace("--&gt;","-->",$str); return $str; } ?>
知恵袋 Q&A 一覧を取得する
chie.php
<?php require_once("yconfig.php"); require_once("function.php"); $keyword="肉料理"; $keywordurl=urlencode($keyword); $url="http://chiebukuro.yahooapis.jp/Chiebukuro/V1/questionSearch?appid=$yahooappid&query=$keywordurl&condition=solved"; $xml=simplexml_load_file($url); $hits=$xml->Result->Question; ?> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title><?php echo h($keyword); ?>のQ&A検索結果</title> <style> #container { width: 760px; margin: 20px auto; } p.question { color: #D54254; } p.question, p.answer { font-size: 0.875em; margin-left: 1.0em; text-indent: -1.0em; } </style> </head> <body> <div id="container"> <h1>「<?php echo h($keyword); ?>」のQ&A検検索結果</h1> <?php foreach ($hits as $hit) { ?> <p class="question">Q.<?php echo h($hit->Content); ?></p> <p class="answer">A.<?php echo h($hit->BestAnswer); ?> <a href="<?php echo h($hit->Url); ?>">詳しくはこちら</a> </p> <?php } ?> </div> </body> </html>
yconfig.php
<?php //キャッシュの設定情報をここに入れる $cacheOptions = array ( 'casheDir' => './chache/', 'lifeTime' => '3600',//60秒 'automaticCleaningFactor' => 200 ); //http://developer.yahoo.co.jp/ //アプリケーションID ※サイトごとに取得が必要 $yahooappid = "アプリケーションID"; ?>
WEB API
HeartRails Capture
http://capture.heartrails.com/
WebページやPDFファイルのサムネイル画像を作成できるサービス。
Google Chart Tools
https://developers.google.com/chart/infographics/?hl=ja
QRコードを生成する
<img src="http://chart.apis.google.com/chart?chs=120x120&cht=qr&chco=0000cd&chl=http://d.hatena.ne.jp/puisto/" alt="">
vintonくんの記事 Google Chart ToolsでQRコードを表示する方法を参考に色付きのQRコードにしてみました。
QRコード作成サイト
qrcode.php
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>QRコード作成サイト</title> <style> body { text-align: center; } </style> </head> <body> <p>生成されたQRコード</p> <?php $keyword = $_GET["keyword"]; $keywordurl = urlencode($keyword); $url="http://chart.apis.google.com/chart?chs=150x150&cht=qr&chl=$keywordurl"; ?> <img src="<?php echo $url; ?>"> </body> </html>
qrcode.html
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>QRコード作成サイト</title> <style> body { text-align: center; } </style> </head> <body> <p>QRコードにしたい文字を入力してください。</p> <form action="qrcode.php" method="get"> キーワード: <input type="text" name="keyword" size="40"> <input type="submit" value="検索"> </form> </body> </html>