- このトピックには9件の返信、2人の参加者があり、最後に
により2年、 10ヶ月前に更新されました。
-
投稿
-
イラレでカバー画像を作ったのですがなかなか適切なサイズになりません（特に高さ）。高さを600PXで作っても縦に大きな画像になってしまいます。今は３００ｐｘに設定してカバー画像にしています。
表示も少し画質が悪く（フルサイズにしている）どのサイズで作ったら良いか教えて頂けたらと思います。質問場所がここで合っているのかわかりませんがご回答いただけたらと思います。
SnowMonkeyバージョン： 14.3.4
Snow Monkey Blocksバージョン：11.4.1
Snow Monkey Editorバージョン： 5.0.6
いいねをした人: 居ませんSnow Monkey のページヘッダーの画像の表示は、どのような画像を入れてもそれなりの見た目になるように、画像を一定の大きさに広げて（縮めて）表示されるようにしています。決まったぴっちりの大きさで表示させたいのであれば CSS で調整が必要です。
もうちょっと調整が必要かもですがベースは下記のような感じでしょうか。
.c-page-header[data-has-image=true] { min-height: auto !important; height: auto !important; } .c-page-header[data-has-image=true] .c-page-header__bgimage, .c-page-header[data-has-image=true] .c-page-header__bgimage > img { position: static !important; }いいねをした人: 居ませんお返事ありがとうございます。
「初めての買取」のページのトップ画像は高さ300pxの画像を使用。
「よくある質問」ページのトップ画像は高さ300px以上の画像を使用。
このカバー画像をイラレで高さ300ｐｘ以上で制作して適用されると画像が切れてしまうんです。
検証したら
<div class=”wp-block-cover alignfull has-background-dim”><img class=”wp-block-cover__image-background wp-image-1094″以下略
でした。
そして高さ300pxの画像を使ったらスマホ表示では大きすぎて切れてしまいます。
いいねをした人: 居ませんあーなるほど、ページヘッダーではなくてカバーブロックを使われているということですね。カバーブロックでそのような挙動になるのは仕様だと思うので、画像ブロックを使うのが良いのではないでしょうか。
いいねをした人: 居ません説明がわかりにくかったですね（汗）申し訳ないです。画像ブロックを使ってみましたが、高さ500PX以上の画像を（イラレで作った）使うと縦にすごく大きくなってしまいます。やはり最初にイラレで画像を作る時に高さ３００ｐｘ位で設定して作るのが1番無難でしょうか？
いいねをした人: 居ませんえっと、ちょっとよくわかっていないのですが、実際に問題がおこっているページはどれになりますか？ 先に共有いただいたページは普通に画像ブロックが表示されているように見えますが…。
いいねをした人: 居ません「初めての方」と「よくある質問」のページです。
現在はPC表示には縦300pxの画像をカバー画像として適用。（スマホ・タブレットでは非表示）
スマホ表示では画像ブロックで縦３００ｐｘ以上の画像を適応。（ＰＣでは非表示）
この様に対処しています。
この方法でだいぶ良くなったのですが、「良くある質問」ページのカバー画像が何だか横伸びになって違和感？がるように見えます。これは元の画像が単に悪いだけなのでしょうか？
「よくある質問」ページの画像だけ１度作り直してみよーと思います。
いいねをした人: 居ませんこの方法でだいぶ良くなったのですが、「良くある質問」ページのカバー画像が何だか横伸びになって違和感？がるように見えます。これは元の画像が単に悪いだけなのでしょうか？
画像を直接開いてみてもらえるとわかりやすいと思いますが、僕には画像自体が横に伸びているように見えます（もともとの画像の意図を知らないので、もしかしたら意図した比率かもしれませんが…）
いいねをした人:確かに画像自体が横に伸びているように見えますね。
なので作りなおして適用させて良くなりました。
ただ、このカバー画像を固定背景の設定にしたらすごくアップ？ズーム？状態になってしまいます。
固定背景でも元の画像サイズ（固定背景にしていない状態）と同じような表示にはならないでしょうか？
いいねをした人: 居ません前述しましたが、コンテンツの量にあわせて背景をすべて埋めるように（つまり伸縮して）画像を表示するのがカバーブロックの仕様です。固定すると
background-attachment fixedになるので余計顕著にみえます。下記の CSS を追加すると強制的にもともとの画像サイズで表示できますが、背景を埋めるような表示にならなくなるので、ずれたようにみえてしまうデバイスが増えるのではないかと思います。
background-size: contain; background-repeat: no-repeat;カバーブロックやページヘッダーにいれる画像は文字などを抜いて拡大縮小トリミングされてもそれなりにみえる画像を使うのが良いと思います。
いいねをした人:
- トピック「イラレでカバー画像＆画像を作る時のサイズ」には新しい返信をつけることはできません。