sirius2のヘッダー画像を画面いっぱいにするには

旧SIRIUSからSIRIUS2にデーター移行して作成したのがこのサイトです。
ヘッダー部分は横幅が画面いっぱい表示されていますが、この設定する箇所を探すのに手間取り、また、スマホのヘッダー表示がイマイチで、個別で設定しなおしたことなど、結構苦労したので、私の経験から、分かり易くご紹介して行きたいと思います。

 

「全体設定」から「レイアウト設定」をクリックします

 

サイトのレイアウトを選択

サイトのレイアウトを「1カラム」「2カラム」「3カラム」から選択します。
サイトのレビューが表示されますので、見ながらお好みのレイアウトをお選びください。

 

ヘッダー画像の表示はここで設定

「ヘッダー」を選択すると「ヘッダー画像」の所から選択
1.デフォルト-小さ目にメニューの部分の左に表示されます。
2.ヘッダー画像-サイトの記事の部分と同じサイズで表示されます。
3.ヘッダー画像(ワイド)-サイトの幅いっぱいに表示されます。

 

ヘッダー上にテキストが表示されるので注意

この画像のように、ヘッダー上に「テキストと説明文」が表示されてしますので、「非表示」を選択しましょう。
以外に、サイトをアップロードしてから、確認したらヘッダー上に文字が被っていて、慌てて非表示にすることがよくあります。

 

スマホの設定も同じように進めてください

 

スマホのヘッダー画像が全部表示されない

ヘッダー画像は、スマホには縮小されて表示される様になっているのですが、ヘッダーの大きさの問題なのか、このようにサイドが表示されていません。

 

スマホのヘッダーは別に作成

まずは、最初にヘッダー画像を400×250ピクセル位で作成しておきます。
「サイトオプション」→「デザイン設定」をクリックすると、この画面が表示されます。
ここで、「スマホ設定」→「詳細設定」と進みます。
@のヘッダー画像で、「個別にヘッダー画像を指定する」を選択
Aで予め作成しておいた400×250ピクセルのヘッダーを選択

 

スマホのヘッダーも綺麗に表示されました

 

ヘッダーは、サイトの顔と言っても過言ではないほど、一番先に目に入るものです。
しっかり作り上げて格好いいホームページを作り上げて上位表示を目指しましょう!