アイキャッチ画像でOGPも投稿一覧もきれいに表示したい

0
いいねをした人: 居ません
3件の投稿を表示中 - 1 - 3件目 (全3件中)
  • 投稿者
    投稿
  • #74380
    上田 修司
    参加者
    8

    【お使いの Snow Monkey のバージョン】
    【お使いの Snow Monkey Blocks のバージョン】
    【お使いの Snow Monkey Editor のバージョン】
    【お使いのブラウザ】
    【当該サイトのURL】

    ### 実現したいこと

    OGPでも、Snow Monkeyの投稿一覧ページでも、同じアイキャッチ画像を使われます。

    OGPやTwitterカードでは 1:1.91サイズの画像(1200×628や600×314)が使われる一方

    Snow Monkeyの投稿一覧ページ等は4:3(16:9かな?💦)のサイズで、
    設定したものをブログ上できれいに表示しようとすると、
    OGP側では切れて表示されるかなと思います。

    できれば1つのアイキャッチ画像で、投稿一覧ページもSnow Monkeyのその他の場所の画像表示も、OGPもTwitterカードもきれいに表示するのに、どんなアイディアがあるのでしょうか?

    1: 1.91の画像で、真ん中を4:3くらいにしてもきれいに見えるようにすれば良いのはわかるのですが、できれば、その画像作成時のストレスも減らしたいなと思ってます。

     

    一番シンプルな方法で実現できれば、画像の縦横比の希望は特にないです。

    もしかしたら、設定とか、簡単なcssでsnow monkey 内の画像の縦横比が1発で
    1:1.91にしたりする方法があるのかな?

    よろしくおねがいします。

     

     

    ### 発生している問題

    ### 試したこと

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

    Snow Monkey のアイキャッチ画像・OGP 画像、ページヘッダー画像はいわゆるイメージ画像をいれるような想定なので、文字だったり顔があるきちんと画角を考えないといけない写真を設定するのは向いていません。

    下記のような CSS でアイキャッチ画像の比率を定義しているので、OGP 画像の比率に合わせて CSS を調整してみると良いかもしれません。

    .c-entry-summary__figure:before {
        content: "";
        display: block;
        padding-top: 75%;
    }
    0
    いいねをした人: 居ません
    #84170
    上田 修司
    参加者
    8

    返信おそくなりすいません。

    このCSSで対応出来ました。ありがとうございました!

    1
    いいねをした人:
3件の投稿を表示中 - 1 - 3件目 (全3件中)
  • トピック「アイキャッチ画像でOGPも投稿一覧もきれいに表示したい」には新しい返信をつけることはできません。

ドキュメント

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

ドキュメント

フォーラム

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

サポートフォーラム

よくあるご質問

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

よくあるご質問

お問い合わせ

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

お問い合わせ

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