今回は無料のデザインツール、Canvaを使ってWordPressで作ったブログのサイトロゴを作成する方法をご紹介です。
ロゴを変更するだけで、一気に「自分のブログ感」が増しますよね。
当ブログではWordPressテーマ「Diver」を使っているため、ロゴ推奨サイズに合わせて作成しますが、お使いのテーマのヘッダーサイズに合わせるだけなので大きな違いはありません。
ツールは前回同様、web上で操作ができる「Canva（キャンバ）」を使用していきます。
Contents
Diverのロゴサイズは？推奨サイズを確認する
当ブログで使っているDiverのヘッダーロゴのサイズを確認します。
ダッシュボード⇒外観⇒カスタマイズ⇒「サイトロゴ・アイコン」を開くと、ロゴ画像の推奨サイズは「250×60px」となっています。
絶対値ではありませんが、デフォルトの状態で綺麗にロゴが表示されるサイズになりますので、まずはこれに近いサイズで作成するのがいいでしょう。
Canvaで先にサイズを指定して作成する方法
ロゴのサイズが決まっているなら、予めサイズを指定して作成していくと、Canvaだけでロゴ作成が完了します。
まずはCanvaのトップページからログインして、画面右側の「カスタムサイズ」に作成したいロゴのサイズを入力します。
250×60って、かなり細目の長方形なので、現在のテンプレート内にはないサイズ。
そこで、背景・素材・テキストを使って、装飾していきます。
まずはシンプルに背景は白。
続いて左側のツールより、「テキスト」を選んでブログタイトルを入力します。
ちなみに現在、当ブログのロゴで使用しているフォントは「Great Vibes」。
キャンバスいっぱいに拡大します。
素材からイラストを挿入しちゃったりして。
Canva内の無料イラストはちょっといまいち少ないから、他のサイトで予めアイコンやイラストを用意しておくっていうのもいい方法だと思います。
Canvaの便利なところは、作成中のデザインとは別パターンを同じ画面内で作れるところ！
このフォント以外だったらどんな感じになるかなー？とか、色違いパターンを見比べることができてとても便利。
デザインの下に表示される、「新しいページを作成」をクリック。
同じサイズのキャンバスが表示されるので、別パターンのロゴを作っていきます。
背景色付き、イラスト挿入パターンとか、文字の白抜きとか。
完了したらダウンロードしますが、複数のデザインパターンを作成した際は、全部のデザインが圧縮ファイルでダウンロードされるので、必要ないデザインは削除しておきましょう。
タイトルは英数字に変更して、PNGでダウンロードすればOK。
Canvaで作成したロゴ画像をWordPressにアップロードする
Canvaで作成・ダウンロードしたロゴ画像を、早速ダッシュボードからヘッダーに設置していきます。
Diverの場合は、外観⇒カスタマイズ⇒「サイトロゴ・アイコン」ですね。
「画像を選択」から、PCに保存したロゴ画像を選択してアップロード。
テストブログにアップしてみましたが、こんな感じ↓
ヘッダーの背景色をロゴの背景色と同じにすると、統一感がでますね。
デザインが決まらない！テンプレートからロゴを作成する方法
ちょっとデザインを加えたいけど、なかなかアイデアがでてこない…
そんな時はCanvaのテンプレートを使うと、ヒントがもらえるかも。
いろんな種類のテンプレートがありますが、サイズや形状がロゴに近いものを選んだ方が作りやすい気がします。
今回は「メルマガヘッダー（600×200）」を選んでみました。
左側に並ぶテンプレートから、ロゴとして使いたいデザインを選びます。
これをブログ用のロゴにあわせて、テキストや線の長さなどを編集。
こんな感じでどうでしょう…？
これくらいシンプルなやつなら、テンプレートからじゃなくても作れたんじゃ…
これをダウンロードして、PCのソフト（ペイントなど）を使ってリサイズしていきます。
PhotoScapeで使える便利な機能はこちらをチェックしてみてくださいね↓
PhotoScapeでの編集画面↓
不要な部分をトリミングして、250×60近くまでリサイズ。
先ほどと同様、テストブログにアップして、ヘッダーの背景色をあわせてみました。
Canvaの無料会員では「透過」が使えない
Diverでは固定ヘッダーといって、画面をスクロールしてもヘッダーが表示される機能がついています。
ロゴがホームリンクになっているので便利な機能なんですが、（スマホの場合は検索やハンバーガーメニューも表示される）ロゴが透過していないと背景色などが邪魔になってしまうんですよね。
当ブログ初期の頃の固定ヘッダー↓（ロゴ不使用でヘッダーの背景を透過）
Canvaにも透過機能は付いていますが、残念ながら有料会員でないと使用できない機能。
有料登録には、30日間の無料トライアルもあるので、そちらを利用して背景を透過するか、あるいはGIMPなどの別ツールを使ってみる方法があります。
固定ヘッダーを使用するなら、透過も視野にいれるか、スクロールした状態も考慮してロゴデザインを作成するのがおすすめですよ。
