WordPressテーマSANGOの質問

ブログ記事内の画像をレスポンシブにしたい

アバター
gaby

こんにちは。
FC2からドメインを取得してWordpressに切り替え、SANGOを導入しました。
でも、FC2では画像を全て幅650pxに設定してあったので、現在の幅に合いません。PCやスマホで見たときにレスポンシブになるようにCSSを追加することはできますか?
よろしくお願いします。

SANGO
SANGO 質問ガイドライン
コメントへの回答
サルワカくん
サルワカくん
2020/11/07

画像のサイズを一括で調整するのは、簡単そうで難しいです。
というのも画像は記事の中にさまざまな形で挿入されるため、CSSで一括で幅を変えると今後思わぬ場所でデザインが崩れる可能性があります。
(FC2から移行した画像に絞ってCSSをあてるには手がかりが少ないです)
また、もともとの幅が650pxの画像を無理やり大きく表示すると画質が荒くなってしまいます。

責任は持てませんが、画像を中央寄せすると少し見栄えがよくなるかもしれません。
以下のようなCSSをダッシュボードの[外観]⇒[カスタマイズ]⇒[追加CSS] もしくは子テーマのstyle.cssに貼り付けることで、主にFC2からの画像を中央寄せできると思います。

/* pタグの直下のaタグの直下のimgを中央寄せ */
.entry-content p > a > img {
    display: block;
    margin: 0 auto;
}

これが一括でできることの限界で、このパターンにあてはまらない一部の画像は中央寄せされない可能性があります。
よろしくお願いします。

アバター
gaby
2020/11/09

さっそくのお返事をありがとうございます。
アイキャッチ画像がきっちり記事と同じ幅におさまってレスポンシブになっているので、記事内の写真(現在は全て650pxの幅)もレスポンシブにできるかなと思いましたが、無理なのですね…。このままだとアイキャッチとは少々サイズが違いますが、今のところはこのまま行くことにしました。ありがとうございました。