Cocoonで使うオリジナルのヘッダーとアピールエリアを作ってみた

ブログについて

最近ツイッターのプロフィール欄のヘッダー画像を作ってる人のツイートを見て、なんか面白そうということで私もCanvaをつかって作ってみました。

そうすると思いのほかうまくいって、ふと考えました。

ジロ
ジロ

これってうまくやればブログのヘッダー画像も作れるよな?

ということで、以前から気になっていた自分のブログのヘッダー画像と、トップ画面に表示させていたアピールエリアの画像を作ってみました。

このページの最後には比較画像ものせてますけど、一目瞭然にかわるので、その気になれば挑戦してみてください。

スポンサーリンク

ヘッダー画像をCanvaで作る

Canvaではいろんなサイズのオリジナル画像が作れますけど、今回利用したのはツイッターのヘッダーサイズ用の1500*500というサイズ。

出来上がったものがこちら。

Canvaで出来上がったヘッダー画像

出来たのをいきなり出してくる辺り、なんか3分クッキングみたいねw

画像を複製してロゴと背景に分ける

出来上がった画像を複製して、片方はロゴだけを消して、もう一方は背景だけを消します。

ヘッダー画像を背景とロゴに分ける
ジロ
ジロ

ロゴの方は背景を黒にしておくといいです。

出来たらこれをダウンロード。

ロゴの背景を透過色にする

今度はこのロゴの方の背景(上の画像では黒の部分)を消します。

背景透過はググればいくらでも出てきますけど、私が使ったのはこちらのサイト。

画像の背景を削除 – remove.bg
画像背景を削除: 100% 自動 – 5秒以内 – クリックをせずに – 無料。

画面にドラッグするだけで簡単に削除してくれます。

背景を透過させたものがこちら。

スポンサーリンク

Cocoonでヘッダーを反映させる

こちらはCocoonをお使いの方なら一度や二度はお世話になってるCocoon設定の項目。

Cocoonでヘッダーを設定する

ここで使うのはヘッダーのタブ。

ヘッダーにロゴを反映する

ヘッダーにロゴを設定する

高さは大体450前後くらい、モバイル用の高さはデフォルトのままでいい感じですけど、あとは調整してみてください。

ヘッダーに背景を反映する

ヘッダーに背景を設定する

同じようにこちらにも背景を設定します。

ジロ
ジロ

後は設定を保存するだけ。

アピールエリアも変わってるよね?

ジロ
ジロ

じゃ、次行くよ~。

スポンサーリンク

Canvaでアピールエリアをつくる

再びCanvaでアピールエリアの画像を作っていきます。

ジロ
ジロ

ヘッダー画像は「青」と「自由」というのをイメージして空の画像を使っていますが、アピールエリアにも同様の空の画像を持ってきたときに空が2枚に渡って続くのはおかしいと思ったので、芝がひろがるイメージで作りました。

それがこちら。

Canvaでアピールエリアをつくる
ジロ
ジロ

Canvaでは明るさやコントラスト、色調を調整して、2枚の画像の色合いが同じようになるように意識しました。

アピールエリアを設定する

ふたたびCocoonの設定画面。

今度は2段目のアピールエリアというタブを使用します。

Cocoonでヘッダーを設定する

高さはあまり大きすぎると、ヘッダーとアピールエリアがかなり大きくなるので程よく設定してください。

Cocoonの設定画面でアピールエリアを設定する

後はアピールしたいボタンなんかを設定します。

スポンサーリンク

出来上がったトップページ

こちらがリニューアルしたトップページの画像比較。

ジロ
ジロ

ヘッダー画像とアピールエリアの間にメニューバーを入れて、画像の繋がりをぼかしているのもコツです。

へ~、いい感じにできたね^^

楽しめる程度の時間で、思ったより変化のあるサイトになったんじゃないかと思います。

でも問題はコンテンツやろww

ジロ
ジロ

うっせーうっせーうっせーわ!!

まあ、自分のサイトをいじるのは面白いんですけど、ほどほどにしましょうね。

▽合わせてサイト型表示にするやり方を解説してます。

Cocoonのショートコードを使ってトップページをサイト型にする方法
無料テーマのCocoonを使って、トップページを作成してみました。スタイルシートなどに追記することなくショートコードだけで作れるのでおすすめです。

▽アイキャッチの作り方はこちらを参考にしてみてください。

イラストACで無料のイラストを素材としてアイキャッチ画像を作ってみた
以前から気になっていたイラストACに登録して、ブログのアイキャッチ画像を作ってみました。
ブログ村に参加しています

読者登録していただけると嬉しいです

ジロろぐ - にほんブログ村

ブログランキングに参加しています


ブログについて
スポンサーリンク
フォローする
スポンサーリンク

40代サラリーマン、3人の父親。
オンラインゲームに課金していたお金を、2008年ごろからFXに使い始めたことをきっかけに資産運用に目覚めたが、2015年にロスカットして投資手段を再度見直し。
すでに失敗することのできない年齢であることから、将来じぶん年金になりうる資産を築くために、株式やインデックス投資に転向。
投資資金は小遣いの中からなので端株制度を利用して資産運用してます。
詳しいプロフィール ≫ こちら

フォローする
ジロろぐ

コメント

タイトルとURLをコピーしました