TCDテーマ【Muum】Ver.3.1及び3.1.1 ヘッダー画像の挙動の件

IT関連
当ページのリンクには広告が含まれています。

Muum Ver.3.1 ヘッダーロゴ画像がメニューやイメージに刺さる件

WordPressテーマMuumVersion3.1にアップデートしたらヘッダーロゴ画像の挙動がおかしくなった。画面横幅最大表示時には問題なく表示されるが、ブラウザウインドゥを絞り画面横幅を小さくしてヘッダーメニューが非表示になった際にヘッダーロゴ画像がトップイメージ画像に被るようになった。ヘッダーロゴがあるスペースの縦幅が画面表示サイズにより変化している(おそらく100px<>60px)ためだと思う。スマホでも確認するとヘッダーロゴ画像が盛大にトップイメージ画像にぶっ刺さってくれてるじゃないの!いやこれじゃちょっとマズイ、捨て置けないとして時間を作って緊急対応する。

問題解決するも…

ヘッダーロゴがある表示スペースの縦幅が画面表示サイズにより変化しているのならば小さいサイズの方にヘッダーロゴ画像の縦幅を合わせるしかない。画面を絞った時の表示縦幅を60pxと割り出してヘッダーロゴ画像をリサイズ。この画像を新しいヘッダーロゴ画像として設定して表示確認。ブラウザウインドゥを絞ってヘッダーメニュー表示・非表示でも問題なくヘッダーロゴは表示されているが、いかんせんサイズが小さくなったので見た目のインパクトが弱くなった。せっかく割と良く出来たデザイン(当社比)なのにこれじゃぁな~、とモヤるも、ヘッダーロゴ画像が盛大にトップイメージ画像にぶっ刺さるよりはマシと自分を納得させる(しかない)。スマホ表示もしっくりくる。問題解決めでたしめでたし。

で、7月14日に軽微な不具合修正などを含むVer.3.1.1リリース。やっぱな~大幅アップデートの後にチマチマと不具合修正版来るんだよな~と思いつつ不具合修正内容を確認。その中の一つにヘッダーロゴ画像にヘッダーの縦幅を超える画像を設定した際のレイアウト崩れを修正がある。これは最近対応したばかりの件ではないか。やっぱりバージョンアップによる不具合だったのかと思いつつアップデートを実行。早速ヘッダーロゴをもとの大きさ縦幅100px版に戻す設定にして確認したところ…。

Muum Ver.3.1.1 ヘッダーロゴ画像が小さく表示される件

ヘッダーロゴの大きさ戻らない!

ヘッダー画像 ヘッダーメニューあり版

ヘッダーメニューありの場合の表示

…どころかブラウザウインドゥを絞ったらもっと小さくなっちゃったアルよ!

ヘッダー画像 ヘッダーメニューあり版

ヘッダーメニュー無しの場合の表示

 

なにアルかこれ?またしても検証に余計な時間を取られる羽目に。確認で下記の検証をしてみる。

検証と仮説

  1. ブラウザのキャッシュを読み込んでいるのかと思いキャッシュされた画像とファイルを削除してみる→小さいまま変化なし(キャッシュを読み込んでいる可能性消滅
  2. 既存の画像をWordPressから削除し、同じ画像を新たに名前を変えてアップロードして設定→小さいまま変化なし(表示画像の画像名で新画像であることを確認)
  3. モバイル用の画像の設定を削除してみる→PCブラウザ変化なし、モバイル表示では画像が消えて文字表記に(PC版でモバイル版を見ている可能性消滅

2.の確認によりヘッダーロゴ画像のサイズはテーマ側で制御している可能性を確認する。試しにヘッダーロゴ画像を縦幅100px版と60px版を交互に設定して見比べるとほぼ同じサイズで表示されている。どうやらテーマ側でヘッダーロゴ画像を強制的に縦幅60pxにリサイズしている模様。さらにブラウザウインドゥを絞ったらもっと小さくリサイズする模様。なんのために?なんの意味が?を考えるとひとつの仮説を思いつく。

ヘッダーロゴ画像が表示されるエリアいっぱいの表示をテーマ側で嫌気。ヘッダーロゴ画像上下にマージン(余白)を作ってトップメニューやトップイメージにぴったり近接しないようにしたもの。

多分これではないかと。こうしておけば今後ヘッダーロゴ画像が表示されるエリアの縦幅を変更したとしても問題は発生しにくい。ユーザー側がヘッダーロゴ画像をもっと大きく表示させたいのであれば、現状では子テーマを作って自力で該当箇所のプログラムを書き変えるしかないと思う。あとはテーマ側でそういう設定ができるアップデートを待つしかない。

まとめ

それにしても今回の件で思ったのは2つ
ひとつめは、デザイン面ではこちらの意向よりもテーマ側の意向が優先されるということ。こちらも特に労せずしてデザインのプロが組み上げたサイトレイアウトを使えるメリットのためにMuumを含むTCDテーマを使用しており、大抵の場合の変更は特に問題視せずに受け入れておりました。ただ今回はサイトの顔のイメージでもあるヘッダーロゴに関わる件だったのでちょっと時間かけて検証と確認をしました。

ふたつめは、以前からも思ってましたがTCDテーマの大幅アップデートの後には必ずちょいちょい不具合修正版がでるので、大幅アップデートバージョンがリリースされたらすぐにはアップデートせず、しばらく時間を置いて不具合修正のバタバタが落ち着いてから更新した方が良い、に尽きます。

https://yuugikyo-rerise.net/wp-content/uploads/2023/02/gamer_face_1_80px.gif

もちろん今後も普通にMuumは使います!が…

https://yuugikyo-rerise.net/wp-content/uploads/2023/02/ailian01_face_1_80px.gif

もう少し慎重にリリース前アップデート検証お願いします!

 

関連記事:

 

迎麻1UPらっきー

迎麻1UPらっきー

レトロゲームの追憶、IT系、自身の近況、フィットネスについて書き綴ります。記事へのコメントなどはX(旧Twitter)まで。

関連記事

特集記事

TOP
CLOSE