iPadを横にした時、Cocoonのヘッダー画像の下部にスペースができてしまう問題の解決法をお教えします。

Canvaの使い方

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

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

今回は、iPadを横にしてみた場合ヘッダーの下部にスペースが出来てしまう問題」を解決し、パソコンでも他のデバイスでも理想どうりの見え方にする方法を解説します。

それには「Canva」というツールが必要になりますので、「Canva」でアカウント登録をお願いします。↓

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

では、作業を始めましょう!とその前に・・・前回までの記事、

「Canva」で簡単におしゃれなCocoonのヘッダー画像を作る方法はこちら↓

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

「Cocoon」にCanvaで作成したヘッダー画像を設定する方法はこちら↓で確認しておいてください。

50代オヤジでも出来た!「Canva」で作成したヘッダー画像を「Cocoon」に設定する方法をお教えます!
Cocoonにヘッダー画像を設定する方法を知りたくありませんか?この記事ではCanvaで作ったヘッダー画像をワードプレステーマCocoonに設定する方法と手順を動画と図解で解説しています。ぜひヘッダーを自分のオリジナルにカスタマイズして下さい。

Cocoonにヘッダー画像を設定した際、

「ブログのヘッダーがiPadでは下部にスペースが出来てしまう」という問題は下記の図の通りです。

iPadを横にしてみた場合ヘッダーの下部にスペースが出来てしまう問題」を解決

パソコンやスマホでは理想通りの見え方をしているのに対し、iPadを横にした時にだけヘッダーの下の部分に空いたスペースができてしまいます。

これは、パソコンでスマートに見えるようにヘッダーの背景画像を細く作ったのが原因です。

Cocoonのヘッダーは、iPadを横にした時、ヘッダー画像を設定するスペースが思ったより広がってしまうようなのです。

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

しかし画像の縦を大きくしたら、今度はパソコンでの見え方が変わってくるのです。

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

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

どのデバイスでもちゃんとヘッダー画像が見えるように、同じく「Canva」で調整するのが手っ取り早い方法だと考えます。

iPadを横にした時、Cocoonのヘッダー画像の下部にスペースができてしまう問題の解決法をお教えします。【動画】

まずは、「Cocoon(コクーン)」ブログのヘッダー画像をどのデバイスでも理想通りの見え方にする方法を動画で解説しましたのでそれを観てください。

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

iPadを横にした時、Cocoonのヘッダー画像の下部にスペースができてしまう問題の解決法をお教えします。【図解】

まず、前回Canvaで作ったヘッダー背景画像をCanvaで開いて用意してください。

「Canva」で簡単におしゃれなCocoonのヘッダー画像を作る方法↓

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

横1500px X 縦300pxのヘッダー背景画像がCanva内に保存されていると思いますのでそれを調整していきます。

左に見えているテンプレートは必要ないので、矢印で示す場所をクリックしてウィンドウを閉じましょう

「iPadを横にしてみた場合ヘッダーの下部にスペースが出来てしまう問題」を解決

ヘッダー背景画像の高さを600ピクセルに広げる

iPadを横にした場合、ヘッダー内にきちんと画像を収めるために「高さ」を600ピクセルまで広げます。

①上の段の「サイズを変更」をクリックしてウィンドウを表示
「高さ」の欄に「600」と入力
③最後に「サイズを変更」をクリックしてください。

iPadを横にしてみた場合ヘッダーの下部にスペースが出来てしまう問題」を解決

すると写真の隠れていた部分が表示されて背景が広がります。

iPadを横にしてみた場合ヘッダーの下部にスペースが出来てしまう問題」を解決

これをダウンロードしてCocoonのヘッダー背景画像に設定したいところですが、

実はそれではダメなのです。

なぜかというと、

iPadの見え方はこれで解決するのですが、今度は大事なパソコンでも見え方がおかしくなってしまうからなのです。

実際に設定すると下のようになります。

iPadを横にしてみた場合ヘッダーの下部にスペースが出来てしまう問題」を解決

以前のヘッダーはこうです↓

iPadを横にしてみた場合ヘッダーの下部にスペースが出来てしまう問題」を解決

見比べてみてください。

見せたい背景がすごくずれてしまったのがわかりますよね。

しかし、iPadではちゃんと隙間が埋まりました。↓

iPadを横にしてみた場合ヘッダーの下部にスペースが出来てしまう問題」を解決

「この見え方でも良いよ」という方はここまでで作業はOKなのですが、

使いたい背景画像はみなさん違ってきますので、ここからはパソコンでも理想通りの見え方にするための作業を進めさせていただきます。

