MENU

プロフィール

カワテ タカヒト

WordPressと店舗型ビジネスへの集客施策が得意なフリーランス☆27歳で起業→ウェブ制作会社→美容系サービス業を経て48歳で2度目のフリーランスに。山梨県南アルプス市在住。

山梨WordPressmeetup

山梨WordPress meetupを毎月開催しています。ご参加をお待ちしております!

[ Canva ] 無料でWordPress用タイトルロゴを作る方法

タイトルロゴはブログの印象を決める大切なシンボルです。

ロゴ作成には「プロが使う専用のソフトが必要なんでしょう?」と思われがちですが、じつは無料ソフトで簡単に作れてしまいます。

そこで今回は無料ソフト「Canva [x_icon type=”link”]」を使い、WordPress用のタイトルロゴを作る手順をご紹介します。
参考にしていただければ幸いです。

1.Canvaへの無料登録

Canvaを利用するには無料のユーザー登録が必要です。
ユーザー登録の方法については以下のブログで紹介しています。特に難しい設定はありませんので数分で完了します。

[関連記事] 無料ツールCanvaならデザインチラシが10分で完成!

無料ツールCanvaの使い方16

2.キャンバス設定

ユーザー登録が済みましたらログインします。

ログインします

右上の「画像サイズを指定 (カスタムサイズ)」を選択します。

右上の「画像サイズを指定 (カスタムサイズ)」を選択

ロゴのサイズを決めます。 左から500、180、pxと入力し「デザインする」を選択します。pxとは「ピクセル」の略でディスプレイ上での長さの単位です。今回のロゴは横幅500ピクセル、縦幅180ピクセルで作成します。

横500px、縦180pxと入力し「デザインする」を選択

これで新しいキャンパスが作成されました。ここにタイトルをデザインしていきます。

新しいキャンパスが作成されました。
[x_icon type=”warning”] 操作画面が異なる場合

Canvaをはじめて利用する際には設定画面が多少異なる場合がありますが手順は一緒です。

Canvaをはじめて利用する際には多少設定画面が異なりますが、手順は一緒です

3.タイトル文字入力

テキスト」を選択し「見出しを追加」をキャンパス上にドラッグ&ドロップします。

メニュー「テキスト」を選択し、「見出しを追加」をキャンパスにドラッグ&ドロップします

「見出しを追加」の文字をクリックすると見出しが変更できます。

今回は「わたしのぶろぐ」としました。

タイトル文字を入力します

色を変更してみましょう。
カラーアイコンをクリックするとカラーパレットが表示されます。

メニューバーのアイコンを選択するとカラーパレットが表示されます

+ボタン」をクリックするとカラーパレットから好きな色を選択できるようになります。

「+ボタン」で好きな色を選択できます

「デフォルトパレット」からもカラーを選べます。

「デフォルトパレット」からもカラーを選択できます

フォントの変更は左隅のプルダウンメニューから。

フォントは上部プルダウンメニューから変更できます

文字を太くしたいときには「B」をクリックします。

文字を太くしたいときには「B」を選択

文字間隔、行間も自由に調整できます。

文字間隔、行間も調整できます

4.無料のイラストを挿入する

文字だけでは少し寂しいですね。
タイトルにイラストを挿入してみましょう。

文字だけは寂しいのでロゴにイラストを挿入してみましょう

メニューより「素材」→「イラスト」を選択します。

メニューより「素材」→「イラスト」を選択

イラスト一覧が表示されます。「無料」の文字があるイラストは自由に利用することができます。イラストを選びテキストの上へドラッグ&ドロップします。

好きなイラストをテキストの上へドラッグ&ドロップします

角の○印をカーソルで掴んで移動させることでサイズを調整できます。

角の○印にカーソルを合わせてサイズを調整します

イラストが配置されました。

イラストが配置されました

イラストやアイコンはカラーメニューより色を変更することもできます。

上部カラーメニューより色を変更してロゴと揃えることもできます

5.素材集からアイコンを取得する

Canvaに自分好みのイラストやアイコンがない場合には外部素材サイトよりダウンロードしてCanvaに配置することもできます。

無料アイコン配布サイト ICOOON MONO [x_icon type=”link”] さんへアクセスします。

無料でアイコンがダウンロードできるICOOON MONOさんへアクセスします

