【Cocoon】ヘッダー画像を設定しましょう

ホームページは、お店やサイトのイメージを伝えるために、大切な場所です。

イメージに合ったヘッダー画像や、伝えたい情報を見やすく配置して作っていきましょう。

無料テーマCocoonを使って、ヘッダーの作り方をお伝えします。

Cocoon ヘッダー画像設定

Cocoonをインストールすると、左のバナーにCocoon設定があらわれます。

「Cocoon設定」にマウスポインタを当てると、横にあらわれる「Cocoon設定」をクリックします。

設定画面が開きます。

タブが多いですね～

でも、ビビらなくて大丈夫です。

色んな機能の整理整頓ができてるという事ですから、慣れてきたら、その使いやすさに驚きますよ！

「ヘッダー」のタブをクリック。

最初は、とてもシンプルな画面です。

ここに、自分のイメージする写真やロゴを入れていきます。

ヘッダー画像サイズ

Cocoonの場合、タテ幅は選択できるのですが、横幅を選択できる場所が無い。

で、色々なサイトさんを参考にさせて頂き、自分でもこれだなた思ったのが

横幅1240PXです。

使いたい画像の横幅をこのサイズにして、タテ幅はお好みで大丈夫です。

とても分かりやすく、参考にさせて頂いたサイトさん。

ヘッダー画像アップロード

中程にある「ヘッダー背景画像」の「選択」をクリック。

画像のアップロード画面があらわれます。

「ファイルをアップロード」をクリックして「ファイルを選択」をクリック。

用意した画像を選択しアップロードします。

➀「メディアライブラリ」に画像が加わります。

②画像の「代替テキスト」を入力しましょう。

これは、もし何かのアクシデントで画像があらわれなかった場合、何がそこにあったかわかりやすく表示されるものです。

そして、Googleもサイトの評価に使いますので、SEO対策に効果的です。

③「画像の選択」をクリック。

すると「ヘッダー背景画像」に写真が追加されました。

次に画像の高さを設定しましょう。

アップロードした画像のサイズで大丈夫です。

微調整も出来ます。

今回の画像サイズは、高さ600PXでしたので、600と入力。

プレヴュー画面で確認しますと

イメージに合ってたら、上下にあるブルーのボタン「変更をまとめて保存」をクリック。

保存後サイトを確認してみましょう。

モバイルではどうなのかチェック。

Cocoonでは、これも簡単にチェックできます。

サイトを表示すると、画面下に下記のバーが出ます。

これのどれかを押すと、下記のモバイル画面が表示されます。

問題ないようです。

これで進めましょう。

Cocoon ロゴ設定

では、次にロゴに行きましょう。

現在、ロゴは、会社や店舗名など、初期の設定で決めた、「設定」→「一般設定」→「サイトのタイトル」が表示されています。

これを、画像に変えて、デザイン性を加味することが出来るのです。

今回は簡単に文字を画像にしてアップしました。

設定画面の入り方は、ヘッダー画像と同じです。

「Cocoon設定」→「Cocoon設定」をクリック。

「ヘッダータブ」をクリック。

少し下にスクロールしてください。

「ヘッダーロゴ」の「選択」をクリックし、保存したロゴの画像をアップします。

ここでのやり方は、「ヘッダー背景画像」を設定した時と同じです。

画像をアップロードできると、下記のように画像が表示されます。

上下にあるブルーのボタン「変更をまとめて保存」をクリック。

プレヴューを確認してみますとロゴが反映しています。

ロゴの上の文字は、キャッチフレーズ（サイトの説明）ですが、表示を消すことも可能です。

同じ「ヘッダー」の設定画面にあります。

「キャッチフレーズの配置」のところです。

デフォルトは「ヘッダートップ」です。

「表示しない」をクリックします。

保存してください。

文字が消えています。

ヘッダー画像の設定方法は以上となります。

自分好みの画像や、ロゴの配置場所など色々変えて、自分好みのトップページを作ってください。