{"id":1188,"date":"2019-04-24T22:23:00","date_gmt":"2019-04-24T13:23:00","guid":{"rendered":"http:\/\/idealive.jp\/blog\/?p=1188"},"modified":"2019-04-24T22:23:00","modified_gmt":"2019-04-24T13:23:00","slug":"amp%e5%af%be%e5%bf%9c%e3%82%92%e8%a1%8c%e3%81%86%e3%80%82","status":"publish","type":"post","link":"https:\/\/idealive.jp\/blog\/2019\/04\/24\/amp%e5%af%be%e5%bf%9c%e3%82%92%e8%a1%8c%e3%81%86%e3%80%82\/","title":{"rendered":"AMP\u5bfe\u5fdc\u3092\u884c\u3046\u3002"},"content":{"rendered":"

AMP\u5bfe\u5fdc\u3092\u8a66\u3057\u3066\u307f\u305f\u3044\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n

\u307e\u305aAMP\u306b\u3064\u3044\u3066\u3067\u3059\u304c\u3001<\/p>\n

\u300cAMP(Accelerated Mobile Pages)\u3068\u306fGoogle\u3068Twitter\u3067\u5171\u540c\u958b\u767a\u3055\u308c\u3066\u3044\u308b\u3001\u30e2\u30d0\u30a4\u30eb\u7aef\u672b\u3067\u30a6\u30a7\u30d6\u30da\u30fc\u30b8\u3092\u9ad8\u901f\u8868\u793a\u3059\u308b\u305f\u3081\u306e\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3001\u307e\u305f\u306f\u305d\u306e\u305f\u3081\u306e\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af(AMP HTML)\u306e\u3053\u3068\u3067\u3059\u3002\u300d<\/p>\n

AMP\u5bfe\u5fdc\u306e\u30e1\u30ea\u30c3\u30c8<\/strong><\/p>\n

\u30fb\u30b5\u30a4\u30c8\u306e\u9ad8\u901f\u5316<\/p>\n

\u30fbGoogle\u691c\u7d22\u7d50\u679c\u306e\u30ab\u30eb\u30fc\u30bb\u30eb\u90e8\u5206\u306b\u8868\u793a\u3055\u305b\u308b\u3053\u3068\u304c\u3067\u304d\u308b<\/p>\n

AMP\u5bfe\u5fdc\u30c7\u30e1\u30ea\u30c3\u30c8<\/strong><\/p>\n

\u30fb\u4e00\u90e8\u306ejavascript\u3057\u304b\u4f7f\u7528\u3067\u304d\u306a\u3044<\/p>\n

\u30fbcss\u306e\u5916\u90e8\u547c\u51fa\u3057\u304c\u3067\u304d\u306a\u3044<\/p>\n

 <\/p>\n

\u5358\u7d14\u306a\u30cb\u30e5\u30fc\u30b9\u30b5\u30a4\u30c8\u7b49\u306e\u8a73\u7d30\u30da\u30fc\u30b8\u3092\u5bfe\u5fdc\u3059\u308b\u306e\u306f\u3088\u3055\u305d\u3046\u3067\u3059\u304c\u3001<\/p>\n

javascript\u3067\u8907\u96d1\u306a\u52d5\u304d\u3092\u3055\u305b\u305f\u3044\u30da\u30fc\u30b8\u3067\u5bfe\u5fdc\u306f\u96e3\u3057\u305d\u3046\u3067\u3059\u3002<\/p>\n

\u307e\u305f\u3059\u3067\u306b\u4f5c\u6210\u3055\u308c\u305f\u30da\u30fc\u30b8\u306b\u5bfe\u3057\u3066\u3001APM\u5bfe\u5fdc\u3092\u884c\u3046\u3068\u306a\u308b\u3068\u82e6\u52b4\u3057\u305d\u3046\u3067\u3059\u3002<\/p>\n

 <\/p>\n

AMP\u5bfe\u5fdc\u65b9\u6cd5<\/strong><\/p>\n

\u5bfe\u5fdc\u65b9\u6cd5\u306f\u3053\u306e<\/a>\u30b5\u30a4\u30c8\u3092\u53c2\u8003\u306b\u3055\u305b\u3066\u9802\u304d\u307e\u3057\u305f\u3002<\/p>\n

\u30fb<!doctype html>\u3067\u958b\u59cb<\/p>\n

\u30fb<html> \u3092<html amp>\u306b\u5909\u66f4<\/p>\n

\u30fb<head> \u30bf\u30b0\u5185\u306b <link rel=”canonical” href=”URL” \/> \u30bf\u30b0\u3092\u5165\u308c\u3066\u3001href\u306b\u81ea\u5206\u81ea\u8eab\u3092\u6307\u5b9a\u3002<\/p>\n

\u30fb<meta charset=”utf-8″>\u3092<head>\u306e\u958b\u59cb \u30bf\u30b0\u76f4\u5f8c\u306b\u914d\u7f6e<\/p>\n

\u30fb<head> \u30bf\u30b0\u5185\u306b<meta name=”viewport” content=”width=device-width,minimum-scale=1,initial-scale=1″>\u3092\u8ffd\u52a0<\/p>\n

\u30fb<script async src=”https:\/\/cdn.ampproject.org\/v0.js”><\/script>\u3092<head>\u306e\u9589\u3058\u30bf\u30b0\u306e\u76f4\u524d\u306b\u8ffd\u52a0<\/p>\n

\u30fb<img> \u3092<amp-img>\u3078\u5909\u66f4<\/p>\n

\u30fb <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}<\/style>
\n<noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}<\/style><\/noscript>\u3092\u8ffd\u52a0<\/p>\n

