Diverでパソコン・スマホ表示用のヘッダーを作成してみた!

この記事はこんな方におすすめ

◆WordPress「Diver」のヘッダーを設定したい。しかし、サイズが分からない設定方法が分からない。調べてみても参考になるサイトが出てこない
◆この記事を読むことで
WordPress「Diver」のPC用・スマホ用ヘッダーサイズ・設定方法
PC用・スマホ用ヘッダーの作成方法が分かります。

どうも、西川(@shintaro_svc)です。

以前から気に入って使っている、WordPressテーマ「Diver(ダイバー)」ですが、ず〜〜〜っとヘッダー画像を作るのを怠っていました。

めんどくさくて(笑)

とは言え、ブログのヘッダーが無いと、なんか殺風景というか寂しいブログになりますよね。僕的には、ブログにヘッダー必要不可欠だと思っています。

そんな訳で、Diver(ダイバー)で、ヘッダー(ファーストビュー)の設定を行ってみました。

PC用ヘッダーはこんな感じに仕上がりました!

↓↓

スマホ用ヘッダーはこんな感じに仕上がりました!

↓↓

Diverのヘッダー(ファーストビュー)設定【動画編】

動画の方がお好きな方はこちらをご覧下さい。

画像の作り方も解説していますので、興味があればご覧下さいね!

PC用ヘッダーサイズ 1350px × 650px

Diverの公式サイトには、「レスポンシブデザインなので推奨サイズはありませんお好みのサイズで表示されるように調整してください。」記載されているのですが...

「お好みのサイズ?って何?」って思いませんか?ですので、複数のパターンで画像を作成してみました。結果、「1350px × 650px」が1番しっくりきましたよ!

もちろん、このサイズを参考に違ったサイズを作成してみても構いません。あくまでも参考サイズってやつです。ちなみに、ファーストビュー設定は以下の画像の通りに設定をしています。

PCファーストビュー設定(スクショ)

現在はこちらの記事で解説している設定にしております。

こちらの設定がうまくいっていないと、画像がうまく表示されませんので注意!!

スマホ用ヘッダーサイズ 600px × 900px

今回は、600px × 900pxで作成してみましたが、少し縦長なのでスマホ画面いっぱいにヘッダーが表示されます。ですので、もう少し短くされたい方は、「600px × 800px」「600px × 700px」で作成してみるのもアリだと思います。

上記の画像は「600px × 500px」で作成。

スマホファーストビュー設定(スクショ)

「600px × 900px」の場合

「600px × 500px」の場合

本日のまとめとお知らせ

どうだったでしょうか?

少しサイズ調整のコツが必要ですが、慣れれば簡単です。とても良いテンプレートなので、バッチリ決めてブログ運営をしていきましょうね!

もしご質問があれば、僕のLINE公式アカウントまでメッセージ下さいませ!

コメントを残す

仕組み化・自動化に興味のある貴方へ

顧客満足度97%超えのZEROPROが2年の時を経て『リストマーケティングの専門書』として完全リニューアル。

実績作り・情報発信・リストマーケティングの流れを動画コンテンツで徹底解説。

「24時間」「365日」お金を稼ぎ出す仕組み作りの戦術・思考・テクニック全てをまとめた極秘コンテンツサイトが『ZEROPRO改』です。

期間限定で無料プレゼントしていますので、下記の「今すぐ無料ダウンロード」をクリック!

この記事が気に入ったら
フォローしよう

最新情報をお届けします

Twitterでフォローしよう

おすすめの記事一覧