Fancie NOTE - Business Edition

Highly Flexible WordPress Theme

AMPコンポーネント表示テスト

1540 views
約 3 分
このサイトは DigiPress の AMP 表示確認用デモサイトです。
AMP モードで表示するには、スマートフォンでご覧いただくか、URL の最後に「/amp」を付けて更新してください。

このページはAMPでのギャラリーショートコード表示テスト用ページです。
AMPモードで表示するには、スマートフォンでご覧いただくか、URLの最後に「/amp」を付けて更新してください。

画像(幅が 250px 以上)

レスポンシブモード(layout=”responsive”)で表示します。

Code

<img src="https://demo.dptheme.net/dp10-amp/wp-content/uploads/sites/28/2017/09/sample.jpg" width="1600" height="1067" class="aligncenter" />

画像(幅が 250px 以下)

指定された画像サイズ(layout=”fixed”)で表示します。

Code

<img src="https://demo.dptheme.net/dp10-amp/wp-content/uploads/sites/28/2017/09/sample-250px.jpg" width="250" height="166" class="aligncenter" />

画像(width 属性のみ指定)

高さ(height 値)を自動で算出し、置換する amp-img タグに追加します。

Code

<img src="https://demo.dptheme.net/dp10-amp/wp-content/uploads/sites/28/2017/09/sample.jpg" width="500" class="aligncenter" />

画像(height 属性のみ指定)

幅(width 値)を自動で算出し、置換する amp-img タグに追加します。

Code

<img src="https://demo.dptheme.net/dp10-amp/wp-content/uploads/sites/28/2017/09/sample.jpg" height="500" class="aligncenter" />

画像(width, height 属性なし)

サイズ(width, height)を画像ファイルから直接算出し、置換する amp-img タグに追加します。

Code

<img src="https://demo.dptheme.net/dp10-amp/wp-content/uploads/sites/28/2017/09/sample.jpg" class="aligncenter" />

YouTube(URL のみを指定)

Code

https://www.youtube.com/watch?v=cAL_3NN3RzA

Vimeo(URL のみを指定)

Code

https://vimeo.com/233034128

Instagram(URL のみを指定)

Code

https://www.instagram.com/p/BYvnr6sDMIs/?hl=ja&taken-by=apple

Facebook post(URL のみを指定)

So many of you are coming to visit for #Canada150! Visit our #HiddenGems to avoid the crowds http://ow.ly/y89d30b3VkB #NationalTourismDay

Parks Canadaさんの投稿 2017年5月7日日曜日

Code

https://www.facebook.com/ParksCanada/posts/1712989015384373

Facebook video(URL のみを指定)

15 Years of GRACE

This week marks 15 years since the launch of NASA’s GRACE mission. The twin satellites have revolutionized our view of how water moves and is stored on Earth. "Revolutionary" is a word you hear often when people talk about the GRACE mission. Since the twin satellites of the U.S./German Gravity Recovery and Climate Experiment launched on March 17, 2002, their data have transformed scientists' view of how water moves and is stored around the planet."With GRACE, we effectively created a new field of spaceborne remote sensing: tracking the movement of water via its mass," said Michael Watkins, the original GRACE project scientist and now director of NASA Jet Propulsion Laboratory, Pasadena, California. Scientists have used GRACE data to make crucial discoveries about underground water, melting ice sheets, sea level rise and changes in the solid Earth itself. http://go.nasa.gov/2nFmoPi

NASA Earthさんの投稿 2017年3月15日水曜日

Code

https://www.facebook.com/nasaearth/videos/10155187938052139

Twitter(URL のみを指定)

Code

https://twitter.com/wp_learner/status/908751735337885696

Pinterest

Code

<a data-pin-do="embedPin" data-pin-lang="ja" data-pin-terse="true" href="https://www.pinterest.com/pin/410320216033094113/"></a>

Soundcloud(iframe)

Code

<iframe width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/179645512&amp;color=%23ff5500&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false"></iframe>

About The Creator

DigiPress Inc.フォトグラファー兼デザイナーサマンサ・デジ
これはユーザーのプロフィール情報エリアです。
肩書きや対象ユーザーのSNSアカウントのリンク、紹介文などをWordPressのプロフィール画面から登録するだけで自動的に表示されます。

また、各プロフィール情報はMicrodata形式として出力されるため、検索エンジンにも寄稿者として認識させることができます。

Comments & Trackbacks

  • Comments ( 3 )
  • Trackbacks ( 0 )
  1. AMPで禁止されているHTMLタグのうち、AMP用に置換できるAMPコンポーネント(amp-img, amp-youtube, amp-vimeo, amp-facebook, amp-twitter, amp-instagram, amp-pinterest, amp-iframe, amp-video, amp-audio)が問題なくAMPモードで置き換わっていることを確認するためのテストページです。

    また、GoogleアドセンスのコードもAMP用(amp-ad)に自動的にDigiPressが置換します。

Leave A Reply

*
*
* (公開されません)

Comment On Facebook