前回、ヘッダー画像の設定方法を学んだエテキチ。
今回は『ブログの可愛いヘッダー画像の作成方法』を教えてもらうようだ。
エテキチ
うう…エテ美ちゃんにあんなこと言われるなんてウキ…うう…。
ゴリキチ
どうしたウホかエテキチくん。めそめそして。
エテキチ
前回のレッスンで設定したヘッダー画像をエテ美ちゃんに見せに行ったウキ。そしたらサイトのイメージと全然違う自己満画像って言われたウキ…。
ゴリキチ
まぁ確かにエテキチくんのブログタイトルには『ウキウキ』が入ってるのに全然ウキウキ感なかったウホよね。
エテキチ
悔しいウキ。なんとかしてヘッダー画像にウキウキ感を出すことはできないウキか？
ゴリキチ
一番無難なのはこの前紹介した『ココナラ』でプロに作ってもらうことウホね。
エテキチ
『ココナラ』ウキかぁ…。できればお金をかたくないウキよ。
ゴリキチ
その気持ちはわからんでもないウホね。それじゃあちょっと面倒だけど自分でブログのヘッダー画像を作成してみるウホか。
エテキチ
デザインの知識がなくてもヘッダー画像の作成って出来るウキか？
ゴリキチ
今は便利な画像編集サイトや無料素材サイトがあるウホからね。素人でもいきなりそれなりのものを作成することが出来るウホよ。
エテキチ
本当ウキか！？早速ヘッダー画像の作成のし方を教えてほしいウキ！
ゴリキチ
OKウホ。それじゃあ説明していくウホね。
スポンサーリンク
ブログの可愛いヘッダー画像を自分で作成するウホ！
ゴリキチ
まず始めにヘッダー画像を作成するために今回利用していくサイトを紹介するウホ。利用規約はサイトによって違うウホから、ちゃんと確認するウホよ。
エテキチ
OKウキ。
今回利用するサイト
Canva…画像の編集が基本無料できるサイト。要登録。 サイトアドレス：https://www.canva.com/
FLATICON…アイコン画像が一部無料でダウンロードできるサイト。要登録。 サイトアドレス:http://www.flaticon.com/
Subtle Patterns…シンプルな背景画像が無料でダウンロードできるサイト。登録不要。 サイトアドレス:https://www.toptal.com/designers/subtlepatterns/
FREE-LINE-DESIGN…無料で罫線がダウンロードできるサイト。登録不要。 サイトアドレス:http://free-line-design.com/
ゴリキチ
上のサイトのうちメールアドレスやファイスブックアカウント、Googleアカウントで登録が必要なサイトにはあらかじめ登録しておくウホよ。
エテキチ
分かったウキ。
ゴリキチ
今回はヘッダー画像の作成がメインのお話ウホから、ヘッダー画像に使用する素材はあらかじめダウンロードしてあることを前提に進めるウホ。
ヘッダー画像の作成に使用する素材を用意するウホ！
エテキチ
OKウキ。どんな素材を使うウキか？
ゴリキチ
今回は以下の画像を使ってブログの可愛いヘッダー画像を作成していくウホよ。
FLATICONでダウンロードした画像
※PNG形式で保存することをおすすめします。
Subtle Patternsでダウンロードした画像
FREE-LINE-DESIGNでダウンロードした画像
エテキチ
この画像を組み合わせてブログのヘッダー画像を作成していくのウキね。
ゴリキチ
そういうことウホね。それじゃあ実際の操作を説明していくウホ。
画像編集サイト『Canva』で画像を加工するウホ！
ゴリキチ
今回ヘッダー画像の加工に利用するサイトはさっき紹介した『Canva』っていうサイトウホ。ほとんど無料で使える上に素人にも簡単に画像の編集ができる優れたサイトウホよ。
エテキチ
便利な世の中になったものウキ。
ゴリキチ
まず『Canva』に登録してマイページに入ったら、サイドバーの『デザインを作成』をクリックするウホ(上図赤枠)
エテキチ
OKウキ。
ゴリキチ
次の画面には様々な媒体で使用する場合のサイズのデザイン案が表示されているウホ。ワードプレスのテーマにはそれぞれ推奨しているヘッダー画像のサイズがあるウホから、自分で確認して選択するウホ。ここでは画面右上の『画像サイズを指定』をクリックして好きなサイズのヘッダー画像を作成することにするウホ(上図赤枠)
エテキチ
了解ウキ。
ゴリキチ
今回は幅1100px、高さ500pxのヘッダー画像を作成していくことにするウホ。そこで次の画面ではヘッダー画像の幅と高さを入力(上図①)して、『デザインする』をクリックするウホ(上図②)。
エテキチ
OKできたウキよ。
ゴリキチ
そしたら次の画面のサイドバーの『アップロード』をクリック(上図①)して、続けて『画像をアップロード』をクリックするウホ(上図②)。
エテキチ
ポチポチっとなウキ。
ゴリキチ
さっきダウンロードしておいた素材のうちまずは背景に使う画像をアップロードするウホ。アップロードができたらドラッグ&ドロップで右のレイアウト画面に配置するウホ(上図参照)。
エテキチ
ふむふむ、出来たウキ。
ゴリキチ
このままではサイズがあってないウホから、画像の四つの角のどれかにカーソルを合わせて適宜大きさを変更するウホよ(上図参照)。画像は画面右上にある操作タブから『反転』したり、『透明度を変更』したり出来るから適宜これも利用するウホ。
エテキチ
OKウキ。
ゴリキチ
同じようにして、用意してあったアイコン画像と罫線をアップロードしてドラッグアンドドロップで配置していくウホ(上図参照)。すると上の画像のようにブログのヘッダー画像は完成するウホ。
エテキチ
出来たウキ。あとは何するウキ？
ゴリキチ
最後にブログのタイトルを入れるウホよ。サイドバーの『テキスト』をクリック(上図①)するといろんな形式のテキスト例が出てくるウホ。自分で気に入ったのを使えばいいウホよ。今回は上にある『見出しを追加』をドラッグ&ドロップしていくウホ(上図②)。
エテキチ
ふむふむウキ。文字の色とかを変えるのはどうするウキか？
ゴリキチ
画面上の操作タブの所から『フォントの変更(上図③)』、『フォントサイズ変更(上図④)』、『フォントカラー変更(上図⑤)』ができるウホから、お好みで設定を変えるウホよ。
エテキチ
了解したウキ。
ゴリキチ
完成したみたいウホねエテキチくん。けっこういいじゃないウホか。
エテキチ
早速ブログで設定してくるウキ！
エテキチ
出来たーウキ！これは完全にウキウキ感が出ているウキ！まさか全部無料でここまでのものが作れるとは思ってなかったウキ！
ゴリキチ
それはよかったウホ。これならばっちりウキウキ感が出ているウホね。
エテキチ
ようし、早速エテ美ちゃんのところにリベンジしに行くウキ！これは間違いなく惚れ直すウキね！今晩は寝かさないウキよ～！
ゴリキチ
……。お願いだから合意の上でやってほしいウホ。
スポンサーリンク
今回何とかブログの可愛いヘッダー画像を作成することに成功したエテキチ。
次回はどんな波乱の展開が二匹を待ち受けているのか！？
【次回】
『ワードプレスブログの投稿ページを作成するウホ！』
に乞うご期待！
