WordPress Setup Guide
トップ画像を画面いっぱいに表示する方法
BlocksyとGenerateBlocksを使用して、背景画像をブラウザ全体へ広げ、 透明ヘッダーを重ねるための設定手順です。
完成形： 横幅100%、高さ100vh、左右・上下の余白なし。 ロゴとメニューは背景画像の上に表示します。
Blocksy Companionをインストール
透明ヘッダー機能を使用するには、 Blocksy Companionプラグインが必要です。
→ プラグイン
→ 新規プラグインを追加
→ 「Blocksy Companion」で検索
→ インストール
→ 有効化
有効化すると、Blocksyのヘッダー設定に Transparent Functionalityと Sticky Functionalityが追加されます。
ホーム固定ページを編集
→ 固定ページ
→ ホームページ
→ 編集
右上にあるBlocksyのアイコンを押して、 Blocksyページ設定を開きます。
Blocksyページ設定
| スタイルソース | カスタム |
|---|---|
| コンテンツエリア | 幅広 |
| 縦方向間隔 | 一番右の「余白なし」 |
| ヘッダーを無効にする | OFF |
| フッターを無効にする | OFF |
一番外側のContainerを選択
左上のリストビューを開き、一番外側のContainerを選択します。
└─ Container（内側・背景画像）
フル幅やページ全体の高さは、 内側ではなく外側のContainerを基準に設定します。
Containerを「全幅」にする
Containerを選択した状態で、ブロック上部に表示される 幅・配置アイコンを押します。
「幅広」ではなく「全幅（Full width）」 を選択してください。
全幅：ブラウザの左右端まで。
左右に白い帯が残る場合は、この「全幅」が設定されていない 可能性があります。
Containerのサイズ設定
右側のブロック設定から Sizingを開きます。
| Width | 100% |
|---|---|
| Height | 空欄 |
| Min Height | 100vh |
| Max Width | 空欄 |
100vhとは
vhは Viewport Heightの略です。 100vhは、 ブラウザ画面の高さ100%を意味します。
余白をゼロにする
ContainerのSpacingを開きます。
| Padding | 0px（全方向） |
|---|---|
| Margin | 0px（全方向） |
鎖のアイコンをONにすると、上下左右をまとめて設定できます。
背景画像を設定
ContainerのBackgroundsから、 使用するヒーロー画像を選択します。
| Background Position | center |
|---|---|
| Repeat | no-repeat |
| Size | cover |
coverの役割
画像の縦横比を維持しながら、Container全体を覆うように拡大します。 画面サイズによって画像の上下または左右が少し切れる場合があります。
透明ヘッダーを有効にする
→ カスタマイズ
→ ヘッダー
→ グローバルヘッダー
→ General
Transparent FunctionalityをONにします。
続いて、Edit Conditionsを押します。
| 条件 | Include |
|---|---|
| 対象 | Entire Website |
トップページだけ透明にしたい場合は、 Entire WebsiteではなくFront Pageを選択します。
透明状態の背景を設定
→ Design
→ Transparent State
→ Background
背景色を市松模様の Transparent（透明）に設定します。
Default StateとTransparent Stateは別設定なので、 Transparent State側が透明になっていることを確認してください。
サイト名とメニューの文字色
黒い背景画像の上では、ロゴ・サイト名・メニューを白にすると見やすくなります。
メニュー
→ カスタマイズ
→ ヘッダー
→ Menu 1
→ Design
| Initial | 白 |
|---|---|
| Hover | 白、または薄いグレー |
| Active | 白 |
サイト名
→ Logo
→ Design
→ Site Title Color
サイト名やリンクが青く表示される場合は、 Blocksyのアクセントカラーまたは各ヘッダー要素のリンク色が 青に設定されています。
完成確認
チェックリスト
- Blocksy Companionがインストール・有効化されている
- ページ設定が「幅広」になっている
- Containerが「全幅」になっている
- Widthが100%
- Min Heightが100vh
- PaddingとMarginが0
- 背景画像のSizeがcover
- 背景画像のPositionがcenter
- Transparent FunctionalityがON
- Transparent Stateの背景が透明
- ページ設定の「ヘッダーを無効にする」がOFF
- ロゴ・サイト名・メニューが画像上で読める色になっている
今回ハマったポイント
-
Blocksy Companionが未インストール
Transparent Headerが使用できなかった。 -
ページ設定だけでは全幅にならなかった
Blocksy側の「幅広」に加えて、Container側を「全幅」にする必要があった。 -
左右に白い帯が残った
ContainerのWidthやPaddingではなく、「幅広」と「全幅」の違いが原因だった。 -
ヘッダーを一時的に無効化した
上部余白の原因切り分けには有効だが、最終的にはOFFへ戻す。 -
背景画像が画面全体を覆わなかった
Background Sizeをcoverへ変更した。 -
メニューやサイト名が青くなった
Blocksyのアクセントカラー、またはヘッダー要素の文字色を変更する。