最近ツイッターのプロフィール欄のヘッダー画像を作ってる人のツイートを見て、なんか面白そうということで私もCanvaをつかって作ってみました。
そうすると思いのほかうまくいって、ふと考えました。
![ジロ](https://jiro-invest.space/wp-content/uploads/2019/12/1c6e68174d6aa9a588fe243da60e1eeb.png)
これってうまくやればブログのヘッダー画像も作れるよな?
ということで、以前から気になっていた自分のブログのヘッダー画像と、トップ画面に表示させていたアピールエリアの画像を作ってみました。
このページの最後には比較画像ものせてますけど、一目瞭然にかわるので、その気になれば挑戦してみてください。
ヘッダー画像をCanvaで作る
Canvaではいろんなサイズのオリジナル画像が作れますけど、今回利用したのはツイッターのヘッダーサイズ用の1500*500というサイズ。
出来上がったものがこちら。
![Canvaで出来上がったヘッダー画像](https://jiro-invest.space/wp-content/uploads/2021/03/4494c71905bc790485f2fee913f36250-640x263.jpg)
![](https://jiro-invest.space/wp-content/themes/cocoon-master/images/doya-woman.png)
出来たのをいきなり出してくる辺り、なんか3分クッキングみたいねw
画像を複製してロゴと背景に分ける
出来上がった画像を複製して、片方はロゴだけを消して、もう一方は背景だけを消します。
![ヘッダー画像を背景とロゴに分ける](https://jiro-invest.space/wp-content/uploads/2021/03/1fa8a54ec6e3456dfb65dc3ce03dd733-640x493.jpg)
![ジロ](https://jiro-invest.space/wp-content/uploads/2019/12/b78b2e5c9c0d106d5258e29e45960e5f-1.png)
ロゴの方は背景を黒にしておくといいです。
出来たらこれをダウンロード。
ロゴの背景を透過色にする
今度はこのロゴの方の背景(上の画像では黒の部分)を消します。
背景透過はググればいくらでも出てきますけど、私が使ったのはこちらのサイト。
![](https://sb.kaleidousercontent.com/67418/600x315/48eb30a742/emilia-og-image.jpg)
画面にドラッグするだけで簡単に削除してくれます。
背景を透過させたものがこちら。
![](https://jiro-invest.space/wp-content/uploads/2021/03/a88ba48171952e48741acb566615d9e5-640x213.png)
Cocoonでヘッダーを反映させる
こちらはCocoonをお使いの方なら一度や二度はお世話になってるCocoon設定の項目。
![Cocoonでヘッダーを設定する](https://jiro-invest.space/wp-content/uploads/2021/03/e626e2e0f685b817203851eeca9592b0-640x74.jpg)
ここで使うのはヘッダーのタブ。
ヘッダーにロゴを反映する
![ヘッダーにロゴを設定する](https://jiro-invest.space/wp-content/uploads/2021/03/9cd53a79c6f72ff874729a07f9403a90-640x221.jpg)
高さは大体450前後くらい、モバイル用の高さはデフォルトのままでいい感じですけど、あとは調整してみてください。
ヘッダーに背景を反映する
![ヘッダーに背景を設定する](https://jiro-invest.space/wp-content/uploads/2021/03/e3f3fe3430d0c6f25436b271c849b833-640x172.jpg)
同じようにこちらにも背景を設定します。
![ジロ](https://jiro-invest.space/wp-content/uploads/2019/12/b78b2e5c9c0d106d5258e29e45960e5f-1.png)
後は設定を保存するだけ。
![](https://jiro-invest.space/wp-content/uploads/2020/01/7b628e22f1e64ac0692c29c2defb1faf.png)
アピールエリアも変わってるよね?
![ジロ](https://jiro-invest.space/wp-content/uploads/2019/12/b78b2e5c9c0d106d5258e29e45960e5f-1.png)
じゃ、次行くよ~。
Canvaでアピールエリアをつくる
再びCanvaでアピールエリアの画像を作っていきます。
![ジロ](https://jiro-invest.space/wp-content/uploads/2019/12/1c6e68174d6aa9a588fe243da60e1eeb.png)
ヘッダー画像は「青」と「自由」というのをイメージして空の画像を使っていますが、アピールエリアにも同様の空の画像を持ってきたときに空が2枚に渡って続くのはおかしいと思ったので、芝がひろがるイメージで作りました。
それがこちら。
![Canvaでアピールエリアをつくる](https://jiro-invest.space/wp-content/uploads/2021/03/d2f75eabb1c7c7ed06a14d36fa64724c-640x509.jpg)
![ジロ](https://jiro-invest.space/wp-content/uploads/2019/12/b78b2e5c9c0d106d5258e29e45960e5f-1.png)
Canvaでは明るさやコントラスト、色調を調整して、2枚の画像の色合いが同じようになるように意識しました。
アピールエリアを設定する
ふたたびCocoonの設定画面。
今度は2段目のアピールエリアというタブを使用します。
![Cocoonでヘッダーを設定する](https://jiro-invest.space/wp-content/uploads/2021/03/e626e2e0f685b817203851eeca9592b0-640x74.jpg)
高さはあまり大きすぎると、ヘッダーとアピールエリアがかなり大きくなるので程よく設定してください。
![Cocoonの設定画面でアピールエリアを設定する](https://jiro-invest.space/wp-content/uploads/2021/03/4294356ba96f876959336957ad084058-640x217.jpg)
後はアピールしたいボタンなんかを設定します。
出来上がったトップページ
こちらがリニューアルしたトップページの画像比較。
![ジロ](https://jiro-invest.space/wp-content/uploads/2019/12/b78b2e5c9c0d106d5258e29e45960e5f-1.png)
ヘッダー画像とアピールエリアの間にメニューバーを入れて、画像の繋がりをぼかしているのもコツです。
![](https://jiro-invest.space/wp-content/uploads/2020/04/de46f5ace05341da58129590b99fcb23.png)
へ~、いい感じにできたね^^
楽しめる程度の時間で、思ったより変化のあるサイトになったんじゃないかと思います。
![](https://jiro-invest.space/wp-content/themes/cocoon-master/images/doya-man.png)
でも問題はコンテンツやろww
![ジロ](https://jiro-invest.space/wp-content/uploads/2019/12/6b72673823cceb846a424d8a0725bb93-1.png)
うっせーうっせーうっせーわ!!
まあ、自分のサイトをいじるのは面白いんですけど、ほどほどにしましょうね。
▽合わせてサイト型表示にするやり方を解説してます。
![](https://jiro-invest.space/wp-content/uploads/2019/04/cocoonのショートコードでトップページを作る-160x99.jpg)
▽アイキャッチの作り方はこちらを参考にしてみてください。
![](https://jiro-invest.space/wp-content/uploads/2018/08/イラストACでアイキャッチをつくってみる-160x90.jpg)
コメント