画像でもっと遊ぼう 4

2020年01月08日

ブログカスタマイズ
8

前回メイソンリーレイアウトでは、Chromeでの表示に注意点がある事も記事にしました。

【重要】メイソンリーレイアウトの注意点

年末に書いた記事の中で紹介したメイソンリーレイアウトについて、気になる点を見つけたので忘備録を兼ねて記事にします。...

その後もいろいろ考えた中で別の注意点を見つけたので、防備録を兼ねて再び記事にします。

PC版facebookの表示

パソコンのブラウザでfacebookを開くと、前回メイソンリーレイアウトで再現した部分はこのように表示されています。

このようにメイソンリーレイアウトでは、PC版もスマホのアプリと同じ2カラムでの表示になっています。

ブレイクポイントを除去してPCでも2カラムで表示させる

Akiraさんのブログで紹介されていたメイソンリーレイアウトのスタイルシートに入っているブレイクポイントを除去してパソコンでも2カラム表示にすると、このようになります。

パソコンでは表示領域をはみ出して全体のレイアウトが見えなくなっていますが、これはfacebookのPC版はページが3カラム構成になっているのに対して、このブログでお借りしているテンプレートはPCでは1カラム表示になるためです。

新たな注意点

PC版facebookでの、別のパターンの表示です。

そしてこのパターンをメイソンリーレイアウトで再現すると、このような表示になりました。

ChromeFirefoxEdge

このようにChromeだけは折り返すところが変わってしまって左カラムが2枚になり、②の画像は表示領域からはみ出てしまっています。

そして今度は同じ3枚の画像を、PCでは3カラムにした結果です。

ChromeFirefoxEdge

これはあくまでも仮説ですが、メイソンリーレイアウトはパソコン版Chromeでは、左カラムが常に2枚以上で表示されるような気がします。

左カラムを2枚にして代用

左カラムを2枚にレイアウトを変更して、ちょっと怪しいfacebook風に表示させましたが、ブラウザによって下に大きなスペースが発生しました。

ChromeFirefoxEdge
(大きなスペース)(異常なし)(小さなスペース)

これが実際の表示です。

MEMO

iOSのSafariでは、正常に表示されています。

まとめ

Akiraさんの【スマホでは画像は画面横いっぱい、テキストは余白あり】のカスタマイズの応用でタイル風レイアウトとメイソンリーレイアウトをカスタマイズしましたが、それ自体は自分でも気に入っています。

ただしfacebook風レイアウトの場合は、タイル風ではイメージ通りに表示できましたが、メイソンリーレイアウトでは注意点が多く、facebook風を意識しない方がシンプルに楽しめると感じました。

最後に、メイソンリーレイアウトを紹介した記事でのレイアウトを、スマホでは画面幅いっぱいにした表示です。

スマホでの表示です。

このカスタマイズだったら、メイソンリーレイアウトをもっと遊べると思います。

8 件のコメント

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

そふぃあ

2020/01/09 (Thu) 07:57

92: こんにちは

いろいろご紹介くださってありがとうございます。
メイソンリーの場合、使用ブラウザによって見え方も様々なのですね。
パズルは苦手ではないはずですが、メイソンリーで6~7枚の写真をレイアウトしようと思うと、それだけで時間がかかってしまいそうな私です(汗)
使う機会がありましたら、私も注意して利用してみようと思います。
いつもありがとうございます。

ススム

2020/01/09 (Thu) 10:42
ススム

94: To そふぃあさん

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

今回のように変則的なレイアウトでなければ、それほど気をつける必要はないと思います。
もしそふぃあさんがChromeでブログを書いているのなら、プレビュー画面で確認も出来ますからね。

言われるように、パズルのような感覚でご自身が楽しみながら組み合わせて、是非お試しください。

徳川たぬこ

2020/01/09 (Thu) 12:08

96: 初めまして

御足跡からいつもこっそり覗かせていただいておりました。徳川たぬこと申します。
先日、友達のアメブロの記事を見て、画像が大きくてうらやましいな~、
などと思っておりましたところにタイムリーな記事をアップしてくださり本当にありがとうございます。

Akira様のカスタマイズを使わせていただき、最新記事にて使用してみました。
本当にアメブロ(のよう)になっていて大満足です!
ありがたく御礼申し上げます。

ススム

2020/01/09 (Thu) 13:20
ススム

97: To 徳川たぬこさん

はじめまして、コメントありがとうございます。
思いついた事を試してみて、上手く行ったり失敗だったりした内容を、自分の忘備録を兼ねて記事にしました。

そちらの最新記事をスマホから拝見しましたが、とてもいい感じですね。

また寄らせていただいて、折を見て私もコメントさせていただきます。

-

2020/01/09 (Thu) 22:57

98: 管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

ススム

2020/01/10 (Fri) 00:27
ススム

99: To 非公開Aさん

こんばんは、お忙しい中でコメントをありがとうございました。
ご紹介いただいたブログも、楽しく拝見しました。

私もあんな記事が書きたいと思います。

-

2020/01/10 (Fri) 21:58

100: 管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

ススム

2020/01/11 (Sat) 09:31
ススム

102: To 非公開Aさん

了解です。
今後ともよろしくお願いします。