-
投稿者投稿
-
2021年6月11日 9:36 PM #78023
イラレでカバー画像を作ったのですがなかなか適切なサイズになりません(特に高さ)。高さを600PXで作っても縦に大きな画像になってしまいます。今は300pxに設定してカバー画像にしています。
表示も少し画質が悪く(フルサイズにしている)どのサイズで作ったら良いか教えて頂けたらと思います。質問場所がここで合っているのかわかりませんがご回答いただけたらと思います。
SnowMonkeyバージョン: 14.3.4
Snow Monkey Blocksバージョン:11.4.1
Snow Monkey Editorバージョン: 5.0.6
♥ 0いいねをした人: 居ません2021年6月12日 9:13 AM #78047Snow 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; }
♥ 0いいねをした人: 居ません2021年6月12日 3:12 PM #78090お返事ありがとうございます。
「初めての買取」のページのトップ画像は高さ300pxの画像を使用。
「よくある質問」ページのトップ画像は高さ300px以上の画像を使用。
このカバー画像をイラレで高さ300px以上で制作して適用されると画像が切れてしまうんです。
検証したら
<div class=”wp-block-cover alignfull has-background-dim”><img class=”wp-block-cover__image-background wp-image-1094″以下略
でした。
そして高さ300pxの画像を使ったらスマホ表示では大きすぎて切れてしまいます。
♥ 0いいねをした人: 居ません2021年6月14日 8:04 AM #78196あーなるほど、ページヘッダーではなくてカバーブロックを使われているということですね。カバーブロックでそのような挙動になるのは仕様だと思うので、画像ブロックを使うのが良いのではないでしょうか。
♥ 0いいねをした人: 居ません2021年6月14日 10:48 PM #78318説明がわかりにくかったですね(汗)申し訳ないです。画像ブロックを使ってみましたが、高さ500PX以上の画像を(イラレで作った)使うと縦にすごく大きくなってしまいます。やはり最初にイラレで画像を作る時に高さ300px位で設定して作るのが1番無難でしょうか?
♥ 0いいねをした人: 居ません2021年6月15日 9:54 AM #78333えっと、ちょっとよくわかっていないのですが、実際に問題がおこっているページはどれになりますか? 先に共有いただいたページは普通に画像ブロックが表示されているように見えますが…。
♥ 0いいねをした人: 居ません2021年6月16日 2:36 AM #78398「初めての方」と「よくある質問」のページです。
現在はPC表示には縦300pxの画像をカバー画像として適用。(スマホ・タブレットでは非表示)
スマホ表示では画像ブロックで縦300px以上の画像を適応。(PCでは非表示)
この様に対処しています。
この方法でだいぶ良くなったのですが、「良くある質問」ページのカバー画像が何だか横伸びになって違和感?がるように見えます。これは元の画像が単に悪いだけなのでしょうか?
「よくある質問」ページの画像だけ1度作り直してみよーと思います。
♥ 0いいねをした人: 居ません2021年6月16日 10:16 AM #78415この方法でだいぶ良くなったのですが、「良くある質問」ページのカバー画像が何だか横伸びになって違和感?がるように見えます。これは元の画像が単に悪いだけなのでしょうか?
画像を直接開いてみてもらえるとわかりやすいと思いますが、僕には画像自体が横に伸びているように見えます(もともとの画像の意図を知らないので、もしかしたら意図した比率かもしれませんが…)
2021年6月17日 4:04 AM #78505確かに画像自体が横に伸びているように見えますね。
なので作りなおして適用させて良くなりました。
ただ、このカバー画像を固定背景の設定にしたらすごくアップ?ズーム?状態になってしまいます。
固定背景でも元の画像サイズ(固定背景にしていない状態)と同じような表示にはならないでしょうか?
♥ 0いいねをした人: 居ません2021年6月17日 9:24 AM #78523前述しましたが、コンテンツの量にあわせて背景をすべて埋めるように(つまり伸縮して)画像を表示するのがカバーブロックの仕様です。固定すると
background-attachment fixed
になるので余計顕著にみえます。下記の CSS を追加すると強制的にもともとの画像サイズで表示できますが、背景を埋めるような表示にならなくなるので、ずれたようにみえてしまうデバイスが増えるのではないかと思います。
background-size: contain; background-repeat: no-repeat;
カバーブロックやページヘッダーにいれる画像は文字などを抜いて拡大縮小トリミングされてもそれなりにみえる画像を使うのが良いと思います。
-
投稿者投稿
- トピック「イラレでカバー画像&画像を作る時のサイズ」には新しい返信をつけることはできません。