【ヘッダー画像パターン２】基本の"headerエリア"とフルスクリーンの"headerエリア"の設定方法

画像を用意する

まず、ヘッダーに表示したい画像を探します。フリー素材サービスなどを活用ください。幅は2200px以上あるような大きな画像が推奨されています。(個人的には最低1920pxあればよいと思います。)

今回はフリー画像サービス"pixabay"からこの画像を借りてきました。

アップロード

用意した画像をアップロードします。カスタマイズ画面の"headerエリア"へ移動しましょう。

"画像を選択"から先ほど選んだ画像をアップロードします。

画像の高さを調節する

このままでは画像がほとんど表示されていないので、表示するエリアを広げます。

"ヘッダー画像エリア"へ移動します。

そこの"ヘッダー画像エリア最低の高さ（px）"に数値を入力し画像の高さを調節します。

200pxでやってみたり、400pxでやってみたり調節しましょう。ここでは600pxに落ち着きました。

画像の位置を調整

"画像のどの部分を見せたいですか？"画像のかたよりを調整します。再び"headerエリア"項目へ移動しましょう。

"背景画像の横位置"と"背景画像の縦位置"をそれぞれ上、真ん中、下からお好みで選んでください。

"背景画像を幅100%のレスポンシブにする"にチェックを入れると画像をちょうどよく(ブラウザいっぱいに)表示してくれます(推奨)。

スマホの画像の高さを調節

今度はスマホで見たときの画像の高さを調節します。再び"ヘッダー画像エリア"へ移動します。

"スマホ用（599px以下）※高さを分ける場合"の欄に数値を入力し高さを調節します。画面下のスマホのマークからスマホ画面に切り替えることができます。

今回は250pxに設定してみました。設定が完了したら"公開"ボタンを押しましょう。

基本の"headerエリア"の設定は以上です。引き続き、"ヘッダーコンテンツ"を作成してみましょう！下のヘッダーコンテンツの設定方法へ移動してください。

ロゴ部分とメニュー部分の背景がうまく表示されないとき

「ロゴ部分とメニュー部分の背景が消えないんだけど？」これはすでにカスタマイズ画面から背景が設定されている可能性があります。なので背景を透明にする必要があります。

該当箇所の色設定項目へ移動しましょう。

"背景色"の欄を空白にします。"色を選択"よりカラーのコードの欄を空白にしてください(色相のどこかを押せば選択できると思います)。ボーダーも残っていたら空欄に。最後に"公開"ボタンを押して設定完了です。

設定画面に移動

"ヘッダーコンテンツ"表示していきます。まず、管理画面にある"ヘッダーコンテンツ"を設定する項目へ移動しましょう。

"ヘッダーコンテンツ"を記入

実際に投稿画面にキャッチコピーやボタンを設置していきます。

"ヘッダーコンテンツ設定"の項目に投稿画面があるのでそこにキャチコピーやボタンなどのパーツを設置していきましょう。

"カスタムフォント"というパーツを使うと表現の幅が広がります。※マニュアル必読

...とは言ってみたものの、初めは難しいと思うのでサンプルのショートコードを置いておきます。コピペしてお使いください。※編集画面はビジュアルエディタではなくテキストエディタに変更してください。

[st-designfont myclass="" webicon="" fontsize="150" fontweight="bold" color="#fff" textshadow="#424242" webfont="on" margin="0 0 20px 0"]大きいキャッチコピー[/st-designfont]

[st-designfont myclass="" webicon="" fontsize="100" fontweight="bold" color="#fff" textshadow="#424242" webfont="on" margin="0 0 20px 0"]普通のキャッチコピー[/st-designfont]

[st-mybutton class="" url="#" title="詳しくはこちら" rel="" webicon="" target="" color="#FFF" bgcolor="" bgcolor_top="" bordercolor="#FFF" borderwidth="5" borderradius="30" fontsize="" fontweight="bold" width="" webicon_after="st-svg-chevron-right" shadow="" ref="" beacon=""]

こんな感じになります。

細かい設定

あとは細かい設定を行なっていきます。

まず"コンテンツ全体を上下左右を中央寄せ"にチェックを入れます(推奨)。

画像の背景を暗くしたい場合は"背景を暗くする"にチェックを入れます。

最後に"Save"ボタンを押して設定完了です。