画像でもっと遊ぼう 2

2019年12月29日

ブログカスタマイズ
6

前回とは違った特徴を持つ、メイソンリーレイアウトという画像の並べ方を紹介したAkiraさんの記事です。

コピペでOK CSSのみで記事内で写真をメイソンリーレイアウト

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

建築の分野でもタイルや石材を不規則に並べることで高級感を演出したり複雑なパターンで目を楽しませる技法がありますが、画像の並べ方で同じような効果を演出するテクニックです。

基本的な使い方

アスペクト比の違う画像をランダムに並べて、次のように表示させます。

レイアウトの特徴

前回のタイル風では、画像の並びが上段左から右まで行って下の段という順序ですが、このメイソンリーでは左列上から下で右の列という順序になります。

上の例では3種類のアスペクト比を持った画像を組み合わせていますが、例えば異なったアスペクト比の画像を1枚ずつ複雑に組み合わせることも出来ます。

元画像のアスペクト比は維持されるので、いわゆる「見切れ」もありません。

ブレイクポイントの設定

上のブログカードで紹介したAkira先生のスタイルシートでは、ブレイクポイントを設定することで、PCでは3カラムでスマホでは2カラムの表示になります。

PCの画面は横に長くスマホは縦長ですから理にかなっているだけでなく、スマホでも1枚ずつ見やすくなり、全てのデバイスで共通の表示になる前回のタイル風にはない長所だと思います。

画像が多い時はブレイクポイントを2つ設定して、PC=4カラム、タブレット=3カラム、スマホ=2カラムでも面白いかも知れません。

使い方のコツ

コツと言っても、私自身がこのレイアウトを使用したことはないのですが、他のブログで偶然見つけた時に感じた点です。

最初に3種類のアスペクト比を合わせたレイアウトを例として紹介しましたが、PCとスマホでの表示を見比べると、こうなります。

PCでの表示は3カラムなので下が揃っていなくてもそれほど気にはなりませんが、スマホでは2カラムで画面幅を2等分しているので、個人的にはこのように下が揃っている方が見栄えが良くなるように感じます。

これは①と⑥、②と④それに③と⑤のアスペクト比が同じで、スマホでの1列目と2列目になる画像の順番を入れ替えることで下が揃うようになります。

もちろんPCでの3カラムでも下が揃っていた方が見栄えが良くなりますが、3カラム揃えるためにはかなり複雑に計算する必要があり、またそれによってスマホでの2カラムで下が揃わなくなる可能性が高くなります。

必ずしも揃える必要はありませんが、これはこのブログでリンクしている友達のFC2ブロガーよつばさんのブログ今日も一緒に♪の記事で使われているテクニックを参考にさせていただきました。

忙しい時こそ元気に♪KNOCKKNOCK!♪

クリスマスも終わりいよいよ年の暮れの慌ただしさが増して来ましたね 少しずつ取り掛かってた大掃除も本格的に仕上げる時期ですね~

こちらではタイル風やメイソンリーレイアウトだけでなく、数多くのテクニックや装飾を使いこなしていて、何よりよつばさんご自身が楽しんでいる様子が伝わって来る素敵なブログです。

よつばさん、パクってごめんなさい (笑)

タイル風に表示する

メイソンリーレイアウトの大きな特徴はアスペクト比の異なる画像を並べて表示することですが、発想を変えてアスペクト比を揃えることで意外な効果を生み出すことが出来ます。

タイル風レイアウトでの表示

メイソンリーレイアウトでの表示

全く同じ6枚の画像ですが、表示される順序が変わる点にのみ注意すれば、メイソンリーレイアウトではスマホでも1枚ずつ大きく表示されて見やすくなるだけでなく、「見切れ」もなくなります。

次回予告

次回の記事はタイル風やメイソンリーレイアウトを応用した、ちょっとだけ凝った内容です。

どうぞお楽しみに

画像でもっと遊ぼう 3

Akiraさんのブログから「画像で遊ぼう」シリーズのタイル風レイアウトとメイソンリーレイアウトを紹介しましたが、残るもう一つはこちらの記事です。...

6 件のコメント

まだコメントはありません

そふぃあ

2019/12/30 (Mon) 08:21

66: こんにちは

こんにちは。
やっぱり朝になるとブログを覗きにきてしまう私(汗)
ご紹介くださってありがとうございます。
写真並びの順番、こんな風になって表示されるわけですね。
よつばさんの写真を拝見し、スマホで見ると綺麗に底辺が揃っていると私も気が付き、さすがだと思いました。
よつばさんのように、上手に使いこなせるようになると楽しそうです。

次の応用編、楽しみに読み進みます!

ススム

2019/12/30 (Mon) 10:37
ススム

69: To そふぃあさん

おはようございます、コメントありがとうございます。

誤解されると困るんですが、この記事にあるメイソンリーでタイル表示という発想は、そふぃあさんのブログを見ていて何となくイメージしたのが最初でした。
いつも素晴らしい画像の数々を使ったいろいろなレポートを見ていて、タイル風表示で3枚並んでいたりすると、ちょっともったいないと思っていたんです (苦笑)

と言っても、Luminousを使って見やすくする工夫もされているので、本当に余計なお世話なんですが (笑)

ですから読んでいただいて、もし参考になるところがあれば、うれしい限りです。

そふぃあ

2019/12/31 (Tue) 08:59

73: 良いお年を!

こんにちは。
お返事ありがとうございます。

> タイル風表示で3枚並んでいたりすると
お気遣いありがとうございます。
私もこれまで、写真を三枚の横並びにさせることは無かったはずなので、仰っている画像は、先日の個展でのレイアウトの話ではないかと思いますが、違いますでしょうか?
あの写真に関していうと、作者さんの許可を得ての撮影でしたので著作権がどうのこうのという話にはならないでしょうが、自然物の写真掲載とはまた異なったものになるので、あえて小さく載せ、興味のある人だけが大きくして見てくれれば良いと思って、わざとあんな方法を。
実に潔くない手段ですよね(汗)

イソンリーでタイル表示の方法も、お正月休みのうちに勉強してみようと思います。
いつもありがとうございます。

いよいよ大晦日ですね。
ススムさんも良いお年をお迎えください。

ススム

2019/12/31 (Tue) 09:39
ススム

74: To そふぃあさん

おはようございます。

どの記事だったかは記憶にありませんが、どちらにしてもヒントを頂いたことには変わりありませんから、結果オーライでお願いします
(笑)

あと著作権の話になると、このブログではトップページでグリッド表示される画像や歌詞を掲載した記事など、ツッコミどころ満載ですから (爆)

蕎麦通のそふぃあさんは、どんな年越しそばを食べるんでしょう?
私は蕎麦でなく、味噌煮込みうどんで年を越す予定です。

よつば

2020/01/02 (Thu) 12:29

76: あらっ!Σ(・ω・ノ)ノ!

ススムさん あけましておめでとうございます🎍

新年を迎えて覗きに来てビックリ!よつばのブログまで紹介して下さってるじゃないですか!
いつも褒めて下さったり、リンクまで貼って頂けるなんて...感謝感謝です( ̄人 ̄)

今年も色んな楽しみ見つけながら、楽しいブログライフを続けていきましょうね~(^▽^)/
今年もよろしくお願いします☆彡

ススム

2020/01/02 (Thu) 14:02
ススム

77: To よつばさん

あけましておめでとうございます。

この記事は、よつばさんのブログの記事を拝見して思いつきましたので、こちらこそ感謝です。

ただ、ちょっと気になる点を見つけたので、早く記事にしないと(;'д`)ウーン…