50代オヤジでも出来た!「Canva」で作成したヘッダー画像を「Cocoon」に設定する方法をお教えます!

Canvaの使い方

「オヤジビジネス.com」運営者の「白石泰敏」です!

本日も「稼げるネットビジネス」に関する情報を発信していきます。

今回はワードプレスのテーマ「Cocoon」のヘッダー「Canva」で作ったヘッダー画像を設定する方法をお教えます!

設定するとパソコンでこう言う見え方になります。↓

「Canva」で作成したヘッダー画像を「Cocoon」に設定する方法をお教えます!

「Canva」で簡単におしゃれなCocoonのヘッダー画像を作る方法はこちらの記事で紹介しています。↓

デザイン未経験の50代オヤジでも出来た!「Canva」で簡単におしゃれな「Cocoon」のヘッダー画像を無料で作る方法をお教えます!
「Canva」でワードプレステーマ「Cocoon」のヘッダー画像を作る方法を知りたくないですか?Canvaを使って簡単におしゃれなブログのヘッダー画像を無料で作成する方法をを動画と図解で説明しています。是非参考にして作ってみてください。

無料でオシャレなデザイン画像が作れるツール「Canva」について知りたい方は、こちらの記事も合わせてお読みください。↓

Canvaとは?デザイン未経験の僕にも使えた、無料でオシャレなデザイン画像が作れるツール
無料でオシャレなデザイン画像が作れるツール「Canva(キャンバ)」について知りたくありませんか?この記事「Canvaとは?」では、Canvaにできること、メリット・デメリットなどを解説しています。この記事を読むとCanvaについて知る事ができます。

「Cocoon」にヘッダーロゴとヘッダー背景画像を設定する方法【動画】

まずは、「Cocoon(コクーン)」ブログのヘッダーにヘッダー画像を設定する方法を動画で解説しましたのでそれを観てください。

動画で解説したものを文章と図解で次の章より解説しましたのでこちらも参考にしてください。

「Cocoon」ブログにヘッダー画像を設定する前に・・・

あなたのCocoonブログのヘッダーにヘッダー画像を設定する前に、Cocoon設定からヘッダー設定を確認しましょう。

「ダッシュボード」→「Cocoon設定」→「ヘッダー」を開いてみると、ヘッダー画像の設定は「ヘッダーロゴ」「ヘッダー背景画像」に分けて設定するようになっています。

「Canva」で作成したヘッダー画像を「Cocoon」に設定する方法をお教えます!

なので、Canvaで作ったヘッダー画像を一度「ヘッダーロゴ」と「ヘッダー背景画像」に分けましょう。

「Cocoon」にヘッダーロゴとヘッダー背景画像を設定する方法【図解】

ヘッダーロゴ用に新しいタブを開く

まずヘッダーロゴのサイズを「縦150ピクセル X 横800」ピクセルにします。
ヘッダーロゴのサイズをきちんと決めるために

①カーソルで作成したタイトルロゴを全て選択してください。
②その後「グループ化」をクリックしてタイトルロゴのパーツを1つにします。

「Canva」で作成したヘッダー画像を「Cocoon」に設定する方法をお教えます!

タイトルロゴをドラッグして左上の端で始める「定規」(0ピクセル X 0ピクセル)ヘッダーロゴを移動させます。

「Canva」で作成したヘッダー画像を「Cocoon」に設定する方法をお教えます!

定規でサイズを確認しながら、縦150ピクセル X 横800ピクセルの中に収まるようヘッダーロゴのサイズを調整してください。

「Canva」で作成したヘッダー画像を「Cocoon」に設定する方法をお教えます!

次に分けた後のヘッダーロゴを保存するため、別の場所へ移動させます。
新しいタブでCanvaのホーム画面を開いてください。
そして②「デザイン作成」をクリック
「カスタムサイズ」をクリック

「Canva」で作成したヘッダー画像を「Cocoon」に設定する方法をお教えます!

カスタムサイズの
サイズを「横800ピクセル x 縦150ピクセル」と入力し、
「新しいデザインを作成」をクリック

「Canva」で作成したヘッダー画像を「Cocoon」に設定する方法をお教えます!

新しいデザインを作成」ボタンを押すと、画面に縦横比「800:150」サイズの白いキャンバスが表示されます。

そしたら早速、右上のファイル名「名称未設定のデザイン-800px X 150px」をわかりやすく「ブログのヘッダーロゴ」と書き換えておきましょう。

「Canva」で作成したヘッダー画像を「Cocoon」に設定する方法をお教えます!

ヘッダーロゴとヘッダー背景画像を分ける

今度は、また、Canvaの「ブログのヘッダー背景画像」のタブに戻って画像を2つに分ける作業をします。

タイトルロゴはグループ化してあるので、そのまま選択し、右クリックして「コピー」してください。