\u30fb<link rel=”stylesheet” href=”css\/style.css”>\u306e\u3088\u3046\u306a\u30b9\u30bf\u30a4\u30eb\u306e\u5916\u90e8\u3088\u3073\u3060\u3057\u3092\u3084\u3081\u3066\u00a0<style amp-custom> <\/style>\u306b\u5916\u90e8\u3088\u3073\u3060\u3057\u306e\u4e2d\u8eab\u3092\u8a18\u8ff0<\/p>\n

 <\/p>\n

 <\/p>\n

\u5909\u66f4\u524d\u306ehtml\uff08index.html\uff09<\/p>\n

\"\"<\/p>\n

 <\/p>\n

<!DOCTYPE html style=\"height:100%\">\r\n<head>\r\n  <meta charset=\"UTF-8\">\r\n  <title>\u30b5\u30f3\u30d7\u30eb\u30b5\u30a4\u30c8<\/title>\r\n  <meta name=\"robots\" content=\"noindex,nofollow\">\r\n  <meta name=\"viewport\" content=\"width=device-width,initial-scale=1,minimum-scale=1\" \/>\r\n  <link rel=\"stylesheet\" href=\"css\/style.css\">\r\n<\/head>\r\n<body id=\"main_pc\" style=\"height:100%\">\r\n  <!--container-->\r\n  <div style=\"position:relative;height:100%;min-height: 100%;\">\r\n    <!--header-->\r\n    <header class=\"mb40\">\r\n      <div id=\"header_dis\" class=\"tac fc1\">\u30b5\u30f3\u30d7\u30eb\u30b5\u30a4\u30c8 <\/div>\r\n      <h1><\/h1>\r\n    <\/header>\r\n    <!--header end -->\r\n    <!--contents -->\r\n    <div style=\"padding-bottom: 50px;\">\r\n      <p>\r\n        <font color=\"red\"><\/font>\r\n      <\/p>\r\n      <h2 class=\"page_title fc1 fwb mb40\" style=\"text-align:center\">HELLO!<\/h2>\r\n      <!--d_mode-->\r\n      <div class=\"d_mode tac\">\r\n        <img src=\"images\/icon144.png\" alt=\"\u753b\u50cf\">\r\n      <\/div>\r\n      <br>\r\n      <!--d_mode end-->\r\n    <\/div>\r\n    <!--contents end -->\r\n    <!--bottom-->\r\n    <div style='position:absolute;bottom:0;width:100%;'>\r\n      <!--page_top-->\r\n      <div class=\"page_top tar\">\r\n        <a href=\"#main\">\r\n          <img src=\"images\/btn_pagetop.jpg\" width=\"186\" height=\"32\" alt=\"pagetop\">\r\n        <\/a>\r\n      <\/div>\r\n      <!--page_top end-->\r\n      <!--footer-->\r\n      <footer>\r\n        <p class=\"footer_dis\"><\/p>\r\n        <div class=\"footer_box\">\r\n\r\n        <\/div>\r\n      <\/footer>\r\n      <!--footer end-->\r\n    <\/div>\r\n    <!--bottom end-->\r\n  <\/div>\r\n  <!--container end-->\r\n<\/body>\r\n<\/html><\/pre>\n
 <\/p>\n
 <\/p>\n
