画像レイアウトのサポート

この記事では、テーマがサポートする再利用可能な画像レイアウトクラスを紹介します。

横並びのペア

コードを表示

<div class="media-pair">
  <img src="image-url" alt="img 01">
  <img src="image-url" alt="img 02">
</div>

高さ固定の縦長画像の行

media-portrait-h-220 / 240 / 280 / 360 / 480 を使って表示の高さを揃えられます。画像は比率を保って縮小され、切り抜きやページ送りは発生しません。

コードを表示

<div class="media-portrait-row media-portrait-h-240">
  <img src="image-url" alt="img 01">
  <img src="image-url" alt="img 02">
</div>

自動調整グリッド

コードを表示

<div class="media-grid cols-3 masonry-js">
  <img src="image-url" alt="img 01">
  <img src="image-url" alt="img 02">
  <img src="image-url" alt="img 03">
</div>

幅を指定した単一画像

media-w-100 / 95 / 90 … を 5% 刻みで指定できます。

画像が左、テキストが右

画像の横に短いキャプションやメモ、手順を配置できます。

「重要な画像1枚 + 段落1つ」のレイアウトに適しています。

画像が右、テキストが左

reverse を追加すると順序が反転します。モバイルでは1カラムに折りたたまれます。

カルーセル（ライトボックス付き）

ギャラリーライトボックス

メイン画像を中央に配置し、その下にサムネイルの列を表示します。サムネイルや矢印をクリックして移動し、メイン画像をクリックすると全画面表示になります。