【背景を透過】ブログタイトルロゴの作り方−手順公開（Cocoon編）

ブログのヘッダーのタイトルロゴもう少しオシャレにできないかな？
ずっと初期設定のままじゃ初心者みたい！！

　ブログ作りを始めると毎日の記事投稿に追われて、なかなかブログタイトルのカスタマイズができないまま過ぎていきますよね。

Kつま

ここではデフォルト（初期状態）からカスタマイズした状態にタイトルを変更する方法を解説していきます。

この記事はこの様な方にオススメ

WordPressでブログを始めたばかり。【Cocoon利用者】
ブログタイトルを簡単にカスタマイズしたい。
図解入りで詳しく説明してほしい。

Kつま

今回は私のブログタイトル作成手順を例に解説していきますが
これをベースにあなたのオリジナルのタイトルロゴが作れます！

　このような初期状態のタイトルが⇓

　このようにタイトルをカスタマイズしました⇓

スマホ画面から見るとこのような感じです⇓

私のはｋつまさんみたいに水色ストライプのタイトル背景じゃないよ？

Kつま

Cocoonはお好きなデザインテンプレートから選べるのでここはあなたのお好みで選んで下さい。

Cocoonのスキン選択方法

WordPressの管理画面（左サイドバーから）Cocoon設定⇒「スキン」タブを開く⇒ずっと下へスクロールお好みのスキンをチェック⇒「変更をまとめて保存」でスキンは選べます。

私は「白ウサギ」を選んでいます。

Kつま

　私はあまりデザインが得意じゃないのであなたのオリジナルの方がきっとオシャレに仕上がると思います。

それではヘッダーロゴをカスタマイズする流れを説明します。

①※Canvaでタイトルを作成。

②タイトルロゴの背景を透過させる。

③Cocoonにタイトルロゴを設定する。

※canvaとは無料で使えるデザインツールです。写真素材やテンプレも豊富にあります。

　

この流れでタイトルロゴを作っていきます。

なんか大変そう・・・

Kつま

タイトルがいつまでもデフォルト（初期設定）のままだと初心者っぽさが抜けないから、いつかはやらないとね！

私は４ヶ月くらいデフォルトのまま過ごしました(^_^;)
みんなオシャレにタイトルロゴを作成していて「どうにかしなきゃ〜」っと焦っていました。

ここでは私の作成過程を公開しますのであなたのお役に立てれば嬉しいです♪

　それではさっそくタイトルロゴを作っていきましょう！

Canvaでタイトルロゴを作成する手順
タイトルロゴの背景を透過させる方法
Cocoonにタイトルロゴを設定する方法
ブログタイトルの作り方−まとめ

Canvaでタイトルロゴを作成する手順

ブロガーにとっては有名なCanva（キャンバ）。ちなみにH2（小見出し）下の画像も全てCanvaで作成したものです。

無料で誰でもオシャレなデザインが作れます！
初めて使う方は「メールアドレス」や「Googleアカウント」「Facebookアカウント」で登録してから使いましょう。

まずは検索画面に「Canva」と入れてログインします。

　⇓「Canva」のホーム画面の右上①「デザインを作成する」⇒②「カスタムサイズ」の＋をクリックします。

　⇓このような画面になりますのでロゴサイズを入力します。（私は幅８００PX・高さ２００PXにしました。）
今回作るタイトルロゴの背景は透過させるのであまり大きいサイズで作らなくても大丈夫です。
数字を入力したら「新しいデザインを作成」をクリックします。

　⇓このような画面になりますので左サイドバーにある①「テキスト」⇒②「見出しを追加」をクリックします。

　⇓するとこのような画面になりますので「見出しを追加」にカーソルを合わせてあなたのブログタイトルを入力します。

　⇓ブログタイトルを入力して文字フォントや文字色を変更しましょう。
ブログタイトルのそばに○があるのでそれをドラッグすると文字サイズも変更できます。

⇑私は文字フォントを「桜鯰フォント」　
文字色はテーマに合う藍色に変更し、文字も大きくしました。

次に何かロゴを入れていこうと思います。（ロゴを入れるとグッとオシャレに見えます）

