ヘッダー画像の設定とサイズを変更する方法
ヘッダー画像を設定する場所は2つあります。
・サイト・ロゴアイコンからロゴ画像を使用してヘッダー画像に設定する方法
・トップページ設定からヘッダー背景画像を設定する方法
サイト・ロゴアイコンは、常に一番上に表示されます。
ヘッダー背景画像はトップページのみに表示され、ロゴアイコンの下に表示されます。記事内では表示されません。見栄えよく表示させたい場合はアップロード前に画像の調整を行う必要がある
トップページ設定からヘッダー背景画像を設定した場合、トップページにしか適用されない、など細かく言うと長くなるので割愛しますが、それぞれ設定の仕方により見栄えが変わります。
ここではロゴアイコンをヘッダー画像として使用し、そのロゴアイコンのサイズを変更する方法を書いています。
トップページ設定のヘッダー背景画像は使用しません。
サイト・ロゴアイコンから画像を設定し、ロゴの大きさを変更する方法です。
このサイトこの設定で作っています。
両方設定することもできますので自分で確認ながら好みのトップページを作ってください。
ヘッダーの画像を設定する
ヘッダーに表示させたいロゴ画像を設定します。
外観→カスタマイズ→サイト・ロゴアイコン
大きい画像を作成してもサイズ変更ができるので、このサイトの画像サイズは1800ピクセル×350ピクセルで作成しました。ただしあまり大きい画像を使用したり容量が大きい画像の場合サイトの読み込みスピードに影響があるかもしれませんので注意してください。
ヘッダーの背景色を設定する
ロゴ画像を設定した場合、ヘッダーの背景色と画像の背景色の色を合わせないと張り付けた感じになり一体感が出ず、見栄えもよくありません。
背景色を合わせることで一体感がでて見栄えもよくなります。
外観→カスタマイズ→サイトカラー設定→ヘッダー背景
で変更します。
色を確認するのに便利なツール
Googleクロームのアドオンですが色のコードをマウスを合わせるだけで確認できます。
例えば気になるサイトの配色などを調べたい場合に便利なので使ってます。
ColorPick Eyedropper
右上のアイコンをクリック。調べたい色の上にマウスカーソルを持っていくとカラーコードが表示されます。
そのままクリックすればカラーコードが表示されたままになるのでコピーできるようになります。
ヘッダー画像を設定後このツールを使用してロゴ画像の色を調べ、ヘッダーの背景色を設定すると簡単に色の設定ができます。
またこのようなサイトを利用して色の確認をしています。
サイト色の参考や色コードを確認するサイト
原色大辞典
ロゴの画像の大きさを変更
赤色の数字の部分を変更すればロゴの大きさが変わります。数字を大きくすればロゴは大きくなり、小さくすれば小さくなります。
外観→カスタマイズ→サイトカラー設定→追加CSSに追加して下さい
.header.headercenter #logo img {
max-height:100px;
}
サイズを確認しながらロゴの大きさを調整してください。カスタマイズ画面の右側にプレビューが出てますが、反映されない場合があります。
その場合、公開ボタンを押した後にブラウザの更新ボタンを押すと反映された画面が出ます。
カスタマイズ画面とは別のブラウザのタブでサイトを表示させた状態にしておき、カスタマイズ公開後にサイトを表示させたタブの更新ボタンを押すと大きさの確認が簡単にできます。
まとめ
- ヘッダーを設定する方法はロゴ画像を使用してヘッダー画像に設定する方法とトップページ設定からヘッダー背景画像を設定する方法がある
- ヘッダー背景画像はトップページのみ表示され記事内ページでは表示されない
- ロゴ画像はトップページにも記事内ページにも常時表示される
- ロゴ画像の大きさは変更できるがヘッダー背景画像の見栄えは画像をアップロード前に調整が必要
こちらは旧ストークの設定になります。
現在ストークはSTORK19にバージョンアップしています。
AMPにも対応し表示速度も速くなりました
まだの方はこの機会にチェックしてみてください。
こちらのサイトもSTORK19にバージョンアップしました。
【公式】WordPressテーマ「STORK19」