WordPressテーマSANGOの質問

SVGのサムネイル画像とヘッダーアイキャッチの見出し位置について

アバター
nomi

お世話になります。
とても素敵なテーマで快適に使用させていただいております。
自分では解決方法がわからず、2点お伺いさせてください。

1. スマホでは横長タイプの記事一覧を使用しています。アイキャッチ画像にsvg形式のイラストを使うと、サムネイルが正方形に切り抜かれずイラスト全体が表示されます。jpeg画像を使用したときのように正方形で表示する方法はございますでしょうか。

2. ヘッダーアイキャッチの見出し文字が、スマホ表示のときだけ画像に対して上寄りに表示されてしまいます。どうすれば真ん中に表示できますでしょうか。

お忙しいところ申し訳ございませんがご教授いただけますと助かります。
よろしくお願いいたします。

カスタマイザーでデザインや細かな設定をしよう
コメントへの回答
サルワカくん
サルワカくん
2019/03/01

お世話になっております。

1. アイキャッチにSVG画像を選んだ場合について
こちらはSANGOというよりWordPress全体的な仕様なのですが、SVG画像のトリミングを行うことができません(そもそも標準ではSVG画像のアップロードさえ許可されていなかったりします)。
また、仮に表示がうまくいったとしてもTwitterやFacebook、はてなブログ、noteなどの外部サービスでSVG画像を読み込むことができないため、シェアされたときやリンクを貼られた時にサムネイルが空になって表示されてしまいます。
そのため、面倒だとは思いますがアイキャッチ画像にはPNGなどの形式を選んでいただくのが良いと思います。
(参考:SVG to PNG

2. ヘッダーアイキャッチ画像の見出しがスマホで上にズレる
以下のCSSを子テーマのstyle.cssもしくは外観⇒カスタマイズ⇒追加CSSに貼り付けることで、中央に表示されるようになると思います(貼付け後はブラウザのキャッシュの削除をお願いします)。

#header-image {
    min-height: auto;
}

ご確認よろしくお願いします。