検索窓に欲しい素材のキーワードを入力します。今回は鉛筆のアイコンが欲しいので「えんぴつ」と入力。

検索窓に欲しい素材名を入力します

気に入った素材が見つかったらアイコンをクリックします。

気に入ったアイコンが見つかったらクリック

ダンロード画面が開きます。
Canvaのロゴテキストと同じ色に変更してからダウンロードします。

ダンロード画面が開きます。 色がグレーですので、ロゴと同色に変更してからダウンロードします

一度Canvaに戻り、ロゴ色を確認します。 タイトルをクリックカラーを選択します。

一度Canvaに戻り、ロゴの色を確認します。 テキストをクリック →カラーを選択

+ボタンを押し、パレットの下に表示されるカラーコードをコピーします。

カラーコードをコピーします

ICOOON MONOへ戻りcolor欄に先ほどコピーしたカラーコードを貼り付けます。

ICOOON MONOへ戻り「color」に先ほどコピーしたカラーコードをペーストします

ロゴと同色に変更されました。

ロゴと同色に変更されました

サイズで「256px」を選択し「PNG」をクリック。

サイズで「256px」を選択し「PNG」をクリック

パソコンにアイコンがダウンロードされました。

パソコンにアイコンがダウンロードされました

ダウンロードしたアイコン画像をCanva上にドラッグ&ドロップします。

Canva上にダウンロードしたアイコン画像をドラッグ&ドロップします

画像がアップロードされます。

画像がアップロードされます

アップロードされた画像をテキストの上へ再度ドラッグ&ドロップします。

アップロードされた画像をテキストの上へドラッグ&ドロップします

角の○印を掴んでサイズを調整します。

角の○印を掴んでサイズを調整します

ロゴの完成です!

ロゴの完成です

6.作成したアイコンをダウンロード

完成したタイトルロゴを画像としてダウンロードします。 画面右上の「ダウンロード」を選択。

完成したロゴを画像としてダウンロードします。 画面右上の「ダウンロード」を選択

ファイルの種類「PNG(推奨)」を選択し「ダウンロード」ボタンを選択します。

ファイルの種類「PNG(推奨)」を選択し「ダウンロード」ボタンを選択

画像がPNG形式で保存されました。

パソコンにロゴ画像がPNG形式で保存されました

ファイル名が日本語の場合には英語に変更しておきます。

ファイル名が日本語の場合には英語に変更しておきます

7.WordPressでロゴを設定

作成したタイトルロゴをWordPressに配置しましょう。
WordPress「外観」→「カスタマイズ」→「サイト基本情報」の順に選択します。

WordPress「外観」→「カスタマイズ」→「サイト基本情報」を選択

Logo Setup」より「ロゴを選択」をクリックします。

ロゴを選択

画像選択画面が開きます。「ファイルをアップロード」よりICOOON MONOからダウンロードしたアイコン画像を選択しアップロードします。

アップロードされた画像の「代替えテキスト」にサイト名+ロゴマークと記入し「選択」をクリックします。

「代替えテキスト」にサイト名+ロゴマークと記入し「選択」をクリック

画像切り抜き画面が開きます。ここでは画像の余計なスペースを削除することができます。

タイトルロゴはCanvaで横幅500pxで作りました。今回は横幅500pxで使いたいので、 選択範囲両隅の「□」マークを幅いっぱいまで広げて「画像切り抜き」を選択します。

選択範囲両隅の「□」マークを幅いっぱいまで広げて「画像切り抜き」を選択

Width」を250 (500pxの半分のサイズ)に指定します。

「Width」値を250 (500pxの半分のサイズ)に指定します

公開」を選択して確定します。

「公開」を選択して確定します。 画像42 ブログにロゴが反映されました

ブログにタイトルロゴが反映されました。

ブログにロゴが反映されました
なぜ半分のサイズに指定?
MacやiPohoneに使われている高画質ディスプレイ「Retina」では、表示サイズの2倍の大きさで画像を作成するとぼやけず綺麗に表示させることができます。幅を300pxで表示させたい場合には600px、400pxなら800pxで作成するとMacやiPhoneでも綺麗に表示されます。

8.まとめ

イラスト入りのロゴマークがあるだけでブログページも引き締まって見えますね。 ぜひ、ご自身のセンスでロゴマークの作成にチャレンジしてください。

この記事が皆様のお役に立てれば幸いです。
では、また次回のブログでお会いしましょう。