MENU

WordPressのヘッダー画像が切れる問題を解決するには?

WordPressではよくヘッダー画像が切れる問題で悩んでいる人が多いです。
理由は2つ、ヘッダー画像が大きいこととレスポンシブ対応のCSSコードに直していないことです。

最初に選ぶテーマによって画像のサイズが異なります。
Twenty Twelveなら横960と縦250のサイズです。

ワードプレスではヘッダーの項目から新規画像を追加で自分の撮った写真をアップロードすることが出来ます。
アップロードする際切り抜きが出来る画面があります。

初心者にはおすすめ切り抜かないを選択し、自動で切り抜きを行う仕組みにすると簡単です。

どうしても自分の写真画像を全てアップさせたい場合は切り抜き画面でトリミングを選択する、あるいは画像編集ソフトで縮小する必要があります。

スマホで自分のサイトを見たとき上記の設定だけだと、スマホのヘッダー画像は途切れてしまう可能性があります。スマホ画面設定のCSSコードだけを変えると上手くいきます。

CSSコードはヘッダー部分にfooterというコードを用います。スタイルシートCSS関数の中にfooterを入れた後鍵かっこをつけ、min-widthで表示させたい数値pxを書き、残りはスクロールしながら見ることが出来るようにコードを埋め込みます。

この際min-widthと一緒にwidthを100%と書き込むと、全ての切り抜いたヘッダー画像が表示されるようになります。
レスポンシブ対応のホームページを作るには少しCSSコードの知識も必要です。

ヘッダー画像が切れてしまうとサイトの信頼感を損ねたり、違和感を感じたりする人もいます。

上記のコードはヘッダータグの間に埋め込む作業であり、タイトルや本文のbodyに埋め込む作業ではありません。

特に注意することは最初のテーマ選びに気を付けること、テーマ選びに失敗すると気に入ったサイズにトリミングが難しくなります。
WordPressは複雑な設定も多いですが、その分自由にカスタマイズ出来る部分もあります。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする