
複数枚の写真を掲載する時にメイソンリーレイアウトにしてみよー (o'ω')ノ








事前説明と使用注意点
私が制作したテンプレートで使うためのhtml, CSSです。他者製作テンプレートで使うにはCSSが足りないかもしれません。ご質問は弊テンプレートをご利用の方に限定させてくださいね。
CSSで簡単にできますが、テンプレートレイアウト(ページ全体レイアウト)としての採用不可です。理由は表示順序が横方向ではなく縦方向になるためです(左上 → 左下 → 右上 → 右下)
時系列が重要なブログで縦に配列というのは問題があると思いますので不可。並び順に特別な意味を持たない画像などの配列にご利用ください。
lazyloading用htmlはスクロール位置ズレ防止のために若干内容量が増えています。
共通html
ソースコードにloading属性など一部加筆しました。
通常掲載用
<div class="tile-container">
<!-- 画像一枚分 -->
<div class="tile">
<img src="画像URL" alt="" width="画像横実寸" height="画像縦実寸" loading="lazy">
</div>
<!-- ここまで -->
</div>
lazyloading掲載用
<div class="tile-container">
<!-- 画像一枚分 -->
<div class="tile" style="padding-top: calc(縦実寸 / 横実寸 * 100%);">
<img class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="画像URL" alt="" width="画像横実寸" height="画像縦実寸" loading="lazy">
</div>
<!-- ここまで -->
</div>
<!-- 画像一枚分 --> から <!-- ここまで --> までを複写してください。デフォルトでは最大横3枚並びになりますので最低でも3つの画像が必要です。
画像横(or 縦)実寸の部位はpxなど単位を書き込まないよう注意。
例)
<img src="画像URL" alt="" width="600px" height="400px" loading="lazy">
例)
<img src="画像URL" alt="" width="600" height="400" loading="lazy">
CSS
シンプル
ブレイクポイントは適当です。ご自身のページを確認しながら(ブラウザ幅を拡大・縮小しながら)最適なポイントを探してください。デフォルトは 700px にしてあります。
角を丸くしたい場合は .tile img に border-radius: 数値px; を追加してください。
写真風枠付き
ブレイクポイントは適当です。ご自身のページを確認しながら(ブラウザ幅を拡大・縮小しながら)最適なポイントを探してください。デフォルトは 700px にしてあります。
まとめ
せっかくのメイソンリーですから画像のアスペクト比はバラバラの方がおもしろいですね。 はてなブログの【写真をタイル状に並べる】をFC2でやってみよう はてなブログさんの機能パクりというか。
まぁ、パクリ…(笑) つってもweb上では当たり前にあるレイアウトですが、やろうと思った(紹介しようと思った)のははてなさんの機能紹介を見たからなのである意味パクりかもしれんな (´・ω・`)... アメーバブログの【スマホでは画像は画面横いっぱい、テキストは余白あり】をFC2でやってみよう 昨日ははてなブログさんのレイアウトを真似てみましたが、今回はアメーバさんを。
アメブロではスマホ版でこんな感じになります...
その他の画像で遊ぼう記事はコチラ
There are no comments yet.