こんにちは、ikuzo(いくぞう)です。
私がブログを始めて一番最初にやりたかったこと。それは、
カッコいいロゴを作りたい!でした。
ちなみに当ブログを始めたころは、こんなロゴでした…(^_^;)
先輩方は「ロゴなんてどうでもいいから、とりあえず100記事書け!」なんておっしゃいます。
たしかにそうなんですが、ロゴは「ブログの顔」なので作りたくなるんですよね(笑)
今回は無料のロゴ作成ツールを使って、イラスト入りのロゴを作る方法を解説します。
WordPressのテーマ「Cocoon」のヘッダーロゴの設定方法も書いておきますので、
初心者の方は参考にしていただけると幸いです。
ブログのロゴの作成
Cocoonで「ヘッダーロゴ」を設定していないと、サイトのタイトルがそのまま表示されます。
設定するとこんな感じになります。当サイト、早くも「3代目」のロゴですw
(その後さらに変更しました…)
センスある方は、もっともっと素敵なロゴが作れると思うので頑張って下さい!
では、ロゴを作っていきましょう。
今回使用するのは、プラウザ上でロゴが作れる
フリーフォントで簡単ロゴ作成というツールです。

「表示するテキスト」欄にブログ名(サイトのタイトル)を入れます。
ロゴは大きめに作りましょう。
解像度2倍のRetinaディスプレイでも綺麗に見えるように、表示したい倍の大きさで作成することをおススメします。
赤枠で囲った部分が、設定した箇所です。
「フォント名」を変えたあとに「変更」を押してプレビューで確認します。
こんな感じで、まずはお気に入りのフォントを見つけて下さい。
サンプルから探すのもアリです。
フォントの大きさによって「X・Y座標」の値と「幅・高さ」を調整して下さい。
「X座標」の値を大きくすれば右方向へ、「Y座標」を大きくすれば下方向へフォントが移動します。
なお、フォントによっては漢字がなかったり、「カナ・かな」や「英数」専用のものもあります。
「テキスト色」はカラーコード表かHTMLカラーコードで調べることができますよ。
今回は、あとでイラストを入れるつもりなので、右側に余白を設けました。
また、ヘッダーの背景色をあとから変更できるように「透過PNG」にチェックを入れました。
(背景無色のロゴが出来上がります。)
プレビューの下の方には、ロゴに枠線をつける機能もあります。
裏ワザとして、ロゴと同色の「枠」をつければ、ロゴが少し太くなります。
最後に「ダウンロード」を押して、ロゴは完成です。
(イラストが不要な方は、これで作成はおしまいです。)

ココナラのトップページ

出典:ココナラ
「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
今までブログの見た目はまったくカスタマイズできずにいたので、大変参考になりました!
ロゴづくりとボックスメニューの記事を実践しました。ありがとうございます!!
よこじかさん、コメントありがとうございます!
よこじかさんのサイト拝見しました。
少しでもお役に立てて嬉しいです!