amp blogger

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

こんにちは、ともです。

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>
  

使用方法

テンプレートに【】の記号を記載しています。

ご自身のサイトに合わせて値を設定して下さい

テンプレートダウンロード

こちらからダウンロードできます

内容をコピーして使用して下さい。

こちらを参照してください

最後に

ご利用の際はからなずテンプレートのバックアップを行ってご使用ください

ご不明点があればお問い合わせからお問い合わせください。

今後も定期的に更新は行います。

よろしくお願いします。

コメント

0 件のコメント:

コメントを投稿

コメントをお待ちしています。