フォーラムへの返信
-
投稿
-
CloudFront 固有の特殊な環境に限定されるものであるため、テーマ側ではそのようなコードを追加することはできません。
「C3 Cloudfront Cache Controller」というプラグインを利用されているようですが、このプラグインの
/c3-cloudfront-clear-cache/classes/WP/Fixtures.php
ファイルの 82 〜 95 行目の部分に グローバル変数
$IS_MOBILE_DPも対象に追加してください。public function cloudfront_is_mobile( $is_mobile ) { global $IS_MOBILE_DP; // CloudFront でスマートフォンと判定された場合、true を返す。. if ( isset( $_SERVER['HTTP_CLOUDFRONT_IS_MOBILE_VIEWER'] ) && 'true' === $_SERVER['HTTP_CLOUDFRONT_IS_MOBILE_VIEWER'] ) { $is_mobile = true; $IS_MOBILE_DP = true; } // CloudFront でタブレットと判定された場合、true を返す。. // （タブレットはPCと同じ扱いにしたい場合は、$is_mobile を false にする. if ( isset( $_SERVER['HTTP_CLOUDFRONT_IS_TABLET_VIEWER'] ) && 'true' === $_SERVER['HTTP_CLOUDFRONT_IS_TABLET_VIEWER'] ) { $is_mobile = true; $IS_MOBILE_DP = true; } return $is_mobile; }ヘッダーエリアの投稿タイトルにHTMLを含めることはできません。
閲覧されているブラウザの表示幅での見え方のみを考慮して任意の位置で改行した場合、より狭い表示幅(タブレットやスマートフォン)で閲覧されたときには、逆に不必要な位置で改行されているような状態になります。
AMP設定（AMPを有効化）にした場合のように
全画面（静止画）で表示することできないでしょうか？繰り返しますが、ページヘッダーエリアの背景画像は画像全体を表示するものではありません。
この場合のアイキャッチ画像はあくまで背景要素であって、そのエリアの表示サイズ(高さ)はエリア内にあるタイトルやメタ情報のコンテンツ量に依存します。コンテンツ量の状態を無視して画像のサイズ自身をヘッダーエリアの高さにするようなスタイルの場合、画像比率とエリア内のコンテンツ量、さらにブラウザの表示幅の関係によってはテキストが見切れてしまったり、逆に間延びした状態になったり、適切なデザインになりません。
これはAMPテーマでも同じです。
繰り返しますが、画像自体をそのまま見せたいのであれば、アイキャッチはページヘッダーの背景画像ではなく記事先頭に表示するようにしてください。
アイキャッチ画像とは、シングルページのページヘッダーエリアに表示されている背景画像のことでしょうか。
ページヘッダーエリアは画像全体を表示するためのエリアではなく、投稿タイトルや投稿日などの記事メタ情報を表示するエリアの背景としてのカバー要素としての背景画像です。
アイキャッチ画像自体をメインで見せたいのであれば、投稿オプションにて記事の先頭に表示する指定のみにし、ヘッダーエリアには表示しないようにしてください。
次回アップデート時に対応しますが、ひとまずは「オリジナルCSS設定」に以下を追記して対応してください。
.wp-block-cover::before{ background-position:50%; }先ほど公開した最新版にて修正いたしました。
.single-eyecatch-container .figure-entity
というセレクタに対して、高さ(height)を指定したCSSを「オリジナルスタイルシート設定」に追記してください。
規定値は36vw(ブラウザ表示幅の36%)です。ブラウザキャッシュやサーバーキャッシュの問題でないかお確かめください。
※テーマは関係ありません。
