pickup
WordPressのヘッダー、一番簡単な設定方法はコレ!オリジナル画像も作れるよ♪

WordPressのヘッダー画像は、設定していますか~?

ブログの顔ともいえる、一番最初にユーザーの目に止まる部分ですね。

ヘッダーによっては、グッとユーザーの印象を上げるかも?知れません。

ここは、設定がまだの方は、サクッと済ませてしまいましょう。

ヘッダー画像の選び方

ヘッダーはユーザーが、最初に目にする部分です。

お店でいうなら、看板と同じ役目ですね。

例えば花屋さんの看板が、おどろおどろしいドクロの看板だったら?

ドン引きします!ってか、入る気しないですよね(^_^;)

サイトの内容にあったものを、設定する事をオススメします。

ブログタイトルもそうですが、『どんなサイトか?』を一目で分かるように、

イメージも合わせるようにして下さい♪

インパクトを求めるのであれば、パッと目を引くデザインもアリかと思いますが、

サイトの内容に合っているかを前提に。

ヘッダー部分の大きさの確認方法

まず、お使いのブログのテンプレートによって、推奨されている画像の大きさが違うので、

確認してみましょう!

 

WordPressの場合

ダッシュボード → 外観 → ヘッダーをクリックします。

そうすると、下記の画面が出てきます。

お使いのテーマの推奨のサイズが、表示されているハズです。

ちなみに、COCOONの場合は、1070x100ピクセルの画像を使うと最もうまくいくと書いてあります。

ヘッダーの変更方法

変更に当たって、2通りあります。

  1. 背景画像のみ設定する
  2. ヘッダーを自分で作って、その画像を設定する

 

①の場合、ロゴ(タイトル)は元々WordPressの基本設定で入力してあると思うので、
そのまま表示されます。

下記のように背景のみ設定してます。

 

②の場合は、ロゴも自分で作って一つの画像にしてしまってから挿入する方法ですね。

例えば、こんな感じ↓↓

①でいいなら、ダッシュボード→外観→ヘッダーをクリック。

 

現在のヘッダーを変更する場合は、新規画像を追加をクリックし、
あらかじめ用意した画像を選べばOKです。

でも、少し手の込んだオリジナルのヘッダーを設定したいって方のために、次で説明していきますね♪

ヘッダー画像の作り方

私がお勧めするツールは、Canva(キャンバ)です。

もちろん無料で利用できますので、気軽に使えますよ。

何より一から自分で画像を用意したり、フォントをダウンロードしてこなくても、

それなりの物が仕上がります(^^)/

 

FacebookやGoogleでも登録できますし、メールアドレスでもOKです。

 

  1. 氏名
  2. メールアドレス
  3. パスワード

それぞれ入力したら、アカウントを作成するをクリックします。

個人を選んで、クリックします。

 

初めてのデザインを開始、の画面になります。

ここでテンプレートが用意されているので、目的にあったものを選んでもいいのですが、

今回はヘッダーをカスタムサイズで設定したいので、とりあえず何か選んで進んで下さい。
(ここではロゴを選択してみました)

画面が変わったら、いったんホーム画面に戻ってください。

 

 

上記のようなホーム画面が表示されたら、カスタムサイズをクリックします。

 

WordPressのCOCOONなら、1070x100でしたが、

少し大きめに設定したいので1200x200くらいで作っていきたいと思います。

 

先ほどのカスタムサイズで入力します。

 

画面が変わったら、上記のサイズを確認してください。

自分で入力したサイズになっていれば、OKです。

左側のメニューを選ぶと、右側のページに反映されます。

1200x200のサイズだと、表示されるテンプレートがありません。

サイズが小さいと、表示されないようです。

ここでは、写真をクリックします。

そうすると、右側に出てきます。

カテゴリーを選択したり、検索窓にキーワードを入力すると、当てはまる画像が表示されます。

下にスクロールいくと、たくさん画像が表示されるので、

画像の右下に『無料』と表示されている物を選んでください。

無料のものでないと、お金がかかってしまうので要注意!

試しに、右下の画像を選んでみます。

右側の白紙の部分に画像が挿入されました!

ここで大きさを調整していきます。

まわりの枠まで、大きくしていきます。

その時、表示させたい部分が枠の中に出るように位置を調整してくださいね。

こんな感じにしてみました。

画像を選ぶ時のポイントは、ごちゃごちゃしすぎない画像を選ぶこと。

後からテキストを挿入するので、色や画像がごちゃごちゃし過ぎると、目立たなくなってしまいます。

次は、テキスト(タイトル)挿入です。

テキストを選ぶと、右にメニューが出てきます。

見出しを追加で、テキストボックスを表示させる方法と、
下にあるテンプレートを選んで表示させる方法があります。

今回は一行だけのテキストを挿入するので、見出しを追加を選択。

出てきた文字を修正して、打ち換えます。

  1. テキストの選択
  2. 文字の大きさ
  3. 文字の色
  4. 太字
  5. 表示方法
  6. 配置(前面、背面など)
  7. 透明度
  8. ゴミ箱

修正した文字の色やフォントなどは、上にあるメニューから変更できます。

間違えた場合はゴミ箱に入れて、再度やり直してもOKです。

フォントの選択は、①のメニューから選択できます。

上記のように、検索バーから入力するか、下にスクロールして選んでもOK。

フォントも色も変更できました!

出来上がったデザインをダウンロードしたいので、右上のダウンロードメニュークリック

ダウンロードをクリックすると、下記の画面が表示されますが、右上のxで消して大丈夫です。

パソコンの左下にダウンロードされたファイルが表示されていれば成功です。

出来上がった画像を、先ほどの設定画面で指定してあげればヘッダーに設定されます。

作成したヘッダー画像を設定する

ダッシュボードの外観→ヘッダーをクリック。

画像を選択で、先ほど作成した画像を選びます。

その時、ロゴを画像にする、タイトルロゴ画像にするか。という項目にチェックを入れて下さいね。

はい、きちんと表示されました~♪

まとめ

いかがでしたでしょうか。

ヘッダー画像、簡単に設定&作成する方法をご案内しました。

もし設定がお済みでないなら、参考になれば幸いです。

最後まで読んで頂き、ありがとうございました。

今なら無料で使える素材集はこちら

ブログに使う素材に困ったら、チェックしてみてくださいね(☆)

 

 

ミントへのお問合せや、ご質問はこちらまで

どんな些細な事でも構いません。

ちょっとした世間話や、主婦目線のグチでも大歓迎。

ミントにメールしてもらえたら、嬉しいです。

ヤギさんの画像を、クリックしてね♪

Twitterでフォローしよう