×
×

WordPress テーマ メインビジュアル(ヘッダー画像)の表示バグを修正

WordPressを利用する上で避けては通れない「バグ
今回はWordPressのテーマ「Simple Days Plus」のメインビジュアルの表示がPC、タブレット、スマートフォン共に正常に表示されないバグを修正しました。

テーマ-カスタマイズ

Simple Days Plus」を選択し、テーマのカスタマイズのヘッダー→ヘッダー画像でメインビジュアルを選択する事ができます。

ヘッダー画像の設定

「新規画像を追加」をクリックして、コンピューターから画像ファイルをアップロードしてください。お使いのテーマはヘッダーのサイズとして 1980 × 624 ピクセルの画像を使うと最もうまくいきます — 画像をアップロードしてから完璧にフィットするように切り抜くこともできます。

説明には1980px × 624pxの画像を利用すれば最適化される記載があるので1980px × 624pxの画像をアップロードしメインビジュアルに設定しました。

実機でプレビューしてみる

PCでプレビュー

少し拡大されているように見えますが問題のない範囲です。

タブレットでプレビュー

明らかに拡大されすぎています。

スマートフォンでプレビュー

もはや、どのような画像なのかわからないくらい拡大されています。

テンプレートの修正

ソースで確認するとインラインで記述されているCSSが怪しいので、該当のファイルを探し修正しました。

該当ファイルは下記の場所にあります。
Simple Days Plus」の親テーマである「Simple Days」のファイルの修正が必要なようです。
wp-content/themes/simple-days/template-parts/header/header-image.php

CSSの修正内容は?

background-sizeプロパティに「cover」が設定されていることに機能的には問題はないようですが、なぜか正常に機能していないので削除し初期値のautoを有効にしました。

auto自動的に算出される(初期値)
contain縦横比は保持して、背景領域に収まる最大サイズになるように背景画像を拡大縮小する
cover縦横比は保持して、背景領域を完全に覆う最小サイズになるように背景画像を拡大縮小する
background-sizeプロパティ

次にbackground-attachmentプロパティに「fixed」が設定されていましたが特に必要ないので削除しました。

fixed背景画像の位置が固定され、スクロールしても動かなくなります。
scrollスクロールに伴って、背景画像も移動します。
background-attachmentプロパティ

修正前、修正後の比較

修正が完了したので表示確認と比較をしてみます。
修正後はブラウザのキャッシュに以前の情報が残っている可能性もありますので一度キャッシュクリアを行ってからの確認をお勧めします。

PC修正前・修正後の比較

画像全体が見えるようになりました。

タブレット修正前・修正後の比較

PC同様画像の全体像が見えるようになりました。

スマートフォン修正前・修正後の比較

完全にセンターに配置はされていないようですが、許せる範囲には修正できました。

まとめ

今回の修正は、テーマのバージョンアップでデバッグされる可能性もありますが、デバッグされなかった場合は再度修正が必要となります。

5/2 親テーマ「Simple Days」のバージョンアップがありました。
バージョン: 0.9.164からバージョン: 0.9.165
上記のバージョンアップを適応するとやはり設定が元に戻ってしまいました。

3件のピンバック

コメントする

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

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)