Googleの検索結果ページなど、すっかりお馴染みになった「カルーセル」
AMPならサクッと秒で実装できます。
手順
拡張コンポーネントを読み込み
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.2.js"></script>
WordPressのAMPプラグインを使えば自動で読み込みをしてくれるので設定は不要です。
カルーセル部分をHTMLに記述
<amp-carousel layout="fixed-height" height="337" type="carousel">
<amp-img src="img/carousel_1.jpg" width="350" height="250"></amp-img>
<amp-img src="img/carousel_2.jpg" width="350" height="250"></amp-img>
<amp-img src="img/carousel_3.jpg" width="350" height="250"></amp-img>
</amp-carousel>
これだけでカルーセルとして表示されます。
カルーセルで使える属性
| type | carousel：カルーセル（画像を横並びで表示）、slides：スライダー（画像を1枚だけ表示） |
| width | カルーセルの横幅を設定 |
| height | カルーセルの高さを設定 |
| layout | カルーセルのレイアウト（nodisplay、fixed、responsive、fixed-height、fill、container、flex-item、intrinsicから選択。詳しくはこちら） |
| loop | カルーセルの内容がループ表示（typeがslidesの時のみ） |
| autoplay | カルーセルを自動的に動かす |
カルーセル内にテキストを追加する
カルーセルを使うときには画像だけでなくテキストも併用する事が多いと思います。
テキストをカルーセル内に追加したバージョンは以下のような感じです。
<amp-carousel layout="fixed-height" height="337" type="carousel" autoplay>
<div>
<amp-img src="img/carousel_1.jpg" width="350" height="250"></amp-img>
<p>ビールは1日2本くらい飲んでしまいます。メーカーにこだわりはありません。</p>
</div>
<div>
<amp-img src="img/carousel_2.jpg" width="350" height="250"></amp-img>
<p>ワインは時々飲みます。赤か白かだと、どちらかと言えば赤ワインが好きです。</p>
</div>
<div>
<amp-img src="img/carousel_3.jpg" width="350" height="250"></amp-img>
<p>ウイスキーはロックも好きですがソーダ割りが一番好きです。</p>
</div>
</amp-carousel>
CSSでレイアウトを調整します。
/*カルーセルアイテムを指定。勝手にこのクラスが付くのでHTMLでクラス名を指定しなくても大丈夫です*/
/*画像の幅と同じサイズに指定しないとテキストの分だけ横に伸びてしまうので*/
.amp-carousel-slide{
width:350px;
}
/*テキスト部分が折り返して表示されるように追加*/
.amp-carousel-slide p{
white-space:normal;
}
もちろんカルーセルアイテム内でaタグも使えますので、トップページなどで新着記事をカルーセルで表示させたい時などに使えます。
参考情報
この記事を書いた人
井上 憲作
1975年生まれ。PCパーツの通販サイト管理者から、大手インターネット広告代理店にて、100社以上のコンサルティングやSEO施策に従事したのち、2018年に独立。趣味はスキューバダイビング。
