もうどのサイトかも分からない薄ぼんやりとした記憶の中から「おまえら、CSSでクリックイベントが出来て何がそんなにうれしいの？」という書き込みを思い出しました。
AMPは、ユーザーのオリジナルjavascriptを許可してないので「AMPページでも使えるよ」というアイディアをメモに残します。
だいぶ前、CSSだけで行うクリックで画像を拡大 – CSS note という記事を書いていました。
この記事の画像サイズの拡大を、AMPで実現してみたいと思います。
ページ上の AMPで表示をクリックして、AMPページでリサイズできるかどうか試してみてください。
HTML
<div class="resize" tabindex="0"><img src="http://tenman.info/labo/css/files/bouquet.jpg" alt="bouquet" width="1920" height="1203" /></div>
AMP CSS
.amp-wp-article-content .resize,
.amp-wp-content .resize{
width:296px;
display:block;
padding:1em;
border:1px solid #ccc;
box-sizing:border-box;
transition: all 1s ease-in-out;
}
.amp-wp-article-content .resize:focus,
.amp-wp-content .resize:focus{
height:auto;
width:100%;
transition: all 1s ease-in-out;
outline:none;
}
.resize > p{
margin:0;
line-height:1;
}
CSS
.entry-content .resize{
width:296px;
display:block;
padding:1em;
border:1px solid #ccc;
box-sizing:border-box;
transition: all 1s ease-in-out;
}
.resize:focus{
height:auto;
width:100%;
transition: all 1s ease-in-out;
outline:none;
}
.resize > p{
margin:0;
line-height:1;
}