ヘッダー背景画像の横幅を2000ピクセルに広げる

なぜパソコンで見た場合、ヘッダーがずれて見えてしまうかというと、Cocoon設定でヘッダー背景画像を設定すると、画像の上部から高さ設定した分(下図の赤枠内の範囲)が表示されるからです。

iPadを横にしてみた場合ヘッダーの下部にスペースが出来てしまう問題」を解決

なので、これを解消するには、画像の見せたい位置をヘッダーの上部に持ってくるように背景画像を作らなければなりません。

Canvaで背景画像の高さを600ピクセルまで広げましたが、

今度は横幅を2000ピクセルまで広げます。

「サイズを変更」をクリック。ウィンドウが表示されますので、
「幅」の欄を「2000」、「高さ」の欄を「600」と書き換えます。
*高さを「600」と再入力することを忘れないでください。「300」のままになっている場合があります。
③最後に「サイズを変更」をクリックしてください。

iPadを横にしてみた場合ヘッダーの下部にスペースが出来てしまう問題」を解決

次に作業がしやすいように、右下の「ズーム」をクリックして25%くらいまで作業ページを縮小します。

iPadを横にしてみた場合ヘッダーの下部にスペースが出来てしまう問題」を解決

次に画像をダブルクリックして画像の全体像を表示させ

iPadを横にしてみた場合ヘッダーの下部にスペースが出来てしまう問題」を解決

カーソルでドラッグして画像を上にずらし、パソコンのヘッダーで見せたい部分ページの上半分くらい(下図の赤枠で囲んだ範囲)の場所に配置します。

iPadを横にしてみた場合ヘッダーの下部にスペースが出来てしまう問題」を解決

配置が決まったら「完了」をクリック

iPadを横にしてみた場合ヘッダーの下部にスペースが出来てしまう問題」を解決

これで終了です。。。

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

そうしたら、このヘッダー背景画像をダウンロードしましょう。

①右上の「ダウンロード」ボタンをクリック
②ファイルの種類は「PNG」選択し、
③最後に最下部にある「ダウンロード」をクリックしてください。ダウンロードが始まります。

iPadを横にしてみた場合ヘッダーの下部にスペースが出来てしまう問題」を解決

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

iPadを横にしてみた場合ヘッダーの下部にスペースが出来てしまう問題」を解決

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

「Cocoon設定」からヘッダー背景画像を設定しましょう。

ヘッダー背景画像ファイルがダウンロードできたら、最後にダッシュボードから「Cocoon設定」を開い画像を設定しましょう。

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

iPadを横にしてみた場合ヘッダーの下部にスペースが出来てしまう問題」を解決

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

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

iPadを横にしてみた場合ヘッダーの下部にスペースが出来てしまう問題」を解決

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

iPadを横にしてみた場合ヘッダーの下部にスペースが出来てしまう問題」を解決

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

iPadを横にしてみた場合ヘッダーの下部にスペースが出来てしまう問題」を解決

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

iPadを横にしてみた場合ヘッダーの下部にスペースが出来てしまう問題」を解決
iPadを横にしてみた場合ヘッダーの下部にスペースが出来てしまう問題」を解決

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

iPadを横にしてみた場合ヘッダーの下部にスペースが出来てしまう問題」を解決
iPadを横にしてみた場合ヘッダーの下部にスペースが出来てしまう問題」を解決

これで新たに「2000ピクセル X 600ピクセルのヘッダー背景画像」が設定されました。

iPadを横にしてみた場合ヘッダーの下部にスペースが出来てしまう問題」を解決

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

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

iPadを横にしてみた場合ヘッダーの下部にスペースが出来てしまう問題」を解決

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

パソコンでも思った通りの位置に画像が来ています。

「iPadを横にしてみた場合ヘッダーの下部にスペースが出来てしまう問題」を解決

「レスポンシブテスト」をして確認

作業は異常で完了ですが、一応、パソコン以外のデバイスで見え方をチェックしてみましょう。
スマホ、やタブレットでの見え方を確認する方法に「レスポンシブテスト」があります。

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

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

iPadを横にしてみた場合ヘッダーの下部にスペースが出来てしまう問題」を解決

画面をスクロールしていくと、それぞれの見え方が確認できます。

iPadを横にしてみた場合ヘッダーの下部にスペースが出来てしまう問題」を解決

そうしたら最後に問題のあった「iPadを横にした時のヘッダー画像の見え方」を確認して終了です。

ヘッダーの下部にスペースができていた問題が解決です。

お疲れ様でした。

iPadを横にしてみた場合ヘッダーの下部にスペースが出来てしまう問題」を解決

コメント

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