ブログ初心者がCanvaを使ってヘッダー画像を作成してみた。

ブログデザイン

どうも、taigaです。

昨日に引き続きブログデザインの変更をします。

今日はヘッダーの編集です。

というのも、今のヘッダーがこんな感じで、

  • ヘッダー画像のサイズに対してブログタイトルの文字が小さい。
  • そもそもフォントがダサい。
  • 画像をクリックしただけではトップページに飛ばない。(文字のみ判定がある)

という問題点があります。

ので、今日はこれをまとめて改善します!

 

Canvaでヘッダー画像を作成する。

ワードプレス内の設定では文字を好き勝手編集できないので、自分で文字入りの画像を作成します。

画像の作成なんて難しい!

そう考える人も多いと思いますが、Canvaを使うと超簡単に作れちゃいます!

Attention Required! | Cloudflare

無料でもたくさんの機能が使えるので、おすすめです。

taiga
taiga

ちなみに僕も無料で作りました。

 

Canvaの使い方。

まず、Canvaに登録します

使用する際に登録は必須になります。好きなアカウントで登録してください。

 

ログインしたら、右上に表示されている「デザインを作成」→「カスタムサイズ」を選択します。

 

続いて、カスタマイズサイズを設定します。

サイズはお好みで大丈夫ですが、迷ったら1300×300にしてください。

「新しいデザインを作成」を押すと、実際の作業画面に移ります。

 

左側のメニューから「アップロード」を選択し、画像をアップロードします。

 

画像をアップロードしたら、ドラッグや拡大をして画像サイズや位置を調整します。

ヘッダーにはこのまま表示されるので、表示したい位置を設定してください。

 

左側のメニューから「テキスト」を選択し、好きなフォントを選択します。

無料でもたくさんのフォントが使えるので、気に入ったフォントが見つかると思います!

 

好きな文字を入力したら、文字の表示位置やサイズを調整します。

 

完成したら、右上のダウンロードをクリックして、ダウンロードをしてください。

ファイル形式はPNGのままでもWordPressにアップロードできるので、変更しなくて大丈夫です!

 

完成。

出来上がったヘッダー画像がこれです。

イメージしてた雑誌や映画っぽいヘッダーになったので個人的に大満足です。

 

ヘッダーの設定。

続いて、WordPressの設定に移ります。

ダッシュボードの「cocoon設定」→「ヘッダー」を選択します。

 

「ヘッダーロゴ」に先ほど作成した画像をアップロードします。

ヘッダーロゴに設定することで、画像のどこをクリックしてもトップページに飛べるようになります!

「ヘッダー背景画像」に画像がある場合は画像がダブって表示されちゃうので、クリアを選択してください!

 

途中経過。

このまま表示をすると、以下のように画像の上下に余白ができてしまいます。

残念ながら、この余白は画像サイズの高さを変更しても修正できません。

taiga
taiga

元画像の高さを変えて作成しても、WordPress内で設定してもダメでした…。

なので、余白を背景と同系色に変更して目立たないようにしていきます。

 

余白の色の修正。

先ほど同様にダッシュボードの「cocoon設定」から「ヘッダー」を選択します。

 

「ヘッダー全体色」の項目で、「ヘッダー全体背景色」にカラーコードを入力します。

僕のテーマだと余白の下の色のカラーコードが「#f4f5f7」ですので、そのコードを入力します。

これを行うと余白が同系色になり、ヘッダーは完成です。

 

完成。

出来上がったヘッダーがこちら。

問題だった余白も完全に目立たなくなりました。

 

フッターの修正。

ヘッダーロゴを設定すると、フッターにもヘッダーロゴ画像が表示されてしまいます。

ここに画像を表示されるとかっこ悪いので、表示を消すことにします。

 

ダッシュボードの「cocoon設定」→「フッター」を選択します。

 

「フッター表示タイプ」の項目で、「メニュー&クレジット」を選択します。

これで、フッターの修正も完了です!

 

完成!

完成したブログが以下になります!

ヘッダーは余白も綺麗になり、

フッターからは画像の表示もなくなりました。

 

これでやりたいことがひと段落したので、ブログデザイン編集は終わりにしようと思います。

デザインに凝り出すとデザインばっか弄って終わっちゃいそうだしね。

本当にデザインは沼だ…。

 

以上!

コメント

タイトルとURLをコピーしました