この記事はこんな方におすすめ
WordPress「Diver」のPC用・スマホ用ヘッダーサイズ・設定方法
PC用・スマホ用ヘッダーの作成方法が分かります。
どうも、西川(@shintaro_svc)です。
以前から気に入って使っている、WordPressテーマ「Diver(ダイバー)」ですが、ず〜〜〜っとヘッダー画像を作るのを怠っていました。
とは言え、ブログのヘッダーが無いと、なんか殺風景というか寂しいブログになりますよね。僕的には、ブログにヘッダー必要不可欠だと思っています。
そんな訳で、Diver(ダイバー)で、ヘッダー(ファーストビュー)の設定を行ってみました。
↓↓
↓↓
この記事の目次
Diverのヘッダー(ファーストビュー)設定【動画編】
画像の作り方も解説していますので、興味があればご覧下さいね!
PC用ヘッダーサイズ 1350px × 650px
Diverの公式サイトには、「レスポンシブデザインなので推奨サイズはありませんお好みのサイズで表示されるように調整してください。」記載されているのですが...
「お好みのサイズ?って何?」って思いませんか?ですので、複数のパターンで画像を作成してみました。結果、「1350px × 650px」が1番しっくりきましたよ!
もちろん、このサイズを参考に違ったサイズを作成してみても構いません。あくまでも参考サイズってやつです。ちなみに、ファーストビュー設定は以下の画像の通りに設定をしています。
PCファーストビュー設定(スクショ)
現在はこちらの記事で解説している設定にしております。
スマホ用ヘッダーサイズ 600px × 900px
今回は、600px × 900pxで作成してみましたが、少し縦長なのでスマホ画面いっぱいにヘッダーが表示されます。ですので、もう少し短くされたい方は、「600px × 800px」「600px × 700px」で作成してみるのもアリだと思います。
上記の画像は「600px × 500px」で作成。
スマホファーストビュー設定(スクショ)
「600px × 900px」の場合
「600px × 500px」の場合
本日のまとめとお知らせ
どうだったでしょうか?
少しサイズ調整のコツが必要ですが、慣れれば簡単です。とても良いテンプレートなので、バッチリ決めてブログ運営をしていきましょうね!
もしご質問があれば、僕のLINE公式アカウントまでメッセージ下さいませ!