Macchiatoのアイキャッチ画像

[akari]

いつもお世話になっております。
Macchiatoにテーマ変更させていただきました。

固定ページのアイキャッチ画像を
“投稿タイトルよりも上に表示する” にチェックをして
ヘッダーエリアに背景画像(アイキャッチ)を表示させますが

その画像がものすごく拡大されて表示されます。

真ん中あたり？が大きく表示されてしまうので
思っていたようなイメージに表示されません。

表示される時の拡大サイズを変更できますか？？

また適性サイズを教えてくださると助かります。

よろしくお願いいたします。

[DigiPress サポート]

ブラウザの幅いっぱいにパララックスエフェクトを伴って表示される仕様となっており、スクロールによって画像が見切れないよう、ヘッダーエリアに表示される画像のサイズは画像のサイズ(縦、横)を元にして常に動的に計算されます。

このため、表示される端末ごと(ブラウザの表示サイズ)によってどこまでが可視エリアとして表示されるかは異なるため、「最適なサイズ」というものはありませんが、幅いっぱいに表示されることと高精細ディスプレイを考慮した場合、最低でも1500ピクセル幅の画像が望ましいといえます。

あまり大きすぎるアイキャッチ画像となると読み込み時間にも影響するため、解像度とファイルサイズのバランスを考慮する必要があります。
また、アイキャッチ画像は以下のようなプラグインでアップロードと同時に自動的に軽量化することをおすすめします。

EWWW Image Optimizer

なお、アイキャッチが表示されるヘッダーエリアのサイズは、最低高が 350ピクセル、高さ自体は ビューポートに対して 56% の高さ(height:56vh) が規定です。

アイキャッチ画像のパララックス(視差)効果を伴わなくても良い場合は、以下をオリジナルCSS設定に付きすることで表示幅を100%固定とすることができます。

.ct-hd .plx_bg {
background-size:100% auto!important;
background-position:0!important;
}

[akari]

ご説明ありがとうございました！

よくわかりました。

[大久保茂雄]

私も同じ疑問を頂いていたのですが、上記の「パララックス(視差)効果を伴わなくても良い場合」の通り、CSSにコピペしてみましたが、設定が効いていない気がします。

デモサイトで使用している画像サイズは何でしょうか？

[投稿者]

投稿