【WordPress】SydneyテーマをiPadで見た時のスライダー不具合を解決する方法

sydnyテーマのデモサイトを横長で見た場合 Web制作ハック
スポンサーリンク

SydneyテーマをiPadで見た場合、スライダー画像の不具合の内容

sydnyテーマのデモサイトを横長で見た場合
sydnyテーマのデモサイトを横長で見た場合のエラー

iPadのSafariのブラウザアプリで横長にすると画像の一部だけ拡大されて、画像がピクセル化してしまっている現象。タブレットを縦にすると問題なく見える。

sydnyテーマのデモサイトを横長で見た場合
本来はこのように見える

Chromeアプリのブラウザではスライダーの表示は問題ない。
Safariアプリのブラウザではコードが反応しないものがあるのだろうか?

検証のためにWindowsPCにsafariをインストールしようとしたが、現在は対応していないため確認できない。

他の人のSydneyで作られたサイトを見たら同じ現象が起きている。

SydneyテーマをiPadで見た時のスライダー不具合解決法

Sydneyテーマ製作会社のサポートフォーラムに解決策が載っていました。同じ現象を質問してくれた方がいらっしゃいました。

CSSコードをカスタムCSSまたは子テーマのスタイルシートに追加すれば解決しました。
こちらをご参考ください。
https://forums.athemes.com/t/sydney-theme-on-ipad-pro/5545/7


所要時間: 3分

iPadで見た場合ののSydneyテーマTopページスライダー不具合を解決する

  1. Sydneyのサポートフォーラムを参照し、CSSコードを追加する

    上記リンクよりサポートフォーラムの該当スレッドに飛び、記載されているCSSコードをカスタムCSSまたは子テーマのスタイルシートにそのままコピー&ペーストする。

  2. エラー表示が修正されているかチェックする

    F5ボタンを押してリロードし、ipadで表示を確認すると通常どおり表示されます。


普通にGoogleで検索を掛けても、Sydneyツールボックスのエラー記事はヒットするが、出てこないので、ぜひこちらを参考にしてみてください。

iPadの機種により問題ないこともある(2021年1月14日追記)

普段使っていないiPadでみたら、上のコードを入れて無くても改善されていた。safariのアップデートがあったのかもしれない。

そもそも不具合を発見したipadで確認したら、コードが追加されていないサイトのスライダーの表示はおかしいままだった。どゆこと。

iPadのバージョン
iPadの情報

2つのipadを比較してみたら、osのバージョンなどは同じですが、機種が第7世代と第6世代という違いがありました。

ねこた
ねこた

スライダー画像の不具合表示は第7世代のipadで見られたんだよ。

ねこみ
ねこみ

第7世代のほうが新しいはずですがね。

ねこた
ねこた

第6世代では問題なく表示されたよ。

もちろん上にリンクを載せたCSSコードをカスタムCSSまたは子テーマのスタイルシートに追加すれば、第7世代でも通常通り表示されます。

まとめ

原因はいまのところわかりません。ただし、公式テーマなので、次のアップデートで修正されることを期待しています。