WordPress Snippet

ワードプレスをカスタマイズしよう

AMPページで行う クリックで画像を拡大

もうどのサイトかも分からない薄ぼんやりとした記憶の中から「おまえら、CSSでクリックイベントが出来て何がそんなにうれしいの?」という書き込みを思い出しました。

AMPは、ユーザーのオリジナルjavascriptを許可してないので「AMPページでも使えるよ」というアイディアをメモに残します。

だいぶ前、CSSだけで行うクリックで画像を拡大 – CSS note という記事を書いていました。

この記事の画像サイズの拡大を、AMPで実現してみたいと思います。

ページ上の AMPで表示をクリックして、AMPページでリサイズできるかどうか試してみてください。

bouquet

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;
}

関連リンク

イベント – CSS note