賢威8のメインビジュアル機能を使うと、トップページのロゴ下に大きなヘッダー画像を設置することが可能です。
トップページを経由したり訪問するユーザーの多いサイトを運営しているなら、一目で分かりやすいヘッダー画像を設定する方が良いでしょう。
初心者でも簡単に設定できるので賢威の評判は高いです。
そこで、賢威8のヘッダー画像の設定方法や適切なサイズなどを解説します。
ヘッダー画像ではなく賢威8のロゴのカスタマイズ方法は、別のページで解説しているので参考にしてください。
ヘッダー画像（メインビジュアル）の種類は5つ
- 画像
- 背景画像
- 動画
- スライダー
- 全画面
賢威8のヘッダー画像に画像を設定できるのはもちろんですが、テキストが挿入できる背景画像や全画面、複数画像のスライダー機能の他に動画も可能です。
設定方法は「賢威の設定 ＞ メインビジュアル」で画像をアップロードするだけ。
とても簡単で誰でも設定できますが、設定できる項目や画像の推奨サイズがあるので、1つずつ詳しく解説します。
画像の設定方法とサイズ
メインビジュアルの画像の表示幅には、テンプレート幅とブラウザ幅の2種類あります。
テンプレート幅の横幅サイズは、メインエリアとサイドバーエリアと同じ1,200pxが最大値として設定されているので、画像の推奨サイズは1,200px×375pxとなっています。
横幅サイズが1,200px未満の画像をアップロードすると、コンテンツエリアのサイズと異なってしまうので、統一感が無くなってしまいます。
なるべくアップロードする画像は横幅が1,200px以上あるものを用意しましょう。
ブラウザ幅の横幅サイズは、PCモニターいっぱいに画像を表示する「width:100％」を設定しているため、PC環境や設定によって画像サイズは変化します。
多くのサイトが1,000px前後でWEB制作されていますが、高解像度モニターなどにも対応するため、賢威8では横幅2,000px以上がある画像サイズを推奨しています。
参考までにアップロードした画像の横幅は2,100pxですが、私のPC環境では横幅が1920pxで150％拡大設定なので、表示された画像サイズは1,263pxでした。
画像はブラウザ幅に合わせて縮小や拡大して表示されるので、小さな画像でボケてしまうより大きな画像を用意しましょう。
また、賢威8ではモバイル用画像もアップロード可能で、縦長利用するスマホや一部のタブレットの768px以下で表示する場合に適用されます。
そのため、モバイル用にアップロードする画像サイズは750px×500pxが推奨と少し正方形に近い形となっています。
背景画像の設定方法とサイズ
メインビジュアルの背景画像にアップロードする画像は、前項目の画像と同じ横幅サイズが推奨されています。
背景画像が画像と違う点が、テキストを画像の上に挿入できることです。
[cc id=695]あらかじめ画像に文字を書いていれば良いんじゃないの？[cc id=653]
そう思う賢威ユーザーも多いと思いますが、背景画像には「background-size:cover」が設定されているために利用する上での注意点があります。
上の画像は背景画像にテキストを挿入していない状態ですが、ヘッダー画像が少しだけ表示されているだけです。
background-size:coverは指定された最小範囲を覆う形で画像が表示されるので、横幅1,200pxはいっぱいでも縦幅は余白分しか表示されません。
なので、画像自体に書いた文字が切れてしまったり見えない場合があります。
背景画像を設定する時は画像に文字を直接書くのではなくて、テキスト機能を利用すると文字が切れたりする心配はありません。
動画の設定方法とサイズ
ヘッダー画像には動画も設定可能で、YouTubeに上がっている動画でも埋め込みコードをコピペするだけでとても簡単です。
ブログの他にYouTubeも開設しているブロガーなら相乗効果があるはずです。
また、ブログにアップロードしている動画もmp4ファイルであれば、挿入したい動画ファイルを選択するだけ。
ただし、スマホなどのモバイル用には画像しか設定できないので注意しましょう。
スライダーの設定方法とサイズ
メインビジュアルのスライダーを利用すると、複数枚のヘッダー画像を一定時間で切り替えて表示することが可能になります。
表示幅は画像や背景画像と同じで、テンプレート幅は横幅1,200px以上、ブラウザ幅は横幅2,000px以上が推奨されています。
アップロードできる画像の枚数には制限がないので、「画像追加」ボタンをクリックすれば何枚でもスライドしたい画像が設定できます。
ヘッダー画像を切り替えるタイミングはミリ秒単位で設定可能なので、細かく切り替えできます。
1ミリ秒＝0.001秒です。1秒ごとに表示を切り替えたいなら1000ミリ秒と設定しましょう。
全画面表示の設定方法とサイズ
メインビジュアルの全画面表示は、モニターいっぱいに画像を表示するヘッダー画像になっていてテキスト挿入も可能です。
同じような機能で背景画像のブラウザ幅も画面いっぱいに表示される仕様ですが、全画面表示はテキストを入れなくても画像が小さくなることはありません。
また、モニター下部からはみ出た画像については表示されないので、スクロールするとすぐにコンテンツ部分が見えてきます。
賢威8のランディングページ（LP）のような作りになっています。
ヘッダー画像のテキストエリアをカスタマイズ
賢威8のヘッダー画像の「背景画像」や「全画面表示」にはテキストが挿入できますが、何か殺風景と感じませんか？
賢威のデザインがダサいと言われる理由の1つかもしれません。
そこで、ヘッダー画像のテキストエリアで感じる悩みを解決していきます。
- 文字が小さい
- 中途半端な透かした背景
文字を大きく太くする
まずはトップページのファーストビューのテキストなので、目立つように文字を大きく太くカスタマイズしていきます。
ヘッダー画像のテキストを大きくするには、次のコードを追加CSSに記述します。
/*スマホ表示*/
.catch-area_inner{
font-size: 2em;
font-weight: bold;
}
/*PC表示*/
@media (min-width: 768px){
.catch-area_inner{
font-size: 3em;
}
}
キャッチコピーをこれだけ大きな文字で訴求すれば、ブログやサイトの内容が一目で分かるはずです。
画像全体に半透明の背景を重ねる
初期設定ではテキストエリアの周りだけ半透明の背景が表示されますが、カスタマイズによって背景画像全体に半透明の背景を重ねたいと思います。
追加CSSに記述するコードは、次のとおりです。
.keni-mv_outer::after{
position: absolute;
content: "";
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .8);
top: 0;
left: 0;
}
上のコードだけではテキストエリアの上にも半透明の背景が重なってしまうので、追加CSSにもう一手間加えます。
.keni-mv_outer{
z-index: -2;
}
.keni-mv_outer::after{
position: absolute;
content: "";
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .8);
top: 0;
left: 0;
z-index: -1;
}
背景画像と半透明の背景に「z-index」でマイナス数値を設定すれば、テキストエリアの下に移動できます。
あと、テキストエリアのクラス名「.catch-area_inner」に背景色を透明にする「background-color: transparent;」を指定すれば重なりが無くなりますよ。
メインビジュアルの背景画像であればテキスト位置も「左・中央・右」と選択できるので、ヘッダー画像に合う位置を選択すれば良いでしょう。
賢威8ヘッダー画像のまとめ
ヘッダー画像の設定が簡単な賢威ですので、魅力的なトップページを作成したい方はぜひ活用した機能です。
特に記事一覧だけ表示しているトップページではなく、カテゴリや読ませたい記事をキレイにまとめられたサイト型のトップページにはヘッダー画像は必要でしょう。
別のページでは、賢威のトップページをサイト型にカスタマイズする方法も解説していますので参考にしてください。
[keni-linkcard url="https://cyan-blog.com/keni8-top-page/"]