今日は僕がメインで使っている「ATLAS」のランキングの表について、検証してみたいことがあったので、ここで試してみたいと思います。
試すことは、「ランキングの表の表示がおかしくなることがある気がする！」という点です。
↓こんな現象↓
とくにPCでは正常でもスマホでおかしいみたいなことがあるので、表示がおかしくなる時の条件を探してみようと思います。
検証の結果、この条件でエラーになっているなってことが見えてきましたよ♪
ATLASのランキング表の検証① 何もいじっていない状態
まずはATLASのランキング表を何もいじっていない状態を確認します。
[1b]
| 何もいじっていない状態 | |
|---|---|
 | |
| ルームドリーマーの上野ってFacebookもやってるらしいよ。ほとんど稼働していないツイッターとインスタグラムとLINE＠もあるみたいだけど、やっぱりブログとFacebookに落ち着いているみたいだね( *´艸｀) | |
| 容量 | 100ml |
| 発売日 | 2016年9月 |
| 評価 |  |
| 価格 | ルームドリーマーの上野ってFacebookもやってるらしいよ。ほとんど稼働していないツイッターとインスタグラムとLINE＠もあるみたいだけど、やっぱりブログとFacebookに落ち着いているみたいだね( *´艸｀) |
この状態は、当然正常に表示されていました。
ATLASのランキング表の検証② 縦枠をずらしてみる
[1b]
| 縦枠をずらして検証 | |
|---|---|
| |
| ルームドリーマーの上野ってFacebookもやってるらしいよ。ほとんど稼働していないツイッターとインスタグラムとLINE＠もあるみたいだけど、やっぱりブログとFacebookに落ち着いているみたいだね( *´艸｀) | |
| 容量 | 100ml |
| 発売日 | 2016年9月 |
| 評価 | |
| 価格 | ルームドリーマーの上野ってFacebookもやってるらしいよ。ほとんど稼働していないツイッターとインスタグラムとLINE＠もあるみたいだけど、やっぱりブログとFacebookに落ち着いているみたいだね( *´艸｀) |
容量や発売日の右にある縦枠をビジュアルモードで左に寄せてみました。
ここまではPC、スマホともに正常な表示でしたが、この次からの検証結果はエラー表示になりました(ﾟдﾟlll)
ATLASのランキング表の検証③ 画像の横枠をずらしてみる
[1b]
| 画像の横枠をずらして検証 | |
|---|---|
| |
| ルームドリーマーの上野ってFacebookもやってるらしいよ。ほとんど稼働していないツイッターとインスタグラムとLINE＠もあるみたいだけど、やっぱりブログとFacebookに落ち着いているみたいだね( *´艸｀) | |
| 容量 | 100ml |
| 発売日 | 2016年9月 |
| 評価 | |
| 価格 | ルームドリーマーの上野ってFacebookもやってるらしいよ。ほとんど稼働していないツイッターとインスタグラムとLINE＠もあるみたいだけど、やっぱりブログとFacebookに落ち着いているみたいだね( *´艸｀) |
画像と紹介文の栄目の横枠をビジュアルモードで広くして見ました。
画像の上と下にスペースができただけの状態ですが、スマホ表示ではこんな感じになっています。
価格の右の枠がぐしゃぐしゃに表示されていて明らかにおかしな表示で、下にあるはずの見出しが表に食い込んできています。
さらによく見ると評価の☆の下にも謎の線が入り、これを見たユーザーからはこのページの信頼値が下がってしまうのでは？と思うほどのレベルですね。
画像の枠は触らないほうが無難そうです。
※スマホ表示はiPhone6で確認しています※
ATLASのランキング表の検証④ 評価の下の枠を広げてみる
[1b]
| 評価下の枠を広げて検証 | |
|---|---|
| |
| ルームドリーマーの上野ってFacebookもやってるらしいよ。ほとんど稼働していないツイッターとインスタグラムとLINE＠もあるみたいだけど、やっぱりブログとFacebookに落ち着いているみたいだね( *´艸｀) | |
| 容量 | 100ml |
| 発売日 | 2016年9月 |
| 評価 | |
| 価格 | ルームドリーマーの上野ってFacebookもやってるらしいよ。ほとんど稼働していないツイッターとインスタグラムとLINE＠もあるみたいだけど、やっぱりブログとFacebookに落ち着いているみたいだね( *´艸｀) |
評価の下の枠を広げてみました。
評価の項目が広くなりましたが、スマホ表示ではこんな感じです。
こちらも価格の右側がおかしな表示になり、見出しも食い込んで切るという状態に。
評価の下の線もあるので、エラー表示の時はこんな感じになるものなのかもしれません。
ATLASのランキング表の検証⑤ もう一度何もいじってない状態で挑戦
[1b]
| 何もいじっていない状態 | |
|---|---|
| |
| ルームドリーマーの上野ってFacebookもやってるらしいよ。ほとんど稼働していないツイッターとインスタグラムとLINE＠もあるみたいだけど、やっぱりブログとFacebookに落ち着いているみたいだね( *´艸｀) | |
| 容量 | 100ml |
| 発売日 | 2016年9月 |
| 評価 | |
| 価格 | ルームドリーマーの上野ってFacebookもやってるらしいよ。ほとんど稼働していないツイッターとインスタグラムとLINE＠もあるみたいだけど、やっぱりブログとFacebookに落ち着いているみたいだね( *´艸｀) |
最後にもう一度、何もいじっていない状態のランキングの表が正常に表示されるのかを検証します。
画像の枠をいじった時点で、それ以降のランキングのすべてがエラーになっているという可能性を疑ったからの検証です。
結果は・・・エラーなしで普通に表示されました♪
ランキングの表を正常に使う方法 まとめ
ATLASのランキングの表をエラーなしで正常に使う方法をまとめると・・・
横枠に触れてはいけない！！！
ということがわかりました。
（赤線で触っちゃいけない場所を示した画像）
赤線を書いておいた場所は触るとスマホでぐちゃぐちゃに表示されます。
間違ってクリックしてしまっただけでも線が動いてしまって表示がおかしくなることもあるので、極力横線には触らないようにしましょう。
僕の場合は、触ったかもと思った時点で戻るボタンで戻っています(^^)ｖ
