本サイトのヘッダーは、SWELLの標準機能をベースに作成します。
基本的にはSWELLのカスタマイズ機能を使用してヘッダーを構築し、特別なレイアウトが必要な場合のみテーマ側でカスタマイズを行います。
SWELLはヘッダー機能が非常に充実しているため、通常のコーポレートサイトやサービスサイトであれば、カスタマイザーとウィジェットだけで実装可能です。
SWELLヘッダーカスタマイズについてはネット上にたくさん情報があります。
基本方針
ヘッダー作成時は以下の方針を守ります。
- SWELLの標準機能を優先して使用する
- WordPressのカスタマイザーから設定する
- CTAボタンはウィジェットから設置する
- PHP編集は必要な場合のみ行う
基本的にはSWELLの機能だけで完結させる運用とします。
ヘッダー設定の場所
ヘッダーの基本設定は以下から行います。
WordPress管理画面
外観
→ カスタマイズ
→ ヘッダー
ここで以下の設定を行います。
- ヘッダーレイアウト
- メニュー表示
- スマホメニュー
- ヘッダーデザイン
- 固定ヘッダー
ロゴの設定
ロゴは以下から設定します。
外観
→ カスタマイズ
→ サイト基本情報
ここで以下を設定します。
- サイトロゴ
- サイトタイトル
- ファビコン
基本的には画像ロゴを使用します。
ナビゲーションメニューの作成
ヘッダーのメニューは以下から作成します。
WordPress管理画面
外観
→ メニュー
手順
- 新しいメニューを作成
- 固定ページを追加
- メニュー位置を「ヘッダーメニュー」に設定
- 保存
これでヘッダーにメニューが表示されます。
CTAボタンの設置（基本）
CTAボタンは、SWELLのウィジェット機能を使用して設置します。
設置場所
WordPress管理画面
外観
→ ウィジェット
→ ヘッダー内部
ここに カスタムHTMLブロックを追加してCTAボタンを設置します。
CTA設置手順
- WordPress管理画面
- 外観
- ウィジェット
- 「ヘッダー内部」を開く
- カスタムHTMLを追加
- CTAボタンのHTMLを記述
CTAボタンのHTML例
<div class="header-cta">
<a href="/contact/" class="btn-contact">お問い合わせ</a>
</div>
用途に応じて以下のCTAを設置します。
- お問い合わせ
- 資料請求
- 無料相談
- 見積依頼
サイトのコンバージョン導線として重要な要素なので、
基本的にCTAボタンはヘッダーに設置します。
ロゴ上テキストの設定
ヘッダーのロゴ上に表示されるテキストは、
WordPressのキャッチフレーズ機能を使用して設定します。
設定場所
WordPress管理画面
設定
→ 一般
→ キャッチフレーズ
ここに入力したテキストが、ロゴ上テキストとして表示されます。
使用用途
ロゴ上テキストは、以下のような用途で使用します。
- サービスの説明
- 会社のキャッチコピー
- SEOキーワードの補足
例
- 中小企業向けSEOコンサルティング会社
- 企業YouTube運用代行・コンサルティング
- Webマーケティング支援会社
スマホメニューの設定
スマホ表示時は、SWELLが自動的にハンバーガーメニューへ変換します。
設定場所
外観
→ カスタマイズ
→ ヘッダー
ここで以下を調整できます。
- ハンバーガーメニュー
- スマホナビ
- メニュー表示方法
デザインの調整
ヘッダーのデザイン調整は、管理画面の追加CSSに記述します。
設定場所
外観
→ カスタマイズ
→ 追加CSS
例
.header-cta a{
background:#0a7bdc;
color:#fff;
padding:12px 20px;
border-radius:4px;
font-weight:bold;
}
CSS記述ルール
CSSを書く場所は以下のルールで使い分けます。
追加CSSに書いてよいもの
- ヘッダーのデザイン調整
- フッターのデザイン調整
- 記事内の軽い装飾
assets/css に書くもの
それ以外のCSSはすべてテーマ内のCSSに書きます。
assets/css/
例
- 共通レイアウトCSS
- テンプレート用CSS
- 複数ページで使用するCSS
カスタム実装が必要なケース
以下の場合のみ、テーマ側でカスタマイズを行います。
- 特殊なヘッダーレイアウト
- 特殊なナビゲーション構造
- JavaScriptによる動作追加
通常のサイト制作では、SWELLの機能だけで対応可能です。
ヘッダー作成ルールまとめ
ヘッダー作成時は以下を守ってください。
基本ルール
- SWELLの標準機能を優先する
- カスタマイザーから設定する
- CTAはウィジェット「ヘッダー内部」に設置する
- デザイン調整は追加CSSで行う
- PHP編集は最小限にする
SWELLはヘッダー機能が強力なため、
基本は管理画面だけで作る運用とします。