⇓「Canva」の左サイドバーから①「素材」⇒②検索窓に「家」とここでは入れます⇒③気に入った家ロゴをクリック⇒④色を変更（タイトルと同じ藍色にしました）

⇓「Canva」で気に入ったロゴが無い場合は下記のサイトから探してみましょう！

オススメの無料ロゴサイト

私は副タイトルもあるので追加で文字を入力します。
⇓もう一度「Canva」の左サイドバー「タイトル」をクリック⇒「見出し」

出てきた「見出し」をドラッグして下へ移動。文字サイズをもっと小さく調整。

⇓副タイトルを入れるとこうなりました。（うずらフォントを選択しています）
次に葉のロゴも入れてみます。

「Canva」左サイドバーの①「素材」⇒②「植物」⇒③お好みのイラストを選ぶ。

⇓真ん中に選んだイラストが表示されるのでお好きな位置にドラッグ。色や傾き大きさを変更します。

⇓タイトルロゴが完成したら右上の「ダウンロード」をクリックします。

　⇓このような画面になりますので「PNG」のままで「ダウンロード」をクリックします。※PNGは画像が綺麗でデーター量も軽いのでお勧めです。

　

このままの「タイトルロゴ」をWordPressのメディアライブラリに入れると
ロゴの背景が白くかっこ悪いデザインになります。（薄い水色ストライプなので分かりづらいですが濃い色の背景色の場合は目立ちます）

では次にタイトルロゴの背景を透過させます。

これから紹介するツールは無料ですがCanva Pro の３０日間無料お試しにも背景を透過させる機能がついています。すべての素材が使い放題なのでCanva Pro もお勧めです。タイトルを作り終わってから３０日以内に解約すれば無料でクオリティの高いタイトルロゴが無料で作れます。

今回は別なツールで背景を透過させる手順を紹介します。

タイトルロゴの背景を透過させる方法

　いくつか背景を透過させるツールはあるのですがここではとっても簡単に透過ができるツールを紹介します。

Kつま

Canvaでも背景透過はできますが３０日間無料期間が過ぎると有料になってしまうのでここでは無料ツールを紹介します。

　⇓検索窓に「remove.bg」と入れこのような画面を表示させます。（無料です）
先程「ダウンロード」したタイトルロゴをここへドラッグ＆ドロップします。

⇓これでタイトルロゴの背景透過がされているので「ダウンロード」をクリックします。灰色と白の四角の模様が透明になっている事を表しています。

次に「ダウンロード」したタイトルロゴ（背景透過）をWordPressの「メディアライブラリ」へ入れます。

まだタイトルロゴは入れられないの？

Kつま

ここまでできたらあとはもう少しです。

Cocoonにタイトルロゴを設定する方法

⇓それではWordPress管理画面左サイドバーの「Cocoon設定」の「ヘッダー」タブを開きます。

⇓私は下記のように入れています。

「ヘッダーレイアウト」はセンターロゴにしていますが、スリムや左寄せ等が人気のようです。

（タイトルロゴの大きさによって端に寄せるとグローバルメニューとのデザインが崩れることがあります）

高さは何も入力していません。

「ヘッダーロゴ」の「選択」をクリックして「メディアライブラリ」の先程の背景透過のロゴを選択します。

「キャッチフレーズ」は入れたらタイトルと被ったので「表示しない」にしています。

　下の方も解説していきます。

　
①「ヘッダー背景画像」「選択」からお好みの画像も選べます。私は選んだテーマに最初から水色ストライプが入っているのでここは何もしていません）

②「ヘッダー全体色」ヘッダーの全体を一つの色にしたい時はここで選びます。（私は何も入れてません。選んだテーマの色のままです。）

③「ヘッダー色」ロゴエリアの部分だけ背景色を変更したい時はここで色を選びます。（私は何もいれてません）

④「グローバルナビメニュー」ホーム等のグローバルナビの部分だけ色を変更したい場合はここで色を選びます。（私は何もいれてません）

⑤「グローバルナビメニュー編」の「メニュー幅をテキストに合わせる」にチェックを入れておくとメニューが増えた時もキレイに自動的に配置してくれます。（たまにグローバルメニューの文字が２段になっている人はここのチェックが無い人です）

　
最後に「変更をまとめて保存」をクリックします。