ワードプレステーマ【ATLAS】のランキングの表示が変になる原因を検証!「解決済み」

ルームドリーマーの画像

上野

上野
こんにちは、ルームドリーマーの上野です!

今日は僕がメインで使っている「ATLAS」のランキングの表について、検証してみたいことがあったので、ここで試してみたいと思います。

試すことは、「ランキングの表の表示がおかしくなることがある気がする!」という点です。

↓こんな現象↓

ATLASのランキングの表がおかしくなった画像

とくにPCでは正常でもスマホでおかしいみたいなことがあるので、表示がおかしくなる時の条件を探してみようと思います。

検証の結果、この条件でエラーになっているなってことが見えてきましたよ♪

ATLASのランキング表の検証① 何もいじっていない状態

まずはATLASのランキング表を何もいじっていない状態を確認します。

何もいじっていない状態
ルームドリーマー上野かずのファイスブックの画像
ルームドリーマーの上野ってFacebookもやってるらしいよ。ほとんど稼働していないツイッターとインスタグラムとLINE@もあるみたいだけど、やっぱりブログとFacebookに落ち着いているみたいだね( *´艸`)
容量100ml
発売日2016年9月
評価
価格ルームドリーマーの上野ってFacebookもやってるらしいよ。ほとんど稼働していないツイッターとインスタグラムとLINE@もあるみたいだけど、やっぱりブログとFacebookに落ち着いているみたいだね( *´艸`)

この状態は、当然正常に表示されていました。

ATLASのランキング表の検証② 縦枠をずらしてみる

縦枠をずらして検証
ルームドリーマー上野かずのファイスブックの画像
ルームドリーマーの上野ってFacebookもやってるらしいよ。ほとんど稼働していないツイッターとインスタグラムとLINE@もあるみたいだけど、やっぱりブログとFacebookに落ち着いているみたいだね( *´艸`)
容量100ml
発売日2016年9月
評価
価格ルームドリーマーの上野ってFacebookもやってるらしいよ。ほとんど稼働していないツイッターとインスタグラムとLINE@もあるみたいだけど、やっぱりブログとFacebookに落ち着いているみたいだね( *´艸`)

容量や発売日の右にある縦枠をビジュアルモードで左に寄せてみました。

ここまではPC、スマホともに正常な表示でしたが、この次からの検証結果はエラー表示になりました(゚д゚lll)

ATLASのランキング表の検証③ 画像の横枠をずらしてみる

画像の横枠をずらして検証
ルームドリーマー上野かずのファイスブックの画像
ルームドリーマーの上野ってFacebookもやってるらしいよ。ほとんど稼働していないツイッターとインスタグラムとLINE@もあるみたいだけど、やっぱりブログとFacebookに落ち着いているみたいだね( *´艸`)
容量100ml
発売日2016年9月
評価
価格ルームドリーマーの上野ってFacebookもやってるらしいよ。ほとんど稼働していないツイッターとインスタグラムとLINE@もあるみたいだけど、やっぱりブログとFacebookに落ち着いているみたいだね( *´艸`)

画像と紹介文の栄目の横枠をビジュアルモードで広くして見ました。

画像の上と下にスペースができただけの状態ですが、スマホ表示ではこんな感じになっています。

ATLASのランキングの表示がエラー?になった画像

価格の右の枠がぐしゃぐしゃに表示されていて明らかにおかしな表示で、下にあるはずの見出しが表に食い込んできています。

さらによく見ると評価の☆の下にも謎の線が入り、これを見たユーザーからはこのページの信頼値が下がってしまうのでは?と思うほどのレベルですね。

画像の枠は触らないほうが無難そうです。

※スマホ表示はiPhone6で確認しています※

ATLASのランキング表の検証④ 評価の下の枠を広げてみる

評価下の枠を広げて検証
ルームドリーマー上野かずのファイスブックの画像
ルームドリーマーの上野ってFacebookもやってるらしいよ。ほとんど稼働していないツイッターとインスタグラムとLINE@もあるみたいだけど、やっぱりブログとFacebookに落ち着いているみたいだね( *´艸`)
容量100ml
発売日2016年9月
評価
価格ルームドリーマーの上野ってFacebookもやってるらしいよ。ほとんど稼働していないツイッターとインスタグラムとLINE@もあるみたいだけど、やっぱりブログとFacebookに落ち着いているみたいだね( *´艸`)

評価の下の枠を広げてみました。

評価の項目が広くなりましたが、スマホ表示ではこんな感じです。

ATLASのランキングの表示がエラー?になった画像

こちらも価格の右側がおかしな表示になり、見出しも食い込んで切るという状態に。

評価の下の線もあるので、エラー表示の時はこんな感じになるものなのかもしれません。

ATLASのランキング表の検証⑤ もう一度何もいじってない状態で挑戦

何もいじっていない状態
ルームドリーマー上野かずのファイスブックの画像
ルームドリーマーの上野ってFacebookもやってるらしいよ。ほとんど稼働していないツイッターとインスタグラムとLINE@もあるみたいだけど、やっぱりブログとFacebookに落ち着いているみたいだね( *´艸`)
容量100ml
発売日2016年9月
評価
価格ルームドリーマーの上野ってFacebookもやってるらしいよ。ほとんど稼働していないツイッターとインスタグラムとLINE@もあるみたいだけど、やっぱりブログとFacebookに落ち着いているみたいだね( *´艸`)

最後にもう一度、何もいじっていない状態のランキングの表が正常に表示されるのかを検証します。

画像の枠をいじった時点で、それ以降のランキングのすべてがエラーになっているという可能性を疑ったからの検証です。

結果は・・・エラーなしで普通に表示されました♪

ランキングの表を正常に使う方法 まとめ

ATLASのランキングの表をエラーなしで正常に使う方法をまとめると・・・

横枠に触れてはいけない!!!

ということがわかりました。

ATLASのランキングの表をの画像
(赤線で触っちゃいけない場所を示した画像)

赤線を書いておいた場所は触るとスマホでぐちゃぐちゃに表示されます。

間違ってクリックしてしまっただけでも線が動いてしまって表示がおかしくなることもあるので、極力横線には触らないようにしましょう。

僕の場合は、触ったかもと思った時点で戻るボタンで戻っています(^^)v

Facebook情報

リアルタイムの子育てやアフィリエイトの様子はFacebookで配信しています。

友達申請大歓迎!申請後は「ルームドリーマーのブログから来た!」などの一言メッセージをもらえると嬉しいです♪

ルームドリーマー上野かずのファイスブックの画像
Facebookはこちら

 

 COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です