この記事は
【AFFINGER6】サイトデザイン完全マニュアル【ブロよび。風】
のヘッダー/ヘッダーメニュー編の記事になります。
全ての工程を順番に進めることで、「ブロよび。風」のデザインが完全再現できるようになっています。
こんな人におすすめ
- AFFINGER6でブログを運営している
- シンプルでおしゃれなデザインにしたい
- あれこれ考えるよりも手順通りに操作しながら完成を目指したい
それでは早速、ヘッダー・ヘッダーメニューのカスタマイズ方法を一緒にみていきましょう。
完成イメージは以下の通りです。
当ブログのデザインがちょっとでもいいなと思ってくれた人は手順通りに進めてみてください！
ヘッダー（タイトル部分）をカスタマイズしよう
まずはじめにヘッダーのタイトル部分をカスタマイズしていきます。
やるべきことは以下の3つです。
- タイトル文字の色を変更する
- 背景色を変更する
- タイトルを中央寄せにする
順番に解説していきます。
まずはタイトルをつけよう
タイトルの設定方法は以下の通りです。
手順
- 「WordPress管理画面」→「外観」→「カスタマイズ」
- 「サイト基本情報」→「サイトのタイトル」を入力
ブログタイトルは自由に決めてOKです。ただしタイトルはサイトの看板ともいえる大事なものです。愛着がもてるようにじっくり考えてみましょう。
キャッチフレーズは表示しないので未入力でもOKです。
タイトル文字の色を変更する
タイトルが設定できたら、文字の色を変えていきましょう。
手順
- 「ロゴ画像/サイトのタイトル」→「サイトタイトルとキャッチフレーズの文字色」→「色を選択」
カラーコード「#222222」を入力 - 「スマホヘッダーのタイトル色」→「色を選択」
カラーコード「#222222」を入力
タイトルの背景色を変更する
続いてタイトル部分の背景色を変えていきましょう。
手順
- 「基本エリア設定」→「ヘッダーエリア」→「背景色」→「色を選択」
カラーコード「#FFFFFF」を入力 - 「ヘッダー背景の横幅を100%にする」にチェック
「サイト上部にライン」と「グラデーション上部」は不要（#FFFFFFにしておけばOK)
タイトルを中央寄せにする
最後にタイトルを中央に寄せましょう。
手順
- 「WordPress管理画面」→「AFFINGER管理」→「ヘッダー」
- スマホヘッダーの高さ→48px
- 「フロントページを除く」にチェック
- 「ヘッダーにキャッチフレーズを入力しない」にチェック
- 「ヘッダーを分割しない」にチェックし「save」をクリック
- 「ヘッダーエリアをセンタリング」にチェック
「ヘッダーを分割しない」にチェックした後、一回「save」をクリックしないと「ヘッダーエリアをセンタリング」にチェックできません。
これでヘッダーのタイトル部分は完成したと思います。次に進みましょう！
ヘッダーメニューをカスタマイズしよう
それでは次にヘッダーメニューのカスタマイズに進みましょう。
やるべきことは以下の4つです。
- ヘッダーメニューを作る
- ヘッダーメニューにカテゴリーを追加する
- 背景色を変更し中央寄せにする
- スマホ用スライドメニューの色を変更する
スマホに関しては個別に設定が必要なので注意しましょう。
では順番に解説していきます。
ヘッダーメニューを作ろう
まずは事前準備が必要です。
WordPressの管理画面からヘッダーメニューを作成していきましょう。
手順
- 「WordPress管理画面」→「外観」→「メニュー」
- 「新しいメニューを作成しましょう」をクリック
- 「メニュー名」を入力
- 「メニューの位置」にチェック
- 「メニューを作成」をクリック
補足
メニュー名は「ヘッダーメニュー」などにしておけばOKです。
メニューの位置は「ヘッダーメニュー」と「スマホスライドメニュー」にチェックを入れておきましょう。
ヘッダーメニューにカテゴリーを追加しよう
次に作成したヘッダーメニューにカテゴリーを追加していきます。
手順
- 編集するメニューを「ヘッダーメニュー」にする
- 「メニュー項目を追加」の欄にある「カテゴリー」をプルダウン→追加したいカテゴリーにチェック
- 「メニューに追加」をクリック
手順
- メニュー構造のなかに選択したカテゴリーが追加されたことを確認
- 最後に「変更を保存」する
これでヘッダーメニューにカテゴリーがセットされました。
ヘッダーメニューの背景色を決めて中央寄せにします
次にヘッダーメニューの背景色を変更し、中央寄せにします。
手順
- 「WordPress管理画面」→「外観」→「カスタマイズ」
- 「各メニュー設定」→「PCヘッダーメニュー」
手順
背景色を変更する
- 「背景色」→カラーコード「#222222」を入力
- 「ボーダー上下色」→カラーコード「#FFFFFF」を入力
- 「ボーダー左右色」→カラーコード「#FFFFFF」を入力
- 「ボーダー右色」→カラーコード「#FFFFFF」を入力
- 「文字色」→カラーコード「#FFFFFF」を入力
中央寄せにする
- 「メニューをセンター寄せにする」にチェック
- 「メニューの横幅を100%にする」にチェック
- 「メニューの幅」→160px
- 「下層ドロップダウンメニュー背景色」→カラーコード「#222222」を入力
これでヘッダーメニューは完成しました。最後にスマホ用の設定をして完了です。
スマホのみ：スライドメニューと検索スライドメニューをカスタマイズしよう
スマホだと画面サイズの関係でヘッダーメニューが下図のようになります。
スマホ画面用にスライドメニューのカスタマイズが必要なので、忘れずに設定しましょう。
手順
- 「WordPress管理画面」→「外観」→「カスタマイズ」
- 「各メニュー設定」→「スマホメニュー（スマホヘッダー）」
手順
- 「スライドメニューボタンの背景色」→カラーコード「#222222」
- 「スライドメニューアイコン」→カラーコード「#FFFFFF」
- 「スライドメニューバー背景色」→カラーコード「#FFFFFF」
- 「スライドメニューバー（グラデーション）」→カラーコード「#FFFFFF」
- 「スライドメニュー内のテキストリンク色」→カラーコード「#222222」
- 「スライドメニュー内リンクのボーダー色」→カラーコード「#222222」
- 「スライドメニュー内背景色」→カラーコード「#FFFFFF」
- 「検索スライドメニュー内背景色」→カラーコード「#FFFFFF」
実際のデザインを確認してみよう
最後に出来上がったデザインを確認してみましょう。
下図のようになっていればOKです。
お疲れ様でした！
まとめ（次章の内容）
この記事ではヘッダー/ヘッダーメニューのカスタマイズ方法を見てきました。
次章では下図の【ヘッダー下：スライドショー】部分のカスタマイズ方法を解説していきます。
それではまた次回、【AFFINGER6:ヘッダー下にスライドショーを設置する方法（ブロよび。風カスタマイズ）】でお会いしましょう！！
＞＞次の作業に進む