「Canva」で作成したヘッダー画像を「Cocoon」に設定する方法をお教えます!

それを今度は先ほど新しいタブで開いた「ブログのヘッダーロゴ」ページのキャンバスへ貼り付けます。

「Canva」で作成したヘッダー画像を「Cocoon」に設定する方法をお教えます!

文字の色と背景の色が混じってこれではよくわからないので、背景を黒に変えます。

タイトルロゴ以外の背景をカーソルでクリックして背景を選択します。
上の段にある「カラー」をクリックします。
左に色の種類が表示されますので「ブラック」をクリックして背景を見やすい黒に変えましょう。

「Canva」で作成したヘッダー画像を「Cocoon」に設定する方法をお教えます!

これで、ヘッダーロゴとヘッダー背景画像を分けることができました。

ヘッダーロゴとヘッダー背景画像をダウンロードする

ここからは分離した2つの画像をそれぞれダウンロードしてCocoonに設定します。

ヘッダー背景画像をダウンロードする

まずヘッダー背景画像をダウンロードしましょう。

ブログの背景画像のページに戻って作業します。

タイトルロゴにカーソルを合わせ、右クリックでタイトルロゴを削除します。

「Canva」で作成したヘッダー画像を「Cocoon」に設定する方法をお教えます!

右上部の「ダウンロード」ボタンをクリックするとウィンドウが表示されますので、
ファイルの種類で「PNG」を選択
最下部の「ダウンロード」をクリックするとダウンロードが始ります。

「Canva」で作成したヘッダー画像を「Cocoon」に設定する方法をお教えます!

「デザインを保存しました!」という表示が出たらヘッダー背景画像の保存は完了です。

「Canva」で作成したヘッダー画像を「Cocoon」に設定する方法をお教えます!

あなたのパソコンのダウンロードフォルダにヘッダー背景画像のファイルが保存されていますので確認しておいてください。

ヘッダーロゴをダウンロードする

ヘッダーロゴのダウンロードの仕方は少し背景画像をダウンロードした時のものとは違うので注意してください。

それではダウンロードの仕方をご説明します。

まず、①右上の「ダウンロード」ボタンをクリック
「ファイルの種類」「PNG」を選択
「透過背景」に必ずチェックを入れて
最下部の「ダウンロード」をクリックしてダウンロードします。

「Canva」で作成したヘッダー画像を「Cocoon」に設定する方法をお教えます!

「デザインを保存しました!」という表示が出たらヘッダーロゴの保存は完了です。

「Canva」で作成したヘッダー画像を「Cocoon」に設定する方法をお教えます!

あなたのパソコンのダウンロードフォルダにヘッダーロゴのファイルが保存されていますので確認しておいてください。

「Cocoon設定」からヘッダーロゴとヘッダー背景画像を設定する

2つの画像ファイルがダウンロードできたら、最後にダッシュボードから「Cocoon設定」を開いて2つの画像を設定したら終了です。

設定したいワードプレスブログの「ダッシュボード」を開いて
「ダッシュボード」→「Cocoon設定」→「Cocoon設定」をクリック
してください。

「Canva」で作成したヘッダー画像を「Cocoon」に設定する方法をお教えます!

「Cocoon設定」の画面が表示されたら「ヘッダー」をクリック

「Canva」で作成したヘッダー画像を「Cocoon」に設定する方法をお教えます!

画面をスクロールして、まず「高さ」の欄に「300」と入力します。

「Canva」で作成したヘッダー画像を「Cocoon」に設定する方法をお教えます!

次にヘッダーロゴの欄にある「選択」をクリックしてください。

「Canva」で作成したヘッダー画像を「Cocoon」に設定する方法をお教えます!

「画像を選択してください。」と言う画面が表示されたら、
「ファイルをアップロード」をクリック

「Canva」で作成したヘッダー画像を「Cocoon」に設定する方法をお教えます!

「ファイルを選択」をクリック

「Canva」で作成したヘッダー画像を「Cocoon」に設定する方法をお教えます!

あなたのパソコンのダウンロードフォルダから前の章でダウンロードした「ブログのヘッダーロゴ」を選択して「開く」をクリック
*画面はMacの場合です。

「Canva」で作成したヘッダー画像を「Cocoon」に設定する方法をお教えます!
「Canva」で作成したヘッダー画像を「Cocoon」に設定する方法をお教えます!

「画像を選択してください。」の画面が表示されたら、ヘッダーロゴが選択されていることを確認後、右下の「画像を選択」をクリックしてください。

「Canva」で作成したヘッダー画像を「Cocoon」に設定する方法をお教えます!
「Canva」で作成したヘッダー画像を「Cocoon」に設定する方法をお教えます!

これで作成したヘッダーロゴが設定されました。

