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

ブログについて
ブログについて

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

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

ジロ
ジロ

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

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

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

スポンサーリンク

ヘッダー画像をCanvaで作る

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

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

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

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

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

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

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

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

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

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

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

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

写真・画像の背景をワンクリックで消す方法 | まずは無料でお試し – remove.bg
remove.bgは写真の背景を消したい、写真から人物を切り抜きたい方に最適です。背景透過のやり方が分からない方でも、簡単に画像の切り抜きや背景の透過が可能。パソコンかスマホさえあればOKです。

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

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

スポンサーリンク

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

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

Cocoonでヘッダーを設定する

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

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

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

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

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

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

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

ジロ
ジロ

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

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

ジロ
ジロ

じゃ、次行くよ~。

スポンサーリンク

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

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

ジロ
ジロ

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

それがこちら。

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

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

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

ふたたびCocoonの設定画面。

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

Cocoonでヘッダーを設定する

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

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

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

スポンサーリンク

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

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

ジロ
ジロ

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

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

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

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

ジロ
ジロ

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

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

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

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

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

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

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

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

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

PVアクセスランキング にほんブログ村

スポンサーリンク
フォローする

2008年ごろからFXで資産運用を開始、2015年のロスカットを機にして投資手段を見直して端株投資に行きつく。
すでに失敗することのできない年齢であることから、株式やインデックスを使って着実に資産運用を行う。
詳しいプロフィール ≫ こちら

フォローする
スポンサーリンク
ジロろぐ

コメント

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