
ブログのヘッダーのタイトルロゴもう少しオシャレにできないかな?
ずっと初期設定のままじゃ初心者みたい!!
ブログ作りを始めると毎日の記事投稿に追われて、なかなかブログタイトルのカスタマイズができないまま過ぎていきますよね。

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

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

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

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


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

Cocoonはお好きなデザインテンプレートから選べるのでここはあなたのお好みで選んで下さい。
Cocoonのスキン選択方法
WordPressの管理画面(左サイドバーから)Cocoon設定⇒「スキン」タブを開く⇒ずっと下へスクロールお好みのスキンをチェック⇒「変更をまとめて保存」でスキンは選べます。
私は「白ウサギ」を選んでいます。

私はあまりデザインが得意じゃないのであなたのオリジナルの方がきっとオシャレに仕上がると思います。
それではヘッダーロゴをカスタマイズする流れを説明します。
①※Canvaでタイトルを作成。
②タイトルロゴの背景を透過させる。
③Cocoonにタイトルロゴを設定する。
※canvaとは無料で使えるデザインツールです。写真素材やテンプレも豊富にあります。
この流れでタイトルロゴを作っていきます。

なんか大変そう・・・

タイトルがいつまでもデフォルト(初期設定)のままだと初心者っぽさが抜けないから、いつかはやらないとね!
私は4ヶ月くらいデフォルトのまま過ごしました(^_^;)
みんなオシャレにタイトルロゴを作成していて「どうにかしなきゃ〜」っと焦っていました。
ここでは私の作成過程を公開しますのであなたのお役に立てれば嬉しいです♪
それではさっそくタイトルロゴを作っていきましょう!
⇓⇓⇓【無料30日間聴き放題!!】オーディオブックですきま時間が読書時間に♪⇓⇓⇓
オーディオブック聴き放題なら – audiobook.jp
Canvaでタイトルロゴを作成する手順

ブロガーにとっては有名なCanva(キャンバ)。ちなみにH2(小見出し)下の画像も全てCanvaで作成したものです。
無料で誰でもオシャレなデザインが作れます!
初めて使う方は「メールアドレス」や「Googleアカウント」「Facebookアカウント」で登録してから使いましょう。
まずは検索画面に「Canva」と入れてログインします。
⇓「Canva」のホーム画面の右上①「デザインを作成する」⇒②「カスタムサイズ」の+をクリックします。

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

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

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

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

⇑私は文字フォントを「桜鯰フォント」
文字色はテーマに合う藍色に変更し、文字も大きくしました。
次に何かロゴを入れていこうと思います。(ロゴを入れるとグッとオシャレに見えます)
⇓「Canva」の左サイドバーから①「素材」⇒②検索窓に「家」とここでは入れます⇒③気に入った家ロゴをクリック⇒④色を変更(タイトルと同じ藍色にしました)

⇓「Canva」で気に入ったロゴが無い場合は下記のサイトから探してみましょう!
私は副タイトルもあるので追加で文字を入力します。
⇓もう一度「Canva」の左サイドバー「タイトル」をクリック⇒「見出し」
出てきた「見出し」をドラッグして下へ移動。文字サイズをもっと小さく調整。

⇓副タイトルを入れるとこうなりました。(うずらフォントを選択しています)
次に葉のロゴも入れてみます。
「Canva」左サイドバーの①「素材」⇒②「植物」⇒③お好みのイラストを選ぶ。

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

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

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

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

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

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

Canvaでも背景透過はできますが30日間無料期間が過ぎると有料になってしまうのでここでは無料ツールを紹介します。
⇓検索窓に「remove.bg」と入れこのような画面を表示させます。(無料です)
先程「ダウンロード」したタイトルロゴをここへドラッグ&ドロップします。

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

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

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

ここまでできたらあとはもう少しです。
Cocoonにタイトルロゴを設定する方法

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

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

「ヘッダーレイアウト」はセンターロゴにしていますが、スリムや左寄せ等が人気のようです。
(タイトルロゴの大きさによって端に寄せるとグローバルメニューとのデザインが崩れることがあります)
高さは何も入力していません。
「ヘッダーロゴ」の「選択」をクリックして「メディアライブラリ」の先程の背景透過のロゴを選択します。
「キャッチフレーズ」は入れたらタイトルと被ったので「表示しない」にしています。
下の方も解説していきます。

①「ヘッダー背景画像」「選択」からお好みの画像も選べます。私は選んだテーマに最初から水色ストライプが入っているのでここは何もしていません)
②「ヘッダー全体色」ヘッダーの全体を一つの色にしたい時はここで選びます。(私は何も入れてません。選んだテーマの色のままです。)
③「ヘッダー色」ロゴエリアの部分だけ背景色を変更したい時はここで色を選びます。(私は何もいれてません)
④「グローバルナビメニュー」ホーム等のグローバルナビの部分だけ色を変更したい場合はここで色を選びます。(私は何もいれてません)
⑤「グローバルナビメニュー編」の「メニュー幅をテキストに合わせる」にチェックを入れておくとメニューが増えた時もキレイに自動的に配置してくれます。(たまにグローバルメニューの文字が2段になっている人はここのチェックが無い人です)
最後に「変更をまとめて保存」をクリックします。
⇓これでブログタイトルは完成しました。


やったー!!ブログタイトルが完成した!!
ブログタイトルの作り方−まとめ

ブログタイトルは一番最初に目に止まる場所なのでカスタマイズしたい場所ですよね。
今回Canvaでの作成手順や背景透過のremove.bgの使用方法を紹介しました。
使用方法を参考にあなたのタイトルロゴのカスタマイズを楽しんで下さい。

ちょっと時間がかかったけどこれでブログタイトルのロゴができた!!

お!!オシャレにできたね!
イメージと違う時はココナラ で依頼したり
Canva Pro で30日間無料お試しの間に作成するという方法もあります。
Canvaの使い方をもっと知りたい方はCanvaで年賀状作成手順も紹介しています。
>>>【2022年】canvaで年賀状を作ってみた!作成~印刷注文まで『手順図解入り』

ユーザーが一番最初に目に入るブログタイトル
初期設定から少しオシャレにカスタマイズできると
記事更新に専念できますね。

ブログ閲覧数が増えてくるとタイトルを変更してる最中も誰かが見に来てくれているのでタイトルロゴのサイズによっては形が大きく崩れる事があります。
何度も微調整してやっとタイトルロゴは完成するので閲覧数が少ない初期にカスタマイズする事をお勧めします。
ところで「グローバルメニュー」をオシャレにカスタマイズしたいと思いませんか?
Cocoonでは「FontAwesome」(フォントオウサム)というアイコンを簡単に入れられるように最初から設定されています。
使わないとむしろモッタイナイ!!
kさんち夫婦の「グローバルメニュー」のようにオリジナルのアイコンを入れたり2段にして英語を下に表示させたり解説手順をこまかく説明しています。
>>>グローバルメニューをアイコン付き2行にする方法【Font Awesome 6】Cocoon編