DigiPress

Highly Flexible WordPress Theme

INFINITIIのアイキャッチ画像表示・アニメーション動作

ホーム フォーラム デザイン関連 INFINITIIのアイキャッチ画像表示・アニメーション動作

  • このトピックには5件の返信、2人の参加者があり、最後に梶村により2年、 10ヶ月前に更新されました。
6件の投稿を表示中 - 1 - 6件目 (全6件中)
  • 投稿者
    投稿
  • #404005
    梶村
    参加者

    INFINITIIを利用しています。
    テーマ、ワードプレスのバージョンは最新です。

    INFINITIIテーマの
    モバイル表示のアイキャッチ画像について
    拡大表示・アニメーションが消せないため
    表示幅がはみ出して
    大きく画像表示幅が崩れてしまいます。

    静止画、全画面が映る適正サイズで
    アイキャッチ画像を表示させたいのですが・・・
    設定方法がわからずに困っています。

    他のドメイン・ページでも
    類似した設定で利用しているのですが
    INFINITIIのテーマだけ
    なぜか画像が崩れてしまいます。

    解決方法につきまして、ご教示いただけないでしょうか。
    何卒よろしくお願い申し上げます。

    参考サイト・URL
    https://xn--fdka2hsb.com/2017/03/29/4560/
    (当方のINFINITIIを利用したWEBサイトではすべて、同様の縮小アニメーションでのアイキャッチ表示となります。)

    #404019
    DigiPress サポート
    キーマスター

    アイキャッチ画像とは、シングルページのページヘッダーエリアに表示されている背景画像のことでしょうか。

    ページヘッダーエリアは画像全体を表示するためのエリアではなく、投稿タイトルや投稿日などの記事メタ情報を表示するエリアの背景としてのカバー要素としての背景画像です。

    アイキャッチ画像自体をメインで見せたいのであれば、投稿オプションにて記事の先頭に表示する指定のみにし、ヘッダーエリアには表示しないようにしてください。

    添付ファイル:
    添付ファイルを開くにはログインしてください。
    #404064
    梶村
    参加者

    お世話になっております。

    アイキャッチ画像とは、シングルページのページヘッダーエリアに表示されている背景画像のことでしょうか。

    ↑はい。ヘッダーエリアに表示されている背景画像のことです。

    ページヘッダーエリアは画像全体を表示するためのエリアではなく、投稿タイトルや投稿日などの記事メタ情報を表示するエリアの背景としてのカバー要素としての背景画像です。

    ↑AMP設定(AMPを有効化)にした場合
    指定した画像が全画面(静止画)で表示されるのですが・・

    ↑AMP設定(AMP無効)通常ページ表示の場合
    指定した画像のアニメーション(オーバーレイエフェクト?)が表示指定に関係なく発生して、さらに中心部の一部画像のみで表示されることになります。

    INFINITII以外のテーマでも
    背景画像に関して、全画面が表示されると思うのですが
    AMP設定(AMPを有効化)にした場合のように
    全画面(静止画)で表示することできないでしょうか?

    何卒ご教示いただけましたら、幸いでございます。

    添付ファイル:
    添付ファイルを開くにはログインしてください。
    #404068
    梶村
    参加者

    左の画像・S__52748308.jpgは
    通常モード表示(AMP無効)での画像の表示状態

    右の飛行機画像S__52748306.jpgは
    AMP有効時での画像の表示状態です。

    通常WEBページでの画像(ヘッダー画像・背景画像)表示状態でも
    画像全体が写るようにしたいのですが。

    いかがすれば宜しいでしょうか?

    #404072
    DigiPress サポート
    キーマスター

    AMP設定(AMPを有効化)にした場合のように
    全画面(静止画)で表示することできないでしょうか?

    繰り返しますが、ページヘッダーエリアの背景画像は画像全体を表示するものではありません。
    この場合のアイキャッチ画像はあくまで背景要素であって、そのエリアの表示サイズ(高さ)はエリア内にあるタイトルやメタ情報のコンテンツ量に依存します。

    コンテンツ量の状態を無視して画像のサイズ自身をヘッダーエリアの高さにするようなスタイルの場合、画像比率とエリア内のコンテンツ量、さらにブラウザの表示幅の関係によってはテキストが見切れてしまったり、逆に間延びした状態になったり、適切なデザインになりません。

    これはAMPテーマでも同じです。

    繰り返しますが、画像自体をそのまま見せたいのであれば、アイキャッチはページヘッダーの背景画像ではなく記事先頭に表示するようにしてください。

    添付ファイル:
    添付ファイルを開くにはログインしてください。
    #404163
    梶村
    参加者

    ご説明いただきありがとうございます。
    当方の理解力が足らずに申し訳ございません。

    https://xn--pckyeuc8a9327cbqo.com/gyouzayatemujin/

    上記URLページを
    モバイル(iPhone)で表示した際に
    ヘッダー画像のアニメーション停止、ぼかし、画像サイズなどの
    カスタマイズ指定、変更が反映されないのですが
    なにか対策方法を教えていただけないでしょうか?

    解決策をお尋ねさせていただきたいという旨での
    ご連絡でございます。申し訳ございません。

    ========================
    カスタマイズメニュー内の

    「ヘッダーエリア設定」をカスタマイズ
    (アーカイブ/シングルページ設定
    アーカイブページやシングルページなど、トップページ以外のページのページヘッダーエリアに関する設定を行います。)

    背景オーバーレイ設定
    ぼかし具合
    レイヤーマスク不透明度
    レイヤーマスクパターン

    などの設定がモバイル・PC表示
    共に反映されないのですが
    当方の設定に問題があるのでしょうか。
    ========================

    度々のご相談申し訳ございません。

6件の投稿を表示中 - 1 - 6件目 (全6件中)
  • このトピックに返信するにはログインが必要です。