\u5909\u66f4\u5f8c\u306ehtml\uff08index-amp.html\uff09<\/p>\n
\"\"<\/p>\n
<!doctype html>\r\n<html amp>\r\n<head>\r\n  <meta charset=\"utf-8\">\r\n  <link rel=\"canonical\" href=\"index-amp.html\">\r\n  <meta name=\"viewport\" content=\"width=device-width,minimum-scale=1,initial-scale=1\">\r\n  <meta name=\"robots\" content=\"noindex,nofollow\">\r\n  <title>\u30b5\u30f3\u30d7\u30eb\u30b5\u30a4\u30c8<\/title>\r\n  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}<\/style>\r\n  <noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}<\/style><\/noscript>\r\n  <style amp-custom>\r\n#header_dis {\r\n    height: 45px;\r\n    background-color: #0061ff;\r\n    padding-top: 15px;\r\n    font-size: 108%;\r\n}\r\n.fc1 {\r\n    color: #FFF;\r\n}\r\n.tac {\r\n    text-align: center;\r\n}\r\nhtml, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {\r\n    margin: 0;\r\n    padding: 0;\r\n    border: 0;\r\n    outline: 0;\r\n    font-size: 100%;\r\n    vertical-align: baseline;\r\n    background: transparent;\r\n}\r\n\r\ndiv {\r\n    display: block;\r\n}\r\n\r\n#main_pc {\r\n    width: 100%;\r\n    margin: 0px auto;\r\n    font-size: 174%;\r\n}\r\n\r\nbody {\r\n    font-family: \"\u30e1\u30a4\u30ea\u30aa\", Meiryo, \"Hiragino Kaku Gothic Pro\", \"\u30d2\u30e9\u30ae\u30ce\u89d2\u30b4 Pro W3\", \"\uff2d\uff33 \uff30\u30b4\u30b7\u30c3\u30af\", \"Lucida Grande\", \"Lucida Sans Unicode\", Arial, Verdana, sans-serif;\r\n}\r\n\r\nbody {\r\n    font: 13px\/1.231 arial,helvetica,clean,sans-serif;\r\n}\r\n\r\nbody {\r\n    line-height: 1;\r\n    color: #111;\r\n}\r\n\r\n.page_title {\r\n    background-image: url(..\/images\/title_bg_2.png);\r\n    height: 60px;\r\n    font-size: 131%;\r\n    padding-left: 20px;\r\n    padding-top: 20px;\r\n}\r\n.fc1 {\r\n    color: #FFF;\r\n}\r\n.fwb {\r\n    font-weight: bold;\r\n}\r\n.fwb {\r\n    font-weight: bold;\r\n}\r\n.mb40 {\r\n    margin-bottom: 40px;\r\n}\r\n\r\nh2 {\r\n    display: block;\r\n    font-size: 1.5em;\r\n    margin-block-start: 0.83em;\r\n    margin-block-end: 0.83em;\r\n    margin-inline-start: 0px;\r\n    margin-inline-end: 0px;\r\n    font-weight: bold;\r\n}\r\n#main_pc {\r\n    width: 100%;\r\n    margin: 0px auto;\r\n    font-size: 174%;\r\n}\r\n\r\n\r\nimg {\r\n    vertical-align: middle;\r\n}\r\n\r\nimg[Attributes Style] {\r\n    width: 186px;\r\n    height: 32px;\r\n}\r\na {\r\n    color: #666;\r\n    text-decoration: none;\r\n}\r\na {\r\n    margin: 0;\r\n    padding: 0;\r\n    border: 0;\r\n    font-size: 100%;\r\n    vertical-align: baseline;\r\n    background: transparent;\r\n}\r\nuser agent stylesheet\r\na:-webkit-any-link {\r\n    color: -webkit-link;\r\n    cursor: pointer;\r\n    text-decoration: underline;\r\n}\r\n.tar {\r\n    text-align: right;\r\n}\r\n\r\n#main_pc {\r\n    width: 100%;\r\n    margin: 0px auto;\r\n    font-size: 174%;\r\n}\r\n\r\n.footer_dis {\r\n    color: #666;\r\n    font-size: 77%;\r\n    padding-left: 20px;\r\n    padding-top: 20px;\r\n    padding-bottom: 20px;\r\n}\r\n\r\np {\r\n    display: block;\r\n    margin-block-start: 1em;\r\n    margin-block-end: 1em;\r\n    margin-inline-start: 0px;\r\n    margin-inline-end: 0px;\r\n}\r\n\r\n#main_pc {\r\n    width: 100%;\r\n    margin: 0px auto;\r\n    font-size: 174%;\r\n}\r\n\r\n.d_mode {\r\n    color: #666;\r\n    padding-top: 40px;\r\n    padding-bottom: 40px;\r\n    border-bottom: #999 1px solid;\r\n}\r\n.tac {\r\n    text-align: center;\r\n}\r\n\r\nuser agent stylesheet\r\ndiv {\r\n    display: block;\r\n}\r\n\r\n#main_pc {\r\n    width: 100%;\r\n    margin: 0px auto;\r\n    font-size: 174%;\r\n}\r\n  <\/style>\r\n  <script async src=\"https:\/\/cdn.ampproject.org\/v0.js\"><\/script>\r\n<\/head>\r\n\r\n<body id=\"main_pc\" style=\"height:100%\">\r\n  <!--container-->\r\n  <div style=\"position:relative;height:100%;min-height: 100%;\">\r\n    <!--header-->\r\n    <header class=\"mb40\">\r\n      <div id=\"header_dis\" class=\"tac fc1\">\u30b5\u30f3\u30d7\u30eb\u30b5\u30a4\u30c8 <\/div>\r\n      <h1><\/h1>\r\n    <\/header>\r\n    <!--header end -->\r\n    <!--contents -->\r\n    <div style=\"padding-bottom: 50px;\">\r\n      <p>\r\n\r\n      <\/p>\r\n      <h2 class=\"page_title fc1 fwb mb40\" style=\"text-align:center\">HELLO!<\/h2>\r\n      <!--d_mode-->\r\n      <div class=\"d_mode tac\">\r\n        <amp-img height=\"144\" width=\"144\" src=\"images\/icon144.png\" alt=\"\u753b\u50cf\">\r\n      <\/div>\r\n      <br>\r\n      <!--d_mode end-->\r\n    <\/div>\r\n    <!--contents end -->\r\n    <!--bottom-->\r\n    <div style='position:absolute;bottom:0;width:100%;'>\r\n      <!--page_top-->\r\n      <div class=\"page_top tar\">\r\n        <a href=\"#main\">\r\n          <amp-img src=\"images\/btn_pagetop.jpg\" width=\"186\" height=\"32\" alt=\"pagetop\">\r\n        <\/a>\r\n      <\/div>\r\n      <!--page_top end-->\r\n      <!--footer-->\r\n      <footer>\r\n        <p class=\"footer_dis\"><\/p>\r\n        <div class=\"footer_box\">\r\n\r\n        <\/div>\r\n      <\/footer>\r\n      <!--footer end-->\r\n    <\/div>\r\n    <!--bottom end-->\r\n  <\/div>\r\n  <!--container end-->\r\n<\/body>\r\n<\/html><\/pre>\n
 <\/p>\n
