画像でもっと遊ぼう 3

2019年12月30日

ブログカスタマイズ
4

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

アメーバブログの【スマホでは画像は画面横いっぱい、テキストは余白あり】をFC2でやってみよう

昨日ははてなブログさんのレイアウトを真似てみましたが、今回はアメーバさんを。アメブロではスマホ版でこんな感じになります...

この記事のタイトルそのままの機能で、スマホの画面では横幅いっぱいに画像が表示されるという面白いアイデアです。

ただし私はスマホからアメブロを閲覧することは殆どないので、このAkiraさんの記事を見た時に感じたのは、アメブロではなく「facebookみたいな表示」という印象でした。

私はインスタはやりませんが facebookはアカウントを持っていて、割とマメにチェックしたり、その日に食べた物をスマホで撮影して投稿しています。

facebookアプリでの表示

スマホでfacebookアプリを開くと、画像はこのように画面の横幅いっぱいに表示されます。

アメブロではブロガーさん同士の交流が活発でSNSのような一面もあるので、もしかしたらこの機能もfacebookやインスタでの表示を参考にしたのかも知れませんね。

MEMO

ちなみに、左側は少し前に食べたランチを撮影したものです (笑)

画像のグループ表示

複数の画像を投稿すると、大体いつも次のような表示になります。
パターン 1パターン 2
スマホでの撮影で、縦長と横長の画像が両方あるとパターン1のような表示で、横長の画像だけの場合はパターン2のように表示されます。 そして一度に投稿する画像が5枚を超えると、5枚目の画像にマスクがかかって「+何枚」と表示されるようになります。

facebook風にレイアウト

上のfacebookでの表示は、これまで2回の記事で紹介したタイル風レイアウトとメイソンリーレイアウトに見た目がそっくりで、表示される画像の順序もそれぞれ同じです。 この2つのパターンを再現すると、このようになります。
タイル風メイソンリー

ただしメイソンリーレイアウトではPCでの表示は3カラムになるので見た目が変わってくるのと、両方とも「見切れ」のある状態で表示されているので、画像拡大スクリプトを利用してfacebookのようにクリックで元画像を表示させる方法をおすすめします。

画面の横幅いっぱいに表示させる

Akiraさんが記事内で紹介した方法を応用して、2つのパターンの横幅を画面いっぱいに表示させると、このようになります。
タイル風メイソンリー
こうすると、facebookのような見た目になって面白いと思います。

さらにfacebook風にレイアウトする

画像の間にあるスペースの値を小さくすると、見た目がさらにfacebookに近づきます (笑)
タイル風メイソンリー

実際に試してみる

スマホ画面のスクリーンショットだけでは、もしかすると加工していると思われるかも知れないので (爆)最後のパターンをこのページで再現したものです。

タイル風レイアウトでの再現

メイソンリーレイアウトでの再現

おしまいに

今回は、「画像でもっと遊ぼう」と題してAkiraさんのブログから3つの記事を引用させていただきました。

Akiraさんの記事がなかったら、どの方法も知ることはなかったと思います。

どれも参考になる記事で、しかも今回のような手法をCSSだけで実装できるのは本当に素晴らしいと思います。

この記事を最後に年内のブログ更新は終了しますが、頂いたコメントへの返信はするつもりです。

今年の9月に始めたばかりのブログですが、以前から気になっていたブログへコメントして友だちになれた事や、いつも訪問してくれるブロガーさんがいらっしゃる事には本当に感謝しています。

多くのコメントやご訪問ありがとうございました。

全ての皆様にとって、2020年がますます素晴らしい年になりますように。

2020年もよろしくお願いします

【重要】追記

ここでは書いていない注意点がありますので、次の記事もお読みください。

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

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

4 件のコメント

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

そふぃあ

2019/12/30 (Mon) 08:41

67: 勉強になります

