WordPressのテーマ「ストーク19」をお使いの方で、トップページの「ヘッダー」のアイキャッチが、コンテンツ幅と揃わなくてイライラしている人いませんか？
WordPressのダッシュボードを触ったり、ネットで調べたりして修正を試みましたが、うまくいきませんでした。
アイキャッチの画像を作り直して、サイズを変更しても、どうしてもコンテンツ幅より、狭くなってしまって、幅が揃わないのです。
かなりの時間、ネット検索やAIを使って調べましたが、うまくいかず、ギブアップ。
仕方なくテーマ「ストーク19」の販売元である「OPENCAGE」に問い合わせたところ、すぐに解決したのでその方法を紹介します。
ヘッダーアイキャッチの幅がうまくいかない！！
サイトのトップページにヘッダーアイキャッチを入れました。
ところがどうしても、ヘッダーアイキャッチ画像と、コンテンツの幅とで微妙に隙間が空いてしまうのです。
この矢印の部分が空いてしまいます
画像サイズを変更したり、WordPressで修正したり、ネットで調べたりと試行錯誤しましたが、一向に思ったとおりになりません。
年末の土曜日でしたが、ダメ元で「ストーク19」の販売元の「OPENCAGE」に問い合わせしました。
（返事は、早くて週明けかな？）（最悪の場合、正月過ぎかも？）と思って待っていましたが、その予想を軽く裏切り、すぐに返事が来ました。
返事通りに修正したら解決！
いただいた返事の通りにしたら、すぐに解決しました。
ヘッダー修正の【お返事】
下記が、「OPENCAGE」様からのお返事になります。
対応策としまして、下記のCSSを子テーマの【style.css】に記述することで、
画像をコンテンツ幅と同じサイズに揃えることができます。（下記参照）
#custom_header_img img {
width: var(–stk-wrap-width);
}
子テーマの【style.css】に、上記のCSSを書き加えたことで、解決しました。
修正の方法
① WordPress→外観→テーマファイルエディタ
②編集するテーマを「選択」で→「stork19_custon(カスタム)」（子テーマ）を選びます。
親テーマを「選択」してしまうと、バージョンアップの際、CSSコードが書き換わることがありますので、子どもの方である「カスタム」を選びます。
③ 「stork19_custom: style.css」に
コピペして使ってください
#custom_header_img img {
width: var(–stk-wrap-width);
}
↑こちらを書き加えてください。
④ 書き加えたら、ファイルを更新を押してください。「ファイルの編集に成功しました。」と出れば、書き換わっています。
カスタマーサービスが充実しています。
私がブログを始めたすぐからずっと使っている「ストーク19」はこちらで購入できます。サポート体制が充実しているので、何か困ったことがあれば解決も早いです。
良かったら、ぜひ。
旅するのん
つい先日、私もそういうことになり、直すのにかなりの時間を使いました。