Cocoonにヘッダー画像を設定する方法!!

• コピーしました

 

通常WordPressテーマのヘッダー画像を登録する際には、WordPress管理画面のサイドバーから

「外観」→「ヘッダー」をクリックし、「ヘッダー画像」を選択して画像をアップロードするのが一般的です。

 

しかし、Cocoonでは、ヘッダー画像を設定する方法は、上記の方法と異なります。

この記事では、「Cocoonでヘッダー画像を設定する方法」について説明します。

今回、Cocoonに使用するヘッダー画像

インターネットでCocoonのヘッダー画像サイズを調べてみると、1240px、1900pxなど出てますが、

今回、使用するヘッダー画像は、以下の幅:1240px、高さ:300pxのPNG画像を使用することにしました。

 

Cocoonのヘッダー画像の設定

Cocoonでヘッダー画像を設定しないとデフォルト画面は以下のような画面になります。

 

Cocoonのデフォルト画面

 

今回、上記のブログ(WordPress)にヘッダー画像を設定してみます。

 

(1) ブラウザに以下のURLを入力し「WordPress管理画面」に接続します。

 

https://あなたのドメイン/wp-admin

 

 

(2)「ユーザー名」と「パスワード」を入力し「ログイン」ボタンをクリックします。

 

 

 

(3) サイドバーのメニューから「Cocoon設定」→「Ｃocoon設定」を選択します。

 

 

 

(4) 「Cocoon設定」画面にて「ヘッダー」タブをクリックします。

 

 

 

(5) 「ヘッダー」タブをに切り替わります。

 

 

 

(6) スクロールして下に降りていくと「ヘッダー背景画像」という設定項目があります。

 

 

 

(7) 「選択」をクリックします。

 

 

 

(8) 「メディアライブラリ画面」が表示されます。

 

 

 

(9) 「ヘッダーに設定する画像」を「メディアライブラリ画面」にドラッグ＆ドロップします。

 

 

 

(10) 「メディアライブラリ画面」に画像が登録されました。

 

 

 

(11) 画像を選択し画面右下の「画像の選択」をクリックします。

 

 

 

(12) ヘッダー背景画像に画像が選択されました。

 

 

 

(13) 画面上部にある「変更をまとめて保存」をクリックします。

 

 

 

(14) 変更の保存が完了すると「設定は保存されました。」と表示されます。

 

 

 

(15)実際にどのようになったかブログを見てみましょう。

 

 

ヘッダー画像の下が切れちゃってますね。

Cocoonでは、ヘッダー画像の高さを設定する必要があるのです。

 

(16) 「Cocoon設定」の「ヘッダー」タブに戻って下さい。

画面をスクロールして降りていくと「高さ」設定項目があります。

おりあえず、ヘッダー画像の高さと同じ「300」と入力します。

 

 

 

(16) 「高さ（モバイル）」の「200」と入力しておいて下さい。

 

 

 

(17) 画面上部にある「変更をまとめて保存」をクリックします。

 

 

 

(18) 変更の保存が完了すると「設定は保存されました。」と表示されます。

 

 

 

(19) 実際にどのようになったかブログを見てみましょう。

何か、いい感じになったのではないでしょうか。

 

 

 

(20) 参考までに「iPhone」でも見てみましょう。

 

 

「ゲ!!、端が切れていて何の画像かわからない!!」

 

これは、ちょっと、妥協したくないですね～

 

いろいろ、調べてみたら、Cocoonの設定では、できなさそうで、

CSS(Cascading Style Sheets）で対応するしかなさそうです。

まとめ

 

「Cocoonでヘッダー画像を設定する方法!!」について説明しました。

冒頭でもお話ししましたが、他のWordPressテーマとはヘッダー画像の設定方法が異なります。

 

また、ヘッダー画像の端が切れないようにするには、Cocoonの標準機能では難しく

CSS対応するしかないようです。

 

次回記事では、

「CSSを使いCocoonのヘッダー画像が切れないようにする方法」

について説明します。

 

人気ブログランキング参加中！！

応援ポチお願いします。

 

• コピーしました