当ブログでは、Cocoonを初期状態からカスタマイズする方法(コピペ可)をまとめています。
ヘッダーロゴをCanvaで作成する方法をまとめました。
ヘッダーロゴとは?
![](https://hibicolor.com/hibilab/wp-content/uploads/2024/06/headerlogo-making-23.png)
ヘッダーロゴは、ブログ上部のヘッダー内にあるブログタイトルのことです。
テキストでも問題ありませんが、画像で作ることも多いです。
印象的なロゴ画像を使えば来訪者にブログのことをおぼえてもらいやすくなります。
ヘッダーロゴの画像サイズは?
ロゴ画像は、表示するサイズぴったりで作成すると表示したときに粗く見えてしまうので、最低でも表示したいサイズの2倍の大きさで作成します。
ヘッダーロゴの画像サイズは、【高さ150ピクセル、幅400~800ピクセル】がおすすめです。
![](https://hibicolor.com/hibilab/wp-content/uploads/2024/06/Icon-Clownfish.png)
このブログのヘッダーロゴサイズは【高さ150ピクセル、幅400ピクセル】だよ!
幅はブログタイトルの長さによって変えて大丈夫です。
ヘッダーロゴをCanvaで作成する方法
ヘッダーロゴをCanvaで作成する方法を紹介します。
Canvaに登録・ログインする
最初に、Canvaに登録・ログインします。
Canva は無料で利用できます。
ブラウザ上でデザインできるので、ソフトのダウンロードは必要ありません。
![](https://hibicolor.com/hibilab/wp-content/uploads/2024/06/Icon-Clownfish.png)
クラウド上でデータが保存されるから、どの端末からでもログインすればデザインの続きができるよ!
![](https://hibicolor.com/hibilab/wp-content/uploads/2024/06/Icon-Frog.png)
超便利!
新しいデザインを作成する
![](https://hibicolor.com/hibilab/wp-content/uploads/2024/06/headerlogo-making-2-1024x468.png)
右上の【デザインを作成】をクリックします。
![](https://hibicolor.com/hibilab/wp-content/uploads/2024/06/headerlogo-making-3-1024x468.png)
【カスタムサイズ】をクリックします。
![](https://hibicolor.com/hibilab/wp-content/uploads/2024/06/headerlogo-making-4-1024x468.png)
【高さ150ピクセル、幅400~800ピクセル】を入力して【新しいデザインを作成】をクリックします。
ロゴのテキストを入力する
![](https://hibicolor.com/hibilab/wp-content/uploads/2024/06/headerlogo-making-5-1024x463.png)
【テキスト】→【テキストボックスを追加】をクリックします。
![](https://hibicolor.com/hibilab/wp-content/uploads/2024/06/headerlogo-making-6-1024x463.png)
ブログ名を入力し、フォントの種類とサイズを変更します。
サイズはキャンバスいっぱいになるくらいまで大きくします。
テキストを装飾する
![](https://hibicolor.com/hibilab/wp-content/uploads/2024/06/headerlogo-making-7-1024x463.png)
テキストの色を変更します(エフェクトを使う場合は後で変更してもいいです)
![](https://hibicolor.com/hibilab/wp-content/uploads/2024/06/headerlogo-making-8-1024x463.png)
【エフェクト】でスタイルを変更すると、かなりロゴっぽい感じになります。
![](https://hibicolor.com/hibilab/wp-content/uploads/2024/06/headerlogo-making-9-1024x463.png)
エフェクトの中にもカラー選択する部分があるので、そちらでも色を変更します。
![](https://hibicolor.com/hibilab/wp-content/uploads/2024/06/headerlogo-making-10.png)
![](https://hibicolor.com/hibilab/wp-content/uploads/2024/06/headerlogo-making-11.png)
【テキスト】→【フォントの組み合わせ】や、【素材】を使用しても素敵なロゴが作れるでしょう。
デザインをダウンロードする
![](https://hibicolor.com/hibilab/wp-content/uploads/2024/06/headerlogo-making-12-1024x463.png)
上部のデザインの名前を変えます(ファイル名になります)
【ファイル】→【ダウンロード】をクリックします。
![](https://hibicolor.com/hibilab/wp-content/uploads/2024/06/headerlogo-making-13-1024x463.png)
ファイルの種類を選択して、ダウンロードをクリックします。
おすすめはPNGファイルです。
PNGファイルは、このあとに紹介する背景透過できるメリットがあります。
- PNG……圧縮率が低く、画像の劣化がない。そのかわりサイズ(容量)が重い。透過できる。
- JPG……圧縮率が高く、画像の劣化が大きい。そのかわりサイズ(容量)が軽い。透過できない。
![](https://hibicolor.com/hibilab/wp-content/uploads/2024/06/Icon-Snail.png)
透過ってなに~?
![](https://hibicolor.com/hibilab/wp-content/uploads/2024/06/Icon-Clownfish.png)
画像の透明部分が透過だよ!
背景を透過することが多いよ!
ヘッダー背景色と背景の色が異なるなら透過が必要
ヘッダー背景色と背景の色が異なるなら透過が必要になります。
![](https://hibicolor.com/hibilab/wp-content/uploads/2024/06/headerlogo-making-1.png)
透過しない場合、上の画像のようにロゴの背景だけ色が違う状態になってしまいます。
背景透過はCanva Proの契約が必要
Canvaで背景透過をするには、Canva Proの契約が必要になります。
30日間の無料トライアルがあるので、その期間中に透過処理することができます。
その他の方法:イラストソフトや写真加工ソフトで背景透過しよう
Canva Pro を使わないで背景透過をする場合、イラストソフトや写真加工ソフトを使えば簡単に透過できます。
- フォトショップ(Photoshop)
- クリップスタジオ(CLIP STUDIO PAINT PRO)
- ファイアアルパカ(FireAlpaca)
- メディバンペイント(MediBang Paint PRO)
![](https://hibicolor.com/hibilab/wp-content/uploads/2024/06/Icon-Clownfish.png)
この記事では、無料で使えるメディバンペイント(MediBang Paint PRO)で背景透過する方法を紹介するよ!
メディバンプロで背景透過する方法
MediBang Paint PRO をダウンロード・起動します。
Canvaで作成した背景透過したいロゴファイルを開きます。
![](https://hibicolor.com/hibilab/wp-content/uploads/2024/06/headerlogo-making-14-1024x530.png)
左にある自由選択アイコンをクリックします。
![](https://hibicolor.com/hibilab/wp-content/uploads/2024/06/headerlogo-making-15.png)
小さくてわかりにくいですが、こういうアイコンです!
![](https://hibicolor.com/hibilab/wp-content/uploads/2024/06/headerlogo-making-16-1024x530.png)
キャンバスの背景透過したい部分をどこでもいいのでクリックします。
![](https://hibicolor.com/hibilab/wp-content/uploads/2024/06/Icon-Whale.png)
青い部分は保護されている部分だよ!
![](https://hibicolor.com/hibilab/wp-content/uploads/2024/06/headerlogo-making-17-1024x530.png)
消しゴムツールをクリックして、サイズを大きくして一気に消していきます。
キャンバスの背景透過したい部分をドラッグして消していきます。
![](https://hibicolor.com/hibilab/wp-content/uploads/2024/06/headerlogo-making-18-1024x530.png)
背景透過したい部分がすべてグレーと白の格子柄になればOKです。
![](https://hibicolor.com/hibilab/wp-content/uploads/2024/06/headerlogo-making-19-1024x530.png)
【選択範囲】→【解除】で選択範囲を解除すると、青い部分が元に戻ります。
![](https://hibicolor.com/hibilab/wp-content/uploads/2024/06/headerlogo-making-20-1024x530.png)
【ファイル】→【名前を付けて保存】でファイルを保存します。
![](https://hibicolor.com/hibilab/wp-content/uploads/2024/06/Icon-Frog.png)
あれれ?
背景透過したはずなのに透過できてないんだけど!?
![](https://hibicolor.com/hibilab/wp-content/uploads/2024/06/Icon-Clownfish.png)
背景透過した画像はPNGファイルで保存しよう!
JPGで保存したら背景透過できないよ!
- PNG……圧縮率が低く、画像の劣化がない。そのかわりサイズ(容量)が重い。透過できる。
- JPG……圧縮率が高く、画像の劣化が大きい。そのかわりサイズ(容量)が軽い。透過できない。