「Canva」で作成したヘッダー画像を「Cocoon」に設定する方法をお教えます!

次にヘッダー背景画像を設定します。

ヘッダー背景画像の欄にある「選択」をクリックしてください。

「Canva」で作成したヘッダー画像を「Cocoon」に設定する方法をお教えます!

「画像を選択してください。」と言う画面が表示されたら、
「ファイルをアップロード」をクリック

「Canva」で作成したヘッダー画像を「Cocoon」に設定する方法をお教えます!

「ファイルを選択」をクリック

「Canva」で作成したヘッダー画像を「Cocoon」に設定する方法をお教えます!

あなたのパソコンのダウンロードフォルダから前の章でダウンロードした「ブログのヘッダー背景画像」を選択して「開く」をクリック
*画面はMacの場合です。

「Canva」で作成したヘッダー画像を「Cocoon」に設定する方法をお教えます!
「Canva」で作成したヘッダー画像を「Cocoon」に設定する方法をお教えます!

「画像を選択してください。」の画面が表示されたら、ヘッダー背景画像が選択されていることを確認後、右下の「画像を選択」をクリックしてください。

「Canva」で作成したヘッダー画像を「Cocoon」に設定する方法をお教えます!
「Canva」で作成したヘッダー画像を「Cocoon」に設定する方法をお教えます!

これで作成したヘッダー背景画像も設定されました。

「Canva」で作成したヘッダー画像を「Cocoon」に設定する方法をお教えます!

最後に画面を下までスクロールさせて「変更をまとめて保存」をクリックしましょう。

これでヘッダー画像の設置は完了です。

「Canva」で作成したヘッダー画像を「Cocoon」に設定する方法をお教えます!

それでは、あなたのサイトをブラウザーで表示させてみましょう。

ブログのヘッダーにヘッダー画像がちゃんと設置していればOKです。

「Canva」で作成したヘッダー画像を「Cocoon」に設定する方法をお教えます!

「レスポンシブテスト」をしてデバイスごとの見え方を確認

パソコンでの見え方はいい具合に確認できましたが、それ以外のデバイスで見た場合どうでしょうか?
スマホ、やタブレットでの見え方を確認する方法に「レスポンシブテスト」があります。

Cocoonを使っている人なら誰でもできるのでやってみましょう。

ヘッダー画像を設定した画面を表示させていてください。
パソコンの画面左下にある「レスポンシブテスト」と書かれた文字をクリックしてみてください。

「Canva」で作成したヘッダー画像を「Cocoon」に設定する方法をお教えます!

まず、画面にスマホであなたのブログを見た場合の見え方が表示されます。

ヘッダー画像の見え方を確認しましょう。

ヘッダーロゴは中心に大きく表示されることがわかります。

「Canva」で作成したヘッダー画像を「Cocoon」に設定する方法をお教えます!

画面を下にスクロールしていくと「Android」や「iPhone」「iPad」などを縦で見た場合、横にしてみた場合などのブログ表示が確認できます。

「Canva」で作成したヘッダー画像を「Cocoon」に設定する方法をお教えます!

画面を最後までスクロールするとiPadを横向きにした場合の表示例が現れると思いますが、このiPadを横向きにした場合のヘッダー画像表示だけ難点があって、

今回ご紹介したCanvaで作ったヘッダー画像を設定する方法だと、どうしてもこうなってしまいます。
*解決方法あり

「Canva」で作成したヘッダー画像を「Cocoon」に設定する方法をお教えます!

それは、画像のサイズをパソコンできれいに見えるように「縦300ピクセル」で作ったのが原因のようです。

Cocoonは、iPadを横にした場合、ヘッダー画像を設定するスペースが300ピクセルより広がってしまうようなのです。

それでは画像の縦を大きくして、パソコンの高さだけ300にすれば良いのでは?」と言う発想が湧くと思います。

しかし縦を広くしただけでは、今度はパソコンでの見え方が変わってくるのです。

パソコンでも今の見え方を変えないでiPadでもきちんと背景画像が設定するには、

「Canva」で横2000px X 縦600pxの背景画像を作っておいて、

どのデバイスでもちゃんとヘッダー画像が見えるように、同じく「Canva」で調整するのが一番です。

なので、そのヘッダー背景画像の作り方を次の記事でご紹介しますので合わせて読んでください。

iPadを横にした時、Cocoonのヘッダー画像の下部にスペースができてしまう問題の解決法をお教えします。
iPadを横にしてみた場合ヘッダーの下部にスペースが出来てしまう問題」を解決する方法を知りたくありませんか?この記事では「Canva」を使ってCocoonのヘッダー画像のサイズをカスタマイズする方法を手順を追って解説。是非参考にしてみてください。

超簡単なのでぜひやってみましょう。

コメント

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