こんにちは、ikuzo(いくぞう)です。
私がブログを始めて一番最初にやりたかったこと。それは、
カッコいいロゴを作りたい！でした。
ちなみに当ブログを始めたころは、こんなロゴでした…(^_^;)
先輩方は「ロゴなんてどうでもいいから、とりあえず100記事書け！」なんておっしゃいます。
たしかにそうなんですが、ロゴは「ブログの顔」なので作りたくなるんですよね（笑）
今回は無料のロゴ作成ツールを使って、イラスト入りのロゴを作る方法を解説します。
WordPressのテーマ「Cocoon」のヘッダーロゴの設定方法も書いておきますので、
初心者の方は参考にしていただけると幸いです。
ブログのロゴの作成
Cocoonで「ヘッダーロゴ」を設定していないと、サイトのタイトルがそのまま表示されます。
設定するとこんな感じになります。当サイト、早くも「3代目」のロゴですw
（その後さらに変更しました…）
センスある方は、もっともっと素敵なロゴが作れると思うので頑張って下さい！
では、ロゴを作っていきましょう。
今回使用するのは、プラウザ上でロゴが作れる
フリーフォントで簡単ロゴ作成というツールです。
「表示するテキスト」欄にブログ名（サイトのタイトル）を入れます。
ロゴは大きめに作りましょう。
解像度2倍のRetinaディスプレイでも綺麗に見えるように、表示したい倍の大きさで作成することをおススメします。
赤枠で囲った部分が、設定した箇所です。
「フォント名」を変えたあとに「変更」を押してプレビューで確認します。
こんな感じで、まずはお気に入りのフォントを見つけて下さい。
サンプルから探すのもアリです。
フォントの大きさによって「X・Y座標」の値と「幅・高さ」を調整して下さい。
「X座標」の値を大きくすれば右方向へ、「Y座標」を大きくすれば下方向へフォントが移動します。
なお、フォントによっては漢字がなかったり、「カナ・かな」や「英数」専用のものもあります。
「テキスト色」はカラーコード表かHTMLカラーコードで調べることができますよ。
今回は、あとでイラストを入れるつもりなので、右側に余白を設けました。
また、ヘッダーの背景色をあとから変更できるように「透過PNG」にチェックを入れました。
（背景無色のロゴが出来上がります。）
プレビューの下の方には、ロゴに枠線をつける機能もあります。
裏ワザとして、ロゴと同色の「枠」をつければ、ロゴが少し太くなります。
最後に「ダウンロード」を押して、ロゴは完成です。
（イラストが不要な方は、これで作成はおしまいです。）
でデザイナーの方にお願いするという手もあります。（ロゴは4,000円～）ココナラのトップページ
> デザイン > ロゴ作成・デザインで探してみて下さい。
出典:ココナラ
「PhotoScape X」でイラストの編集
次に、ロゴの横に入れるイラストを作成します。
作成といっても、無料で使えるイラストを「イラストAC」で探して、それを少し編集するだけです。
今回は、Tossanさんという方が作った、こちらのイラストを使わせていただくことにしました。
使用するのは「PhotoScape X」という無料アプリです。
「PhotoScape X」を使って、
イラストの線をロゴと同じ「白」にして、線以外は透過させます。
PhotoScape Xの基本的な使い方
イラストの白と黒を逆転させる
PhotoScape Xを起動させたら「写真編集」を選択して、さきほどのイラストをドラッグ＆ドロップします。
編集画面で「ネガ」のボタンを押して白と黒を逆転させます。
白と黒が逆転しました。好みの問題ですが、続いてイラストを左右反転にします。
これをいったん保存しましょう。
イラストの黒い部分を透過させる
今度は、イラストの白い線以外を透過させます。
「カットアウト」を選択して、白黒逆転させたイラストを再びドラッグ＆ドロップします。
「マジック消しゴム」を選び、顔の黒い部分に十字カーソルを当ててクリックします。
（わかりやすいように背景色を変えました）
するとクリックした部分の色が変わって、背景と同じく「透過」したことが分かります。
同じように色のついた部分をすべて透過させたら完成です。簡単ですね。
ロゴとイラストを合体させる
では、できあがったロゴとイラストを合成させましょう。
「写真編集」を押して、最初にロゴをドラッグ＆ドロップします。
これではロゴの範囲か分からないので「枠線」を表示させます。
そして、右上にある「挿入」→「イメージ」から編集したイラストを選択して、挿入します。
（もしくは「挿入」を押してから、イラストを画面にドラッグ&ドロップして下さい。）
イラストの4隅の「〇」で大きさを変更、イラストをドラッグして位置を調整します。
今回は必要ありませんが、余白が多すぎたら不要な部分を「切り抜く」こともできます。
失敗しても下に「取り消し」や「復帰」のボタンがあるので、どんどんやってみましょう。
これでイラスト入りのロゴが完成しました
( ´∀｀)b
Cocoon ヘッダーロゴの設定方法
出来上がったロゴを、Cocoonのヘッダーに設定してみましょう。
WordPressのダッシュボードにある「Cocoon設定」をクリックします。
「ヘッダー」タブを押します。
以下「ヘッダー設定」です。
ヘッダーレイアウト
レイアウトは8種類ありますので、「プレビュー画面」で確認して気に入ったものを選んで下さい。
ヘッダーの固定
ヘッダーが追従（画面に出たまま）するかどうかです。
こちらはPCのみの設定で、ヘッダーモバイルの設定方法については近日中に記事にするつもりです。
記事にしました！
高さ
必要があればヘッダーの高さを指定します。
ヘッダーロゴ
ここです！ここにさきほど作ったロゴを設定して下さい。
「選択」→作成したロゴをドロップ→代替テキストに「ロゴ」などと入力→「画像の選択」を押します。
ヘッダーロゴサイズ
実際に表示させるロゴの大きさを、ここで調整します。
「幅」か「高さ」のどちらかを決めれば、もう片方は比率を保持して表示されます。
ヘッダー背景画像
ヘッダーに写真などの画像を使う場合は、ここで画像を選択します。
ヘッダー全体色など
ヘッダーやグローバルナビメニューの色を指定します。
何も指定しなければ背景は「キーカラー」が表示されるようです。
最後に
おつかれさまでした。
今回行ったイラストの透過処理は、通常の「PhotoScape」ではできないので、初めて「PhotoScape X」を使ってみました。
機能が通常版よりも多いみたいなので、これを機会に使っていきたいと思います。
また便利な使い方を覚えたら紹介しますね。
というわけで今回は、ロゴを変更するついでに「ロゴの作り方」を記事にしてみました。
少しでもお役に立てていたら幸いです。最後まで読んでいただき、ありがとうございました。
コメント
ロゴの作成方法から設定までわかりやすくて、自分でも簡単にロゴを作れました！ありがとうございます。
どんとさん、うれしいコメントありがとうございます！
簡単にロゴが作れないか悩んでいたところ、ikuzoblogさんを発見しました！
わかりやすい解説で、ロゴを作ることができました！
有用な記事をありがとうございます╰(*°▽°*)╯
ヒロセさん、コメントありがとうございます！
サイトのロゴ拝見しました。
いい感じに仕上がりましたね。
お役に立てて何よりです( ´∀｀)b
今までブログの見た目はまったくカスタマイズできずにいたので、大変参考になりました！
ロゴづくりとボックスメニューの記事を実践しました。ありがとうございます！！
よこじかさん、コメントありがとうございます！
よこじかさんのサイト拝見しました。
少しでもお役に立てて嬉しいです！