イラレでカバー画像&画像を作る時のサイズ

0
いいねをした人: 居ません
10件の投稿を表示中 - 1 - 10件目 (全10件中)
  • 投稿者
    投稿
  • #78023
    worldmax
    閲覧者
    5

    イラレでカバー画像を作ったのですがなかなか適切なサイズになりません(特に高さ)。高さを600PXで作っても縦に大きな画像になってしまいます。今は300pxに設定してカバー画像にしています。

    表示も少し画質が悪く(フルサイズにしている)どのサイズで作ったら良いか教えて頂けたらと思います。質問場所がここで合っているのかわかりませんがご回答いただけたらと思います。

     

    SnowMonkeyバージョン: 14.3.4

    Snow Monkey Blocksバージョン:11.4.1

    Snow Monkey Editorバージョン: 5.0.6

    0
    いいねをした人: 居ません
    #78047
    アバター画像キタジマ タカシ
    参加者
    2371

    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;
    }
    0
    いいねをした人: 居ません
    #78090
    worldmax
    閲覧者
    5

    お返事ありがとうございます。

    「初めての買取」のページのトップ画像は高さ300pxの画像を使用。

    「よくある質問」ページのトップ画像は高さ300px以上の画像を使用。

     

    このカバー画像をイラレで高さ300px以上で制作して適用されると画像が切れてしまうんです。

    高さ300PX以上の画像を使った場合

     

    検証したら

    <div class=”wp-block-cover alignfull has-background-dim”><img class=”wp-block-cover__image-background wp-image-1094″以下略

    でした。

     

    そして高さ300pxの画像を使ったらスマホ表示では大きすぎて切れてしまいます。

    0
    いいねをした人: 居ません
    #78196
    アバター画像キタジマ タカシ
    参加者
    2371

    あーなるほど、ページヘッダーではなくてカバーブロックを使われているということですね。カバーブロックでそのような挙動になるのは仕様だと思うので、画像ブロックを使うのが良いのではないでしょうか。

    0
    いいねをした人: 居ません
    #78318
    worldmax
    閲覧者
    5

    説明がわかりにくかったですね(汗)申し訳ないです。画像ブロックを使ってみましたが、高さ500PX以上の画像を(イラレで作った)使うと縦にすごく大きくなってしまいます。やはり最初にイラレで画像を作る時に高さ300px位で設定して作るのが1番無難でしょうか?

    0
    いいねをした人: 居ません
    #78333
    アバター画像キタジマ タカシ
    参加者
    2371

    えっと、ちょっとよくわかっていないのですが、実際に問題がおこっているページはどれになりますか? 先に共有いただいたページは普通に画像ブロックが表示されているように見えますが…。

    0
    いいねをした人: 居ません
    #78398
    worldmax
    閲覧者
    5

    「初めての方」と「よくある質問」のページです。

    現在はPC表示には縦300pxの画像をカバー画像として適用。(スマホ・タブレットでは非表示)

    スマホ表示では画像ブロックで縦300px以上の画像を適応。(PCでは非表示)

    この様に対処しています。

     

    この方法でだいぶ良くなったのですが、「良くある質問」ページのカバー画像が何だか横伸びになって違和感?がるように見えます。これは元の画像が単に悪いだけなのでしょうか?

    「よくある質問」ページの画像だけ1度作り直してみよーと思います。

    0
    いいねをした人: 居ません
    #78415
    アバター画像キタジマ タカシ
    参加者
    2371

    この方法でだいぶ良くなったのですが、「良くある質問」ページのカバー画像が何だか横伸びになって違和感?がるように見えます。これは元の画像が単に悪いだけなのでしょうか?

    画像を直接開いてみてもらえるとわかりやすいと思いますが、僕には画像自体が横に伸びているように見えます(もともとの画像の意図を知らないので、もしかしたら意図した比率かもしれませんが…)

    1
    いいねをした人:
    #78505
    worldmax
    閲覧者
    5

    確かに画像自体が横に伸びているように見えますね。

    なので作りなおして適用させて良くなりました。

     

    ただ、このカバー画像を固定背景の設定にしたらすごくアップ?ズーム?状態になってしまいます。

    固定背景でも元の画像サイズ(固定背景にしていない状態)と同じような表示にはならないでしょうか?

    0
    いいねをした人: 居ません
    #78523
    アバター画像キタジマ タカシ
    参加者
    2371

    前述しましたが、コンテンツの量にあわせて背景をすべて埋めるように(つまり伸縮して)画像を表示するのがカバーブロックの仕様です。固定すると background-attachment fixed になるので余計顕著にみえます。

    下記の CSS を追加すると強制的にもともとの画像サイズで表示できますが、背景を埋めるような表示にならなくなるので、ずれたようにみえてしまうデバイスが増えるのではないかと思います。

    background-size: contain;
    background-repeat: no-repeat;

    カバーブロックやページヘッダーにいれる画像は文字などを抜いて拡大縮小トリミングされてもそれなりにみえる画像を使うのが良いと思います。

    1
    いいねをした人:
10件の投稿を表示中 - 1 - 10件目 (全10件中)
  • トピック「イラレでカバー画像&画像を作る時のサイズ」には新しい返信をつけることはできません。

ドキュメント

Snow Monkey の設定方法やマニュアルを掲載しています。

ドキュメント

フォーラム

Snow Monkey の使い方やカスタマイズについてのご質問・ご要望等はサポートフォーラムで行っています。サポートフォーラムは誰でも閲覧できますが、書き込みできるのは Snow Monkey 購入者のみとなります。

サポートフォーラム

よくあるご質問

Snow Monkey のサービスについて不明な点がある場合は、まずはよくあるご質問をご確認ください。

よくあるご質問

お問い合わせ

よくあるご質問を見ても解決しなかった場合、試用版の申請については問い合わせフォームからお願いいたします。

お問い合わせ

Snow Monkey は Gutenberg ブロックエディターに対応した 100%GPL の WordPress テーマです。拡張性を意識した開発をおこなっており、カスタマイザーとブロックでスピーディーにサイトを立ち上げるだけでなく、CSS やフックを駆使した高度なカスタマイズにも柔軟に対応できます。