Blogger【QooQ】ヘッダーの画像のサイズ

 

QooQのヘッダーにする画像のサイズについての話です。参考になるかわかんないですけど…

こだわりとしては、スマホで見たときにあんまり大きすぎず、幅がちょうどいいいサイズにしたいけど、パソコンで見たときに大きくなりすぎないようにというところです。

それぞれこんな感じになります。

パソコンでみたとき

スマホでみたとき

このサイズの設定方法について

まず画像のサイズは、998px × 185px です。

なんでこんな中途半端？ってかんじですが、なんか調節していっていい感じになったのでそのままなだけなんで、参考にだけしてください。

（私はCanvaで作成しました。ホームの右上にあるデザインを生成のところからカスタムサイズを選んで大きさを指定して作成できます。）

完成した画像を

レイアウト→ヘッダー→編集から　アップロードし、

タイトルと説明の代わりを選択します。（タイトルの文字を残し、背景画像にしたい場合はタイトルと説明の背後を選びます）

そうするとこんな感じになります。

足りない部分がブランドカラーの背景になります。ちょっとカッコ悪いので、背景の色をあわせます。

※テンプレートの編集をするのでバックアップを取りましょう

#header{

    background: $(brand.color);

}

の部分を試しに削除してみたら…

ほかの色を指定しなくても自動で画像の背景の色に合わせてくれました！

画像の色の使い方によるのかな…？？

色が合わなかった場合は、$(brand.color)のところに色を指定しましょう♪

私は、あとで戻したくなった時のためにも、元の要素は残して効かないようにしておきました。こんな感じに。

何かわかりやすい文言でも入れておきましょう。

私のはフォントも消しちゃってますね。