\u78ba\u8a8d\u65b9\u6cd5<\/strong><\/p>\n
URL\u306e\u672b\u5c3e\u306b\u300c#development=1\u300d\u3092\u8ffd\u52a0\u3057\u3001chrome\u306e\u958b\u767a\u8005\u30c4\u30fc\u30eb\uff08F12\u3067\u958b\u304f\uff09\u3092\u78ba\u8a8d<\/p>\n
\"\"<\/p>\n
\u30b3\u30f3\u30bd\u30fc\u30eb\u306b\u300cAMP validation successful.\u300d\u304c\u8868\u793a\u3055\u308c\u3066\u3044\u308c\u3070\u6210\u529f\u3067\u3059\u3002<\/p>\n
\u306f\u3058\u3081\u306fCSS\u306e\u5185\u5bb9\u3092\u300cstyle amp-boilerplate\u300d\u306b\u8a18\u8ff0\u3057\u3066\u30a8\u30e9\u30fc\u304c\u3067\u3066\u3057\u307e\u3063\u305f\u306e\u3067\u3059\u304c\u3001<\/p>\n
\u300cstyle amp-custom\u300d\u306b\u8a18\u8ff0\u3057\u6210\u529f\u3057\u307e\u3057\u305f\u3002<\/p>\n
\u4eca\u56de\u306e\u3088\u3046\u306a\u5358\u7d14\u306a\u30da\u30fc\u30b8\u306e\u5834\u5408\u306f\u5bfe\u5fdc\u306f\u697d\u3067\u3059\u304c\u3001\u8907\u96d1\u306a\u30da\u30fc\u30b8\u306f\u3084\u306f\u308a\u5bfe\u5fdc\u305d\u3046\u3067\u3059\u3002<\/p>\n
\u4ee5\u4e0a\u3067\u3059\u3002<\/p>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
AMP\u5bfe\u5fdc\u3092\u8a66\u3057\u3066\u307f\u305f\u3044\u3068\u601d\u3044\u307e\u3059\u3002 \u307e\u305aAMP\u306b\u3064\u3044\u3066\u3067\u3059\u304c\u3001 \u300cAMP(Accelerated Mobile Pages)\u3068\u306fGoogle\u3068Twitter\u3067\u5171\u540c\u958b\u767a\u3055\u308c\u3066\u3044\u308b\u3001\u30e2\u30d0\u30a4\u30eb\u7aef\u672b\u3067\u30a6\u30a7\u30d6\u30da\u30fc\u30b8\u3092\u9ad8\u901f\u8868\u793a\u3059\u308b…\u7d9a\u304d\u3092\u8aad\u3080<\/a><\/p>\n","protected":false},"author":6,"featured_media":1196,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1188","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-1"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/idealive.jp\/blog\/wp-json\/wp\/v2\/posts\/1188"}],"collection":[{"href":"https:\/\/idealive.jp\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/idealive.jp\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/idealive.jp\/blog\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/idealive.jp\/blog\/wp-json\/wp\/v2\/comments?post=1188"}],"version-history":[{"count":5,"href":"https:\/\/idealive.jp\/blog\/wp-json\/wp\/v2\/posts\/1188\/revisions"}],"predecessor-version":[{"id":1197,"href":"https:\/\/idealive.jp\/blog\/wp-json\/wp\/v2\/posts\/1188\/revisions\/1197"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/idealive.jp\/blog\/wp-json\/wp\/v2\/media\/1196"}],"wp:attachment":[{"href":"https:\/\/idealive.jp\/blog\/wp-json\/wp\/v2\/media?parent=1188"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/idealive.jp\/blog\/wp-json\/wp\/v2\/categories?post=1188"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/idealive.jp\/blog\/wp-json\/wp\/v2\/tags?post=1188"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}