Simplicityでサイトを作る方が身近に増えています。みなさんが作ったサイトを見るとやはりトップにそのサイトに合う画像を置くというカスタマイズをしているようです。
普通にヘッダ画像をアップするとbodyの幅に合わせた大きさになりますが、画面の幅いっぱいに画像を設定するにはどうすればいいかを試してみました。
ヘッダ画像として使いたい写真の大きさを変更する
ヘッダ画像として使いたい写真はぱくたそさんからダウンロードさせていただきました。
この画像です。Sサイズをダウンロードしてきて、ローカルPCで、
ヘッダ画像として使いたい部分を横1279px、縦449pxに切り取りました。本当は1280pxと450pxにしようとしたのですがちょっと小さくなっちゃいました(^_^;。
ヘッダの高さを200pxにしたかったので、ブラウザの幅を大きくしても小さくしてもまぁいい感じかなという風になる大きさを試行錯誤してこの大きさとしました。
切り取るときのポイントとしては画像の上の方がよく表示されて下の方が切れることが多いので見せたい部分が上の方になるように画像を切り取るということです。
Simplicityで画像をアップロードする
これもまた試行錯誤して、この方法がいいと思ったのでそれを書きます。今回はSimplicity2.0.3を使っています。Simplicity1.9.3とは多少違うところがあるのでそれについては【】で書きます。
ヘッダ画像の高さを決める
ダッシュボード 外観＞プラグイン をクリック
ヘッダー をクリック
【ヘッダー画像】
ヘッダーの高さpx（デフォルト：100） という入力欄に 200 と入力して、保存して公開 をクリックします。
保存されたら、× をクリックして、一旦カスタマイズを終了します。ちょっと手間ですが、ここで一旦終わらせておいたほうが、確実にヘッダの高さを200と認識してくれるようになるような気がします。
ヘッダーの画像をアップロードする
ダッシュボード 外観＞プラグイン をクリック
ヘッダー をクリック
【ヘッダー画像】
ここで注意したいのは幅いっぱいに画像を出したいときは、
この 現在のヘッダー からアップロードするのではなく、
もう少し、下の方にある ヘッダー外側背景画像 で画像をアップロードするということです。画像を選択 をクリック
先ほど作ったヘッダー用画像をドラッグ&ドロップして、画像を選択 をクリック
保存して公開 をクリックします。
ヘッダ画像がブラウザの幅いっぱいに表示されるか見てみる
どのように表示されるか見てみます
こんな感じにヘッダ画像がブラウザの幅いっぱいに画像が表示されています！
幅を縮めても大丈夫なようです。
最大に拡げるとこんな感じでした。
グローバルメニューの幅もブラウザいっぱいにしたいとき
ブラウザの幅が広いときは、
このようにグローバルナビと画像の幅が違ってしまい、隙間ができます。好き好きだとは思うのですが、グローバルメニューを画像の幅に合わせたいときは、
ダッシュボード 外観＞プラグイン をクリック
ヘッダー をクリック
Simplicity1.9.3では【色 をクリック】
グローバルナビを横幅いっぱいにする にチェックを入れて、保存して公開 をクリック
これで
このようにグローバルナビの幅が画像の幅と同じになりました(^^)/
[amazon_searchlink search=”WordPressデザイン”]
コメント