\ 主婦におすすめ!かんたん在宅ワーク4選 /

【Cocoonカスタマイズ】ブログのヘッダーロゴの作り方と設定方法

ブログ
ブログ

ブログのヘッダーロゴは、訪問者が一番最初に見るところ!

みなみ
みなみ

ロゴが通常の文字だと、なんとなく「初心者ブログ感」が漂ってしまう気がするのは私だけでしょうか?

無料テーマCocoonでも、ロゴを文字」から「画像」に変えるだけで一気に垢ぬけたブログに変わります!

ロゴ作り初心者の私でも15分ほどで簡単に作ることができました。

この記事では、「ブログのロゴ画像を作りたい!」という方に向けて、簡単な作り方から設定方法までご紹介します。

この記事を読んでわかること
  • 無料ツール「Canva」を使ったブログのロゴ画像の作り方
  • 初心者でも上手に作るためのポイント
  • WordPressテーマ「Cocoon」でのヘッダーロゴ設定方法
「ブログ運営」に関するオススメ記事
スポンサーリンク

ブログのヘッダーロゴ変更のビフォーアフター

もともとの文字設定(Before)とロゴ画像設定(After)のトップ画面比較です。

ブログトップ画面ビフォー

↓↓↓

ブログトップ画面アフター
ブログトップ画面アフター(スマホ)
みなみ
みなみ

デザイン素人の作品ですが、ロゴを変えただけで雰囲気が一気に変わりました♪

スポンサーリンク

無料ツール「Canva」でブログロゴの作り方

今回は、オンラインデザインツール「Canva」を使ってロゴ画像を作成します。

この「Canva」は、多くのブロガーさんがブログのアイキャッチ画像等の作成に使う有名ツール!

Googleアカウントをお持ちであれば、アカウント連携で簡単に登録できちゃいます。

パソコン、スマホどちらでも操作OK。

Canva Pro」は有料ですが、今回はCanvaの無料でできる範囲内での作成方法をご紹介します。

ただ、CanvaProも最初の1ヶ月は無料で利用できます。
CanvaProには有料素材・有料フォント・透過機能等のロゴ作りに役立つ機能が多いので、無料のトライアル期間を活用してロゴ作成をおすすめします。

Canvaでブランドを構築して、魅力的なロゴを数分でデザインしましょう。今すぐ開始!

①ロゴ画像のサイズは?

画像サイズは「実際にブラウザ上で表示するサイズの2倍の大きさ」で指定をしましょう。

私の場合は、「750×200px」サイズで作成しました。
※実際にブログで表示するサイズは、高さ100pxで指定しています。

実際に使用するサイズぴったりで作ってしまうと、iPhoneやMac等の高精細ディスプレイでぼやける恐れがあります。
また逆に、必要以上に大きなサイズで作成するとサイトの表示速度に影響してしまいます。

Canvaのホーム右上の「デザインを作成」⇒「カスタムサイズ」で画像サイズを指定します。

canvaデザイン作成画面

②ロゴの背景色は?

Canvaでは、背景透過機能は有料オプションとなっています。

そのため、はじめにブログのヘッダー背景に合わせてロゴ画像の背景色を指定しておきましょう。

↓ヘッダー背景色がカラーなのに白色のままでつくってしまうと、非常にダサい事態になってしまうので注意!

ヘッダー背景に画像を用いたい場合は、Canvaで画像作成後に別の背景透過ツールを使いましょう。
参考:removebg

③ブログヘッダーの「ロゴ文字」部分をつくる

左メニューバーの「テキスト」でテキストを挿入できます。

テキスト挿入後、下記のポイントに気を付けて文字の調整をしましょう。

ロゴを上手に作るポイント
  • 文字フォントをブログの雰囲気に合わせて選ぶ
  • 文字色をブログデザインに使っている色と合わせる
  • フォントに合わせて文字幅を調整する
  • サイト名が日本語の場合、助詞の文字サイズを小さくするとバランスがとりやすい

Canvaは1つのテキストの中で文字サイズを変えることができません。
助詞等の一部分のみの文字サイズを小さくしたい場合は、テキストを分けて作成しましょう。

イラストや装飾を入れなくても、フォントの凝ったロゴ画像にするだけでブログデザインレベルが一気に上がりますよ!

④ブログヘッダーの「イラスト部分(装飾)」を作る

転勤妻のおしごと事情

