レスポンシブでの違い(WordPress vs HAIK)

WordPressとHAIKとの違いでレスポンシブ・レイアウトの見え方に微妙な相違点があることを、某HAIKユーザー様から指摘され、どうしてこうなるのか教えて下さいとの問合せがありました。

早速、当方のサイトでスマフォサイズ(横幅300px位)に縮小した画面イメージを比べてお見せします。具体的にはHAIKのアイキャッチ画像とWordPressのヘッダー画像の縮小結果に注目して御覧ください。

左のWordPressのヘッダー画像は画像全体が縮小されています。
尚、WordPressでは、HAIKのアイキャッチ画像に相当する画像をヘッダー画像と呼んでいます。

真ん中のHAIKの例だとアイキャッチの背景画像は縮小されておらず画像の真ん中部分のみが表示され左右の端部分はカットされています。アイキャッチ上のテキスト文章やボタン等はスマフォサイズに合わせて自動的に再配置されています。

同じHAIKの例(右端)だと、アイキャッチ画像は全体的に縮小されています。ただ、この場合のアイキャッチは、プラグイン#eyecatchによるアイキャッチではなくて、テーマ編集で指定するトップページを除く下層ページの全てに共通するアイキャッチとなっています。

[check]WordPressでの例
20171026_スマフォ対応画面4

[check]HAIKでの例・その1
20171026_スマフォ対応画面3

[check]HAIKでの例・その2
20171026_スマフォ対応画面1


結論

結論は出ません。WordPressが正解でHAIKがダメだと言うユーザーの声が聞えて来そうですが、どちらも正解だと筆者は思っています。もし仮にWordPressのヘッダー画像上にテキスト文字が予め刷り込まれていたら、スマフォ画面の画像縮小ではテキスト文字が見えなくなるでしょう。

HAIKのアイキャッチ画像の場合、テキスト文字を画像上に予め刷り込ませずに、アイキャッチのオプション機能でアイキャッチを表示する際に、テキスト文字を上乗せる機能を利用することで、画像縮小した際、文字は縮小されずにスマフォ画面の真ん中にテキスト文字が再配置されます。

要は、レスポンシブ・レイアウトについてのメーカーのスタンスの違いでそうなっていると筆者は解釈しています。HAIKのレスポンシブ・レイアウトとは、こう言うものだと解釈しています。