ブログのロゴを作ってみよう!作成からCocoonの設定方法までを解説

ブログのロゴの作り方 ブログ

こんにちは、ikuzo(いくぞう)です。

私がブログを始めて一番最初にやりたかったこと。それは、

カッコいいロゴを作りたい!でした。

 

ちなみに当ブログを始めたころは、こんなロゴでした…(^_^;)

ブログ開始時期のロゴ

 

先輩方は「ロゴなんてどうでもいいから、とりあえず100記事書け!」なんておっしゃいます。

たしかにそうなんですが、ロゴは「ブログの顔」なので作りたくなるんですよね(笑)

 

今回は無料のロゴ作成ツールを使って、イラスト入りのロゴを作る方法を解説します。

WordPressのテーマ「Cocoon」のヘッダーロゴの設定方法も書いておきますので、

初心者の方は参考にしていただけると幸いです。

スポンサーリンク

ロゴの作成

Cocoonで「ヘッダーロゴ」を設定していないと、サイトのタイトルがそのまま表示されます。

ヘッダーの画像設定なし

 

設定するとこんな感じになります。当サイト、早くも「3代目」のロゴですw

ヘッダーの画像設定あり
(その後さらに変更しました…)

 

センスある方は、もっともっと素敵なロゴが作れると思うので頑張って下さい!

 

では、ロゴを作っていきましょう。

今回使用するのは、プラウザ上でロゴが作れる

フリーフォントで簡単ロゴ作成というツールです。

「フリーフォントで簡単ロゴ作成」設定画面

 

「表示するテキスト」欄にブログ名(サイトのタイトル)を入れます。

「表示するテキスト」欄にブログ名を入れる

 

ロゴは大きめに作りましょう。

解像度2倍のRetinaディスプレイでも綺麗に見えるように、表示したい倍の大きさで作成することをおススメします。

「フリーフォントで簡単ロゴ作成」の設定

赤枠で囲った部分が、設定した箇所です。

フォント名」を変えたあとに「変更」を押してプレビューで確認します。

こんな感じで、まずはお気に入りのフォントを見つけて下さい。

サンプルから探すのもアリです。

ロゴをサンプルから探す

 

フォントの大きさによって「X・Y座標」の値と「幅・高さ」を調整して下さい。

「X座標」の値を大きくすれば右方向へ、「Y座標」を大きくすれば下方向へフォントが移動します。

なお、フォントによっては漢字がなかったり、「カナ・かな」や「英数」専用のものもあります。

テキスト色」はカラーコード表HTMLカラーコードで調べることができますよ。

 

今回は、あとでイラストを入れるつもりなので、右側に余白を設けました。

「フリーフォントで簡単ロゴ作成」でできたロゴ

 

また、ヘッダーの背景色をあとから変更できるように「透過PNG」にチェックを入れました。

(背景無色のロゴが出来上がります。)

 

プレビューの下の方には、ロゴに枠線をつける機能もあります。

ロゴに枠線をつける機能

裏ワザとして、ロゴと同色の「枠」をつければ、ロゴが少し太くなります。

 

最後に「ダウンロード」を押して、ロゴは完成です。

(イラストが不要な方は、これで作成はおしまいです。)

もっとおしゃれなロゴを作りたいという方は、ココナラでデザイナーの方にお願いするという手もあります。(ロゴは4,000円~)
ココナラのトップページ > デザイン > ロゴ作成・デザインで探してみて下さい。

「ココナラ」トップページ出典:ココナラ

「PhotoScape X」でイラストの編集

次に、ロゴの横に入れるイラストを作成します。

作成といっても、無料で使えるイラストを「イラストAC」で探して、それを少し編集するだけです。

今回は、Tossanさんという方が作った、こちらのイラストを使わせていただくことにしました。

「イラストAC」で画像を選択

 

使用するのは「PhotoScape X」という無料アプリです。

「PhotoScape X」インストール

 

「PhotoScape X」を使って、

イラストの線をロゴと同じ「白」にして、線以外は透過させます

 PhotoScape Xの基本的な使い方はこちら

【PhotoScape X】の基本的な使い方

イラストの白と黒を逆転させる

PhotoScape Xを起動させたら「写真編集」を選択して、さきほどのイラストをドラッグ&ドロップします。

