「STORK19」ヘッダーアイキャッチ！コンテンツ幅と揃わない！？「OPENCAGE」

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」はこちらで購入できます。サポート体制が充実しているので、何か困ったことがあれば解決も早いです。

良かったら、ぜひ。