こちらの記事もご紹介くださってありがとうございます。
やはり、PCとスマホで見た目の変ってくるメイソンリー、配置に頭を使って難しそうですね。
今の時代、スマホ閲覧が中心だとAkira先生も仰るので、毎回、記事もスマホから確認しますが、もともとPCを使ってブログしているので、PC画面重視になってしまいます(汗)
やってみないことには前に進まないので、いつか挑戦してみたいと思います。

ススムさん、まだブログを初めて間もないのですね⁉
実は、このテンプレートを使い始めて間もなくの頃、Google chromeの仕様が少し変わり、自分のブログで警告数が一気に増えた時があったのです。
同じテンプレートを使っている人を捜しながら警告数の数を確認するようなことをしていた時、ススムさんのブログを見つけ、ススムさんのブログだけ警告が一つも無くて「凄い!」と驚いたのが最初でした。
Web知識の豊富な人なのだと思って、ずっと尊敬しながらお付き合いが始まりました。
あの日拙い私のブログにコメントをいただけて、本当に嬉しかったです。
(長文ですいません。読み飛ばしてください。)

どうぞ、良いお年をお迎えください。
来年もよろしくお願いします。

ぼっちん

2019/12/30 (Mon) 09:17

68: あっ なるほど~♪

ススムさん、おはようございます ^^

今ね、記事中の「実際に試してみる」以下のサンプル画像部分をiPhone Xで覗いてみたら「おっ 好いじゃん(笑)」って気持ちになりましたよ~(笑)
Akiraさんブログで同記事を読んでいた時には「う~ん、自分的には使う機会はないかなぁ」なんてほぼスルーしちゃってたんですけど、これ、スマホでなかなか好い感じの見映えになりますよね ^^

や~ そふぃあさんが仰っておられるように、私もこの長期連休が終わって自分の時間が取れるようになったら、自ブログ用に研究してみようと思います ^^

そうそう(笑) これもそふぃあさんが仰っているように、ススムさんの記事ページでも「W3Cエラー」って殆どなくて、実に素晴らしいですよね、尊敬しております ^^
私はあまり細かいことには気にしない大雑把な気質ですから「W3Cエラー」がゼロなんて絶対に無理です(笑)

いつも楽しいコメントで私を楽しませてくださって、ほんとにありがとうございます ^^

来年もよろしくお付き合いください m(_ _)m

ススム

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

70: To そふぃあさん

こちらにもコメントをありがとうございます。

このブログは9月からですが、数年前からやっていてほとんど更新していないもう一つのブログでもAkiraさんのテンプレートをお借りしています。
ぼっちんさんのブログに来るのはレベルの高い皆さんばかりで、その中でもそふぃあさんは同じテンプレートを使っていて、いつも内容の濃い記事を書いているのでチェックしていたんですが、そふぃあさんの方は私の足跡から見に来てくれていると思っていました (笑)
警告がなかったのはたまたまで、まだ記事数が少なかったのも怪我の功名だったのだと思います (爆)

今回の記事でも、分かりやすく伝えることが出来ているのか自信はありませんが、まず第一に自分自身の忘備録のような感じで記事にしました。
少しでも参考にしていただければ光栄です。

ススム

2019/12/30 (Mon) 11:09
ススム

71: To ぼっちんさん

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

そうなんですよ、スマホでこれをやるとなかなかいい感じに見えていろいろ試していました。
同じ理屈で見出しも画面幅いっぱいにすることが出来ますが、いくら物理的に可能でも、あれもこれもやってチンドン屋のような見栄えになるのも変ですし (爆)

W3Cエラーは、以前Akiraさんのブログでのコメントで注意してもらってから気をつけるようにしています。
その代わり、私はぼっちんさんのようなページスピードへのこだわりはないと言うか、そっちの方は諦めています (苦笑)

ページスピードと言えば、記事の最後にも書きましたが、JSを使わずにカスタマイズ出来るのはありがたいですね。

ぼっちんさんにとっては一番忙しい年末のこの時期にコメントを書いてくださって、本当にありがとうございました。
こちらこそ、来年以降もよろしくお願いします。
良いお年をお迎えください。