「PhotoScape X」へイラストをドラッグ

 

編集画面で「ネガ」のボタンを押して白と黒を逆転させます。

「PhotoScape X」でネガのボタンを押す

 

白と黒が逆転しました。好みの問題ですが、続いてイラストを左右反転にします。

「PhotoScape X」で水平方向に反転

 

これをいったん保存しましょう。

イラストをいったん保存

イラストの黒い部分を透過させる

今度は、イラストの白い線以外を透過させます。

「カットアウト」を選択して、白黒逆転させたイラストを再びドラッグ&ドロップします。

白黒逆転したイラストをドラッグ&ドロップ

 

「マジック消しゴム」を選び、顔の黒い部分に十字カーソルを当ててクリックします。

顔の黒い部分に+マークを当ててクリックする
(わかりやすいように背景色を変えました)

 

するとクリックした部分の色が変わって、背景と同じく「透過」したことが分かります。

顔の黒い部分が透過した

 

同じように色のついた部分をすべて透過させたら完成です。簡単ですね。

色のついた部分をすべて透過させる

ロゴとイラストを合体させる

では、できあがったロゴとイラストを合成させましょう。

「写真編集」を押して、最初にロゴをドラッグ&ドロップします。

「写真編集」の画面にロゴをドラッグ&ドロップ

 

これではロゴの範囲か分からないので「枠線」を表示させます。

そして、右上にある「挿入」→「イメージ」から編集したイラストを選択して、挿入します。

(もしくは「挿入」を押してから、イラストを画面にドラッグ&ドロップして下さい。)

画面に枠線を表示させた

 

イラストの4隅の「〇」で大きさを変更、イラストをドラッグして位置を調整します。

イラストの大きさと位置を調整する

 

今回は必要ありませんが、余白が多すぎたら不要な部分を「切り抜く」こともできます。

ロゴの不要部分を切り抜く
失敗しても下に「取り消し」や「復帰」のボタンがあるので、どんどんやってみましょう。

 

これでイラスト入りのロゴが完成しました
( ´∀`)b

完成したイラスト入りのロゴ

Cocoon ヘッダーロゴの設定

出来上がったロゴを、Cocoonのヘッダーに設定してみましょう。

WordPressのダッシュボードにある「Cocoon設定」をクリックします。

Cocoon設定

 

「ヘッダー」タブを押します。

「ヘッダー」タブを押す

 

以下「ヘッダー設定」です。

ヘッダー及びヘッダーロゴの設定

ヘッダーレイアウト

レイアウトは8種類ありますので、「プレビュー画面」で確認して気に入ったものを選んで下さい。

ヘッダーの固定

ヘッダーが追従(画面に出たまま)するかどうかです。

こちらはPCのみの設定で、ヘッダーモバイルの設定方法については近日中に記事にするつもりです。

 記事にしました!

【Cocoon】ヘッダーモバイルボタン(スマホメニュー)をカスタマイズ

高さ

必要があればヘッダーの高さを指定します。

ヘッダーロゴ

ここです!ここにさきほど作ったロゴを設定して下さい。

「選択」→作成したロゴをドロップ→代替テキストに「ロゴ」などと入力→「画像の選択」を押します。

 

ヘッダー設定の続き

ヘッダーロゴサイズ

実際に表示させるロゴの大きさを、ここで調整します。

「幅」か「高さ」のどちらかを決めれば、もう片方は比率を保持して表示されます。

ヘッダー背景画像

ヘッダーに写真などの画像を使う場合は、ここで画像を選択します。

ヘッダー全体色など

ヘッダーやグローバルナビメニューの色を指定します。

何も指定しなければ背景は「キーカラー」が表示されるようです。

最後に

おつかれさまでした。

今回行ったイラストの透過処理は、通常の「PhotoScape」ではできないので、初めて「PhotoScape X」を使ってみました。

機能が通常版よりも多いみたいなので、これを機会に使っていきたいと思います。

また便利な使い方を覚えたら紹介しますね。

 

というわけで今回は、ロゴを変更するついでに「ロゴの作り方」を記事にしてみました。

少しでもお役に立てていたら幸いです。最後まで読んでいただき、ありがとうございました。

コメント