当ブログで利用しているwordpressの有料テーマ「スワロー」の、ヘッダーイメージのサイズについて検証しました。
スワローだけでなく、同じOPENCAGE社のテーマ「ストーク」でもおそらく同じだと思います。
PC版スワローのヘッダーイメージのサイズな何pxが良い？
結論から言いますと、
横幅は7000pxが良さそうです。
縦幅は自由ですが、大体3000～4000px当たりが無難だと思います。
横幅7000pxな理由
僕が最初にデザインが素敵だなと思っていたのは、「まじまじぱーてぃー」というサイトのヘッダーデザインです。
出典：https://www.mazimazi-party.com/
これをマネしたかったのですが、テキトーなサイズで画像を設定しても上手くいきませんでした。
横幅1000pxのヘッダーイメージだと、両サイドに余白が…
ヘッダーの画像を適当に横幅1000pxで作ってみたら、こんな感じで上手くできません。
両サイドの無用な余白ができてしまう。
横幅1000ｐｘの画像
スワローをあれこれイジっていると、ヘッダーイメージは画面を拡大や縮小してもほぼ変化していないようだと、分かりました。
他のサイドバーやアイキャッチは小さくなりますが、ヘッダーイメージだけはほぼそのままです。
ちなみに、windowsでのキーボードのショートカットは下記の通り。
- 拡大 「ctrl」＋「＋」
- 縮小 「ctrl」＋「－」
- デフォルト 「ctrl」＋「０」
しかも、限界まで縮小表示してもこれだけ大きなヘッダーの表示ということは、たぶん画像は結構なサイズだろうと考えました。
1000pxのヘッダー画像の時、限界まで縮小すると、このような感じになりました。
ここから、大体1000ピクセルの7倍くらいの幅があれば良いのかもしれないということで、横幅7000pxの画像を寸法付きで実験しました。
この画像を、PC用のヘッダーに設定してみると、下記のようになり、一番縮小してみても、余白が消えました。
これで、スワローのDEMOサイトやあんちゃさんのブログと同じように、ヘッダーを設定できると分かりました。
それでは、改めて7000px×3000pxで作ったヘッダー画像を設定してみました。
このようにして、PC版のスワローヘッダー画像はきれいに表示されるようになりました。
DEMOサイトと同じように、画面を縮小しても、ヘッダー画像はそのままの状態を保ちます。
100%表示をしても、綺麗に表示されています。
まとめ
ストークもスワローと同じようにヘッダー画像を設定すれば、うまくいくと思います。
ヘッダー画像のサイズのカスタマイズについて調べてもなかなか見つからなかったので、我流で検証しました。
あくまで僕のPC環境で上手くいっただけなので、ご理解いただければ。
以上です
byミケ男
▼僕が使ってるシンプルイズベストなブログテーマ「スワロー」おすすめです。
▼でも、初心者の最初のおすすめは絶対「ストーク」です。
