テーマSimplicityで幅を縮めたときにロゴ画像やキャッチフレーズがはみ出さないようにする設定

地元八王子にあるサイバーシルクロードのIT相談を数回引き受けています。みなさんやる気に満ちた方ばかりですので、一緒にWebサイトを作るのはとても楽しいです。
先日も一緒にWebサイトを作っていたのですが、その際にテーマSimplicityで幅を縮めたときにロゴ画像やキャッチフレーズがはみ出してしまうことがあり、その解決方法について考えてみました。それについて、書きます。

テーマSimplicityでヘッダー背景に画像を置いて、サイト名をロゴ画像にする方法

まず、テーマSimplicityでヘッダー背景に画像を置いてサイト名をロゴ画像にする方法です。

管理バーの　カスタマイズ　をクリックするか、

ダッシュボード　外観>カスタマイズ　をクリックします

ヘッダー をクリック

ヘッダーの高さ を

200　にして、いったん　保存して公開　をクリック

ヘッダー背景画像 の 画像を選択 をクリックし、

使いたい画像をクリックして 画像の選択 をクリック
* このとき実際に選択した画像の大きさは1000x229pxでした。実際に今あるWebサイトにある画像を使ったためこの大きさになりました。

このようにプレビュー画面で背景が設定されたことがわかります。

ロゴを画像にするには

ロゴを画像にする にチェックを入れて、

ロゴ画像 の 画像を選択 をクリック

このときロゴ画像はアップしてなかったのでPCからドラッグ＆ドロップでアップロードして（アップロード済みの時はクリック） 画像の選択 をクリック

プレビュー画面で見るとロゴが画像になりました。

幅を縮めたときの表示を確認してみる

幅を縮めたときの表示を確認します。

カスタマイズ画面の下にあるボタンをクリックすることで確認できます。まず、タブレット表示のボタンをクリック

こんな感じに灰色の帯、が表示されてしまいました。

つぎに スマートフォン表示 をクリック

ロゴ画像やキャッチフレーズが背景画像からはみ出しています。背景画像がもっと下まで表示してほしいのですが…

背景画像の高さが足りなかったということが判明

この状態を見て、「縦横比が良くないのではないか？」と思いました。確か、背景画像をアップする場所にも、

画像の高さは高めに設定しておいてください とありました。今回の場合は、元々存在していたWebサイトから背景画像を持って来たため実際に使った画像の大きさは1000x229pxでした。

Simplicityに画面幅いっぱいのヘッダー画像を設定する方法

は、バージョンが違うので設定方法が違うのですが、背景画像の大きさは参考になると思いました。こちらによると、

まずは、ヘッダー画像の準備をします。

画像の横幅は、1280px前後、縦は640px以上くらいを推奨します。

ということで、このぐらいの大きさの画像にしてみます。

今回blogで使わせていただいている背景画像は「無料写真素材 フリー素材　花ざかりの森」さんより、ヤマグワの実写真です。ありがとうございます(^^)/

同じ素材で1280x800pxの大きさの画像にして、

ヘッダー外側背景画像を入れ替えてみました。すると、

タブレット表示

スマートフォン表示

このようにヘッダー背景画像の中に、ロゴ画像やキャッチフレーズが入るようになります。

[amazon_searchlink search=”WordPress デザイン”]