amp blogger

Bloggerのamp対応のテンプレートを公開します

23:07

こんにちは、ともです。

Bloggerでブログを初めてもうすぐ2ヶ月が経過します。

この2ヶ月間ですが、Bloggerのテンプレートのamp対応を行っていました。

今回はBloggerのamp対応のテンプレートを公開することで利用者を増やしたいと思い投稿します。

テンプレート利用における3つの注意点

テンプレート利用において3点注意点を記載します。

利用無料

個人、法人問わず、どなたでも自由にご利用できます。

改修範囲

テンプレートのコンテンツに対する追加、修正、削除の制約はありません。

免責事項

テンプレートの使用によるデータの毀損・消失等の損害について一切の責任を負いません。

使用制限

テンプレートの使用制限について記載します。

JavaScript

ampを利用する際JavaScriptは使用できません。

ガジェット

いくつかのガジェットは使用出来ません。

Google Adsensesにも対応はしていません。(申請ボタンがでないのでサイトを応援していただけると今後対応します)

専用タグの使用

imgタグ、iframeタグ、youtubeタグなどはampの専用タグを使用します。

amp-img

アイキャッチ前提でつくっています。

このため、最初の画像のみアイキャッチ用の設定が必要です。

imgタグをnoscriptタグで囲む必要があります。

例

  
<div class='separator' style='clear: both; text-align: center;'>
  <noscript>
    <img 
       src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj41nPapHYdjldOwgzTBAMk7ggtFoeDAxyEn86ia5wta1_Hx6vLPOYWiVj10v41DjjC429xntROZLw5JIbgArTX4iM6_Ihn3qhSjqq9L2CcVtz-uTxiHBsYjfrgDVhi-DJjwg1565InkpIq/s640/blog-684748_1920%25281%2529.jpg' 
       width='760' 
       height='428' 
       data-original-width='760' 
       data-original-height='428' 
       alt='Bloggerのamp対応テンプレート公開します。' />
  </noscript>
  <amp-img 
    src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj41nPapHYdjldOwgzTBAMk7ggtFoeDAxyEn86ia5wta1_Hx6vLPOYWiVj10v41DjjC429xntROZLw5JIbgArTX4iM6_Ihn3qhSjqq9L2CcVtz-uTxiHBsYjfrgDVhi-DJjwg1565InkpIq/s640/blog-684748_1920%25281%2529.jpg' 
    width='760' 
    height='428' 
    layout='responsive' 
    alt='Bloggerのamp対応テンプレート公開します。'>
  </amp-img>
</div>

2枚目以降はampタグのみ使用します。

  
<div class='separator' style='clear: both; text-align: center;'>
  <amp-img 
    src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj41nPapHYdjldOwgzTBAMk7ggtFoeDAxyEn86ia5wta1_Hx6vLPOYWiVj10v41DjjC429xntROZLw5JIbgArTX4iM6_Ihn3qhSjqq9L2CcVtz-uTxiHBsYjfrgDVhi-DJjwg1565InkpIq/s640/blog-684748_1920%25281%2529.jpg' 
    width='760' 
    height='428' 
    layout='responsive' 
    alt='Bloggerのamp対応テンプレート公開します。'>
  </amp-img>
</div>

youtube

youtubeタグは以下の通りです。

  
<amp-youtube
    data-videoid="Jc8cStyC_LA"
    width="800"
    height="450"
    layout="responsive">
</amp-youtube>

iframe

問い合わせなどのiframeは以下の通りです。

  
<amp-iframe 
  width='800' 
  height='800' 
  layout='responsive' 
  frameborder='0' 
  sandbox='allow-scripts allow-same-origin allow-forms' 
  src='' >
    <span placeholder>読み込んでいます...</span>
</amp-iframe>