【詳細図解】ブログタイトル、ヘッダー画像の作成と設定方法
![](https://oko-blog.com/wp-content/uploads/2020/09/マイナスからの-ブログの始め方-72-1.png)
ブログタイトル、ヘッダーの画像はあなたのブログの方向性をしめしつつ、ユーザーが覚えやすいものになっていますか?この記事では画像編集の方法含めて、ヘッダー画像の全てを說明しています。ブログをより良いものにしたい方のみ読んでください。
![](https://oko-blog.com/wp-content/uploads/2020/08/2020-09-24_21h31_37.png)
okoんにちは。マイナスからブログを始めたオコブロです。
あなたの現在位置
このブログは「最初の記事から順に読めば誰でも収益を得られるwordpressブログを作れる」というコンセプトで運営しています。順に読んでくれている方の現在地は「Googleとユーザーに最適化されたブログデザインを作成している段階」です。
この記事にたどり着いた方は
- ブログタイトルをかっこよくデザインしたい・・・
- ヘッダー画像を設定したい・・・
- でもやり方がわからない・・・
- ヘッダーを変更する方法が知りたい
という方ではないでしょうか。
ブログトップページに訪れたユーザーがまずは目にする「ヘッダー画像」はユーザーにあなたのブログを覚えてもらうという意味でとても重要です。
今回はブログの顔ともいえるヘッダー画像をしっかり設定していきましょう。
![](https://oko-blog.com/wp-content/uploads/2020/08/2020-09-24_21h31_37.png)
ブログデザインの最重要部分です。
Table of Contents
ブログヘッダー画像の重要性
![大事なこと](https://oko-blog.com/wp-content/uploads/2020/08/loving.png)
これは説明不要なくらい直感的に重要だとわかりますよね。
トップページに大きく表示される画像なのでブログ内でもっとも重要な画像であることは明らかです。
ヘッダー画像はブログのイメージを伝える重要な要素です。「きれいなブログ」「楽しいブログ」「真面目なブログ」「ふざけたブログ」などなどヘッダーの画像がそのままブログの個性を表すイメージになります。
ブログヘッダー画像のデザインの方向性
![方向を決める男](https://oko-blog.com/wp-content/uploads/2020/08/innovation__flatline-1.png)
ヘッダー画像の考え方は様々ありますが、最もいいのは
ブログに合った画像+ブログ名
です。
ブログの雰囲気も伝わりますし、ブログ名も覚えてもらうことができます。
画像+ブログ名の例
- 旅ブログでしたら「旅先の写真+ブログ名」
- 料理ブログでしたら「料理の写真+ブログ名」
- ブログの作り方のブログでしたら「タイプライターの写真+ブログ名」
といった感じです。
ブログに登場させるキャラクターがいれば「キャラクター+ブログ名」などでもいいでしょう。
どんなブログかわかるように、イイ感じのインパクトのある(派手という意味ではありません)デザインをしていきましょう。
![](https://oko-blog.com/wp-content/uploads/2020/08/2020-09-24_21h29_13.png)
呼んだ?
![](https://oko-blog.com/wp-content/uploads/2020/08/2020-09-24_21h31_37.png)
いいえ
良い写真が欲しい方はo-danというサイトが最もおすすめです。著作権フリーのおしゃれな写真がたくさんあります。
では具体的にヘッダー画像の作り方と設置方法を流れで説明していきます。
ブログヘッダー画像の作り方
![カスタマイズをクリック](https://oko-blog.com/wp-content/uploads/2020/09/2020-07-29_12h47_53-1-1.jpg)
ダッシュボードの「外観」から「カスタマイズ」をクリック。
![ヘッダー画像の鉛筆マークをクリック](https://oko-blog.com/wp-content/uploads/2020/09/2020-07-29_12h48_55-1-1.png)
現在表示されているデフォルトのヘッダー画像の左のペンマークをクリック。
![画像のサイズを確認](https://oko-blog.com/wp-content/uploads/2020/09/2020-07-29_12h50_54.png)
「スライド」という項目があるので推奨サイズを確認します。1900×600pxが推奨サイズだと確認します。
ちなみにこのブログでつかっているテーマLightningではヘッダー画像はこの「スライド画像」という部分です。
その名の通り簡単にスライドショーにすることができますが、この記事ではあくまでもヘッダー画像を表示させるということのみ説明していきます。
![CANVAのトップページ](https://oko-blog.com/wp-content/uploads/2020/09/2020-07-29_12h52_07-1-1.png)
Canvaにアクセスして会員登録を行います。登録はGoogleアカウントで行けたような気がします。
登録できたらトップページの「カスタムサイズ」をクリックし、サイズを設定する窓に1900×600と入力してから「新しいデザインを作成」をクリック。
![テンプレの選択](https://oko-blog.com/wp-content/uploads/2020/09/2020-07-29_12h53_37-1-1.jpg)
気に入ったテンプレを選択しましょう。
![ブログタイトルを入力](https://oko-blog.com/wp-content/uploads/2020/09/2020-07-29_13h04_15-1.jpg)
ブログ名を打ち込むとこんな感じです。今のブログ名と違っていますが気にしないでください。
![テンプレから写真を削除](https://oko-blog.com/wp-content/uploads/2020/09/2020-07-29_13h06_40-1.png)
テンプレの写真は使わないので、写真の上で右クリックを押して削除します。
以前アップロードした画像を使う場合は「アップロード」をクリックすれば呼び出せます。
アップロードしていない画像は、画像を配置したい場所にドロップしてください。
![位置を調整](https://oko-blog.com/wp-content/uploads/2020/09/2020-07-29_13h24_25.png)
真ん中にドンと置かれるので幅と位置を微調整してください。
![前後を調整](https://oko-blog.com/wp-content/uploads/2020/09/2020-07-29_13h25_49.png)
ちなみに画像を複数使う場合は、画像の上で右クリックします。すると「背面へ移動」「前面へ移動」という項目があるので写真の上下(前後)を入れ替えることができます。
![透明度を調整](https://oko-blog.com/wp-content/uploads/2020/09/2020-07-29_13h26_26-1.png)
右上のアミアミをで透明度を調整できます。
![完成した画像をダウンロード](https://oko-blog.com/wp-content/uploads/2020/09/2020-07-29_13h28_06-1-1.jpg)
ダウンロードしてください。
![パソコンにダウンロード](https://oko-blog.com/wp-content/uploads/2020/09/2020-07-29_13h29_11-1-1.png)
パソコン画面の左下にファイルが表示されています。
![画像を選択をクリック](https://oko-blog.com/wp-content/uploads/2020/09/2020-07-29_13h31_02-1-1.png)
さきほどの画面に戻って「画像を選択」をクリック。
![ファイルをアップロード](https://oko-blog.com/wp-content/uploads/2020/09/2020-07-29_13h31_47-1.png)
左下のファイルをドロップ。
![まだ見づらいヘッダーの画像](https://oko-blog.com/wp-content/uploads/2020/09/2020-07-29_13h34_37-1.jpg)
ヘッダー画像は表示されましたが、画像の上にデフォルトの文字が被っているので削除していきましょう。
![スライドショー](https://oko-blog.com/wp-content/uploads/2020/09/2020-07-29_13h35_05-1.jpg)
それと、デフォルトではスライドショーになっているの2枚目以降の画像が邪魔です。これもけしていきましょう。
![スライドなどの設定を変更](https://oko-blog.com/wp-content/uploads/2020/09/2020-07-29_13h37_12-1.png)
「スライドショー」のところにデフォルトの設定があるのですべて空欄にします。
![スライドショー用の画像を削除](https://oko-blog.com/wp-content/uploads/2020/09/2020-07-29_13h41_15-1-1.png)
2枚目以降の写真も削除します。
![ヘッダータイトルが完成](https://oko-blog.com/wp-content/uploads/2020/09/2020-07-29_13h42_19-1-1.jpg)
今回の作業はこれで完了です。
![](https://oko-blog.com/wp-content/uploads/2020/08/2020-09-24_21h29_13.png)
このタイトル3日くらいで変えてたよね
![](https://oko-blog.com/wp-content/uploads/2020/09/2020-09-24_21h44_12.png)
そのとき「ベスト!」と思ってもどうせ変えるので気軽に作りましょう
まとめ
![](https://oko-blog.com/wp-content/uploads/2020/09/2020-09-25_23h00_46.jpg)
いかがでしたでしょうか。
ヘッダー画像の基本的な作り方と設置の仕方を説明しました。
ここに書いた内容はあくまでも「僕がもっとも良い」と感じたデザイン方法です。あなたのブログにもっとも合ったデザインを是非探してください。
ちなみに最初のブログで僕が設置していたのは上の画像の手書きで書いたイラストです。「自作のイラストにしたいんだけど、PCで書くスキルがないんだよな・・・」という方は手書きで書いたイラストを写真に撮ってもそれなりに見えます。スキルがなくても工夫しだいでなんとでもなります。
色んな方法があるのでヘッダー画像はこだわって作ってください。