● ブログをはじめたばかりで分からないことだらけの方
● ヘッダー画像のデザインに困っている方
● ヘッダー画像の変更の仕方が分からない方
ブログにヘッダー画像を入れることにしました
最近は、ブログのデザインを少しずついじっています。
トップページにはあまり手を入れていなかったので、今回は、ヘッダー画像を導入することとしました。
こちらは、現在の私のブログのトップページですが、少し寂しい感じがします。
こちらは、私が使用しているワードプレスの「JIN」のホームページのヘッダー画像です。赤枠内がヘッダー画像ですが、センスがあってうらやましいです。
ヘッダー画像のデザインはどうするか問題
図画工作や美術の成績がさんざんで、服のセレクトも悪い私がデザインするのは難しいなと思っていたところ、Free Logo Maker-Squarespaceで簡単にロゴ作成ができるとの情報を入手。
早速、トップページ画像を作成に挑戦しました。
①ロゴ作成サイトにアクセスします。
アクセスすると、次のような画面が表示されます。
②英語が苦手な方はGoogle Chromeの右上の英語⇔日本語選択で日本語を選択
（英語ができる方はそのままでもOK）
③ブログのタイトルなどを入力し、矢印をクリック。
④次にシンボルを検索とでるので、イメージと合うシンボルを探す。
「Smile（笑顔）」や「watch（腕時計）」など、英単語検索すると、関係のあるシンボルが表示されます。
検索しなくても、最初からある程度のシンボルは選択可能です。
⑤私は、すぐやる≒走るというイメージでしたので、「RUN（走る）」と入力し、矢印をクリック。
⑥検索した結果、「RUN（走る）」に沿ったアイコンが選択ボックスに表示されました。
⑦お気に入りのアイコンを設定しました。
⑧ブログタイトルの下にtagline（≒キャッチフレーズ）があります。
英語で書くとそれっぽくなります。
⑨オブジェクトを選択すると、色の変更ができるようになります。。
⑩色はかなり細かく分けられています。
私は無難にすべて黒にしました。
⑪作成したロゴをダウンロードします。
アカウントはないと思いますので、作成します。
⑫グーグルのアカウントか、メールアドレスからアカウントを作成します。
⑬アカウントを作成したら、ダウンロードページに移動。
⑫次のように表示されるので、ダウンロード。
白黒反対のものも選べます。
⑬まずはロゴが完成しました。
ヘッダー画像作成
次に、アイキャッチ画像作成でもお世話になっているCanvaと先ほど作成したロゴで、ヘッダー画像を作成していきます。
①デザインを作成をクリックし、カスタムサイズを選択
②サイズは1000×250px
③次のような白紙のキャンパスが完成。
左上のアップロードから、先ほど作成したロゴをアップロード。
④アップロードしたを選択
⑤ヘッダー画像が完成
※ロゴを拡大すると、画像が粗くなります。
いよいよヘッダー画像の変更
私はワードプレステーマは「JIN」を使用していますので、JINで変更していきます。
①ダッシュボードからサイトのカスタマイズをクリック。
②サイトデザインの設定を選択
③ヘッダー画像ありのスタイルを選択（今回はスタイル２）
④サイトのカスタマイズより、ヘッダー画像選定を選択
⑤画像の変更をクリック。
⑥先ほど作成したヘッダー画像を選択。
キャッチフレーズやサブテキストが入力されている場合、削除。
⑦ボタンのリンク先やボタンテキストを削除することで、ボタン自体を削除。
また、スマホ用のヘッダー画像も同様に画像を変更。
無事ヘッダー画像を変更することができました。
まとめ
ヘッダー画像は他のサイトとの差別化に繋がります。
少しでも目に留まるデザインにしたいところです。
今回は簡単にそれっぽいものができましたが、今後はCoconalaでプロに依頼しようかとも考えています。
少しずつ自分のサイトが整っていくのは楽しいですよね。
今日は、これまで。