文字に加えて、イラスト(装飾)を入れるとよりオリジナル性の高いヘッダーロゴが完成します。

私の場合は、「フリーアイコン素材サイト」「Canvaの素材」を利用しました。

フリーアイコン素材をつかう

ブログロゴの場合、イラストよりもアイコンの方が使いやすくてオススメです。

私が利用したのは、フリーアイコン素材サイト「icon-rainbow」さん。

商用可の無料(フリー)のアイコン素材をダウンロードできるサイト『icon rainbow』 « カラフルな商用利用可能なアイコン素材を無料でダウンロード!! 商用可の無料(フリー)のアイコン素材をダウンロードできるサイト『icon rainbow』
商用利用可能な無料のアイコンをすぐにダウンロードできるアイコン素材配布サイトです。
「icon-rainbow」さんのオススメポイント
  • アイコンの種類が豊富
  • かわいい&おしゃれなアイコンが多い
  • アイコンのカラーを自由に変更できる(カラーコードによる指定OK)
  • 商用利用OK、クレジット標記不要

アイコンの色は、右に出てくるカラーピッカーで選ぶ他、16進数カラーコード(#000000)での指定もできます。

色指定後に「PNG」形式で保存し、Canvaで「アップロード」して使いましょう。

icon-rainbowカラー指定
みなみ
みなみ

私は、Cocoonで愛用中のスキン「Season(winter)」のカラーコードに合わせて色を選びました。

家のアイコンとトラックのアイコンを組み合わせて、「転勤族」をイメージしたつもりです。

【参考】Cocoon標準スキン全種の画面サンプルとカラーコード一覧(綾糸.net セカンド)

こちらの『ICOON MONO』さんもおすすめ!
アイコン素材ダウンロードサイト「icooon-mono」 | 商用利用可能なアイコン素材が無料(フリー)ダウンロードできるサイト | 6000個以上のアイコン素材を無料でダウンロードできるサイト ICOOON MONO
6000個以上のアイコン素材を無料でダウンロードできるサイト ICOOON MONO

Canvaの無料素材を使う

Canvaには、すぐに使える無料素材が用意されています。

線や図形はもちろん、手書き風のイラストや水彩画風のイラスト等、種類も豊富!

フリー素材サイトからダウンロードするよりもお手軽に利用できます。

みなみ
みなみ

私のロゴ下にある点線はCanvaの素材を利用しました!

画像が完成したらpng形式でダウンロード⇒圧縮

完成したら、Canva画面右上の「ダウンロード」ボタンから画像データをダウンロードします。
※「png」形式を推奨。

ダウンロード後は、オンライン圧縮ツールを用いて画像を圧縮しましょう。

私は普段のアイキャッチ画像もこちらのサイトで圧縮しています!
PNGイメージをオンラインで圧縮する
PNGイメージを透過付きPNG-8フォーマットにするPNG圧縮最適化ツール。

Cocoonでのヘッダーロゴ設定方法

WordPressにログイン後、
「Cocoon設定」「ヘッダー」タブを開きます。

「ヘッダーロゴ」で先ほどCanvaで作成して圧縮したロゴ画像を選択します。

「ヘッダーロゴサイズ」は空欄でも構いませんが、私はRetina(MacやiPhone等の高精細ディスプレイ)に対応するために画像の2分の1の高さ(100px)を指定しています。

「キャッチフレーズの配置」は「表示しない」を選択。
※キャッチフレーズを入れたい場合は、ロゴ画像自体にキャッチフレーズを入れて作成すると見栄えが良いです。

これだけで、ヘッダーロゴの設定完了です!

みなみ
みなみ

とっても簡単♪

ご使用中のスキンや設定の違いによって、表示サイズ等が変わるかもしれません。
パソコンとスマホで実際の表示を確認しながら微調整しましょう。

まとめ:初心者でも作成から設定まで15分でOK!

今回、Canvaでのブログのヘッダーロゴ画像の作り方についてご紹介しました。

でも「Canvaの操作にどうしても慣れない…」という方は、Microsoft「PowerPoint」を使っても大丈夫です。

画像のサイズにだけは注意して作成しましょう。

イラストや装飾を加えず、少しフォントに凝った文字画像に変えるだけでもブログトップが見違えますよ!

みなみ
みなみ

お気軽に挑戦してみてください♪

Canvaでブランドを構築して、魅力的なロゴを数分でデザインしましょう。今すぐ開始!
「ブログ運営」に関するオススメ記事

コメント

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