カスタマイズ

【AFFINGER6】ヘッダーとヘッダーメニューのカスタマイズ方法【ブロよび。風】

AFFINGER6カスタマイズ:ヘッダー/ヘッダーメニュー

この記事は
【AFFINGER6】サイトデザイン完全マニュアル【ブロよび。風】
ヘッダー/ヘッダーメニュー編の記事になります。

全ての工程を順番に進めることで、「ブロよび。風」のデザインが完全再現できるようになっています。

こんな人におすすめ

  • AFFINGER6でブログを運営している
  • シンプルでおしゃれなデザインにしたい
  • あれこれ考えるよりも手順通りに操作しながら完成を目指したい

それでは早速、ヘッダー・ヘッダーメニューのカスタマイズ方法を一緒にみていきましょう。

完成イメージは以下の通りです。

AFFINGER6ヘッダー/ヘッダーメニューのカスタマイズ方法
ヘッダー/ヘッダーメニューの完成イメージ

当ブログのデザインがちょっとでもいいなと思ってくれた人は手順通りに進めてみてください!

編集長F

「稼ぐ」に特化したおすすめテーマ
ACTION / AFFINGER6

\当ブログも愛用してます/

AFFINGER6の詳細はこちら

/いますぐゲットする\

ヘッダー(タイトル部分)をカスタマイズしよう

カスタマイズ

まずはじめにヘッダーのタイトル部分をカスタマイズしていきます。

タイトルカスタマイズ見本
ヘッダー部分の完成イメージ

やるべきことは以下の3つです。

  • タイトル文字の色を変更する
  • 背景色を変更する
  • タイトルを中央寄せにする

順番に解説していきます。

まずはタイトルをつけよう

タイトルの設定方法は以下の通りです。

カスタマイズ方法

カスタマイズ手順
キャッチフレーズを決める

手順

  • WordPress管理画面」→「外観」→「カスタマイズ
  • サイト基本情報」→「サイトのタイトル」を入力

ブログタイトルは自由に決めてOKです。ただしタイトルはサイトの看板ともいえる大事なものです。愛着がもてるようにじっくり考えてみましょう。

キャッチフレーズは表示しないので未入力でもOKです。

タイトル文字の色を変更する

タイトルが設定できたら、文字の色を変えていきましょう。

カスタマイズ手順
カスタマイズ手順

手順

  • ロゴ画像/サイトのタイトル」→「サイトタイトルとキャッチフレーズの文字色」→「色を選択

    カラーコード「#222222」を入力

  • スマホヘッダーのタイトル色」→「色を選択

    カラーコード「#222222」を入力

タイトルの背景色を変更する

続いてタイトル部分の背景色を変えていきましょう。

カスタマイズ手順
カスタマイズ手順
カスタマイズ手順

手順

  • 基本エリア設定」→「ヘッダーエリア」→「背景色」→「色を選択

    カラーコード「#FFFFFF」を入力

  • ヘッダー背景の横幅を100%にする」にチェック

「サイト上部にライン」と「グラデーション上部」は不要(#FFFFFFにしておけばOK)

タイトルを中央寄せにする

最後にタイトルを中央に寄せましょう。

AFFINGER管理

カスタマイズ手順

手順

  • WordPress管理画面」→「AFFINGER管理」→「ヘッダー
  • スマホヘッダーの高さ→48px
  • フロントページを除く」にチェック
  • ヘッダーにキャッチフレーズを入力しない」にチェック
  • ヘッダーを分割しない」にチェックし「save」をクリック
  • ヘッダーエリアをセンタリング」にチェック

「ヘッダーを分割しない」にチェックした後、一回「save」をクリックしないと「ヘッダーエリアをセンタリング」にチェックできません。

これでヘッダーのタイトル部分は完成したと思います。次に進みましょう!

編集長F

ヘッダーメニューをカスタマイズしよう

カスタマイズ

それでは次にヘッダーメニューのカスタマイズに進みましょう。

ヘッダーメニューカスタマイズ見本

やるべきことは以下の4つです。

  • ヘッダーメニューを作る
  • ヘッダーメニューにカテゴリーを追加する
  • 背景色を変更し中央寄せにする
  • スマホ用スライドメニューの色を変更する

スマホに関しては個別に設定が必要なので注意しましょう。
では順番に解説していきます。

ヘッダーメニューを作ろう

まずは事前準備が必要です。
WordPressの管理画面からヘッダーメニューを作成していきましょう。

ダッシュボード外観メニュー

ヘッダーメニュー作成方法

手順

  • WordPress管理画面」→「外観」→「メニュー
  • 新しいメニューを作成しましょう」をクリック
  • メニュー名」を入力
  • メニューの位置」にチェック
  • メニューを作成」をクリック

補足
メニュー名は「ヘッダーメニュー」などにしておけばOKです。

メニューの位置は「ヘッダーメニュー」と「スマホスライドメニュー」にチェックを入れておきましょう。

ヘッダーメニューにカテゴリーを追加しよう

次に作成したヘッダーメニューにカテゴリーを追加していきます。

ヘッダーメニューの作成方法

手順

  • 編集するメニューを「ヘッダーメニュー」にする
  • メニュー項目を追加」の欄にある「カテゴリー」をプルダウン→追加したいカテゴリーにチェック
  • メニューに追加」をクリック

手順

  • メニュー構造のなかに選択したカテゴリーが追加されたことを確認
  • 最後に「変更を保存」する

これでヘッダーメニューにカテゴリーがセットされました。

ヘッダーメニューの背景色を決めて中央寄せにします

次にヘッダーメニューの背景色を変更し、中央寄せにします。

カスタマイズ手順
カスタマイズ手順

手順

  • WordPress管理画面」→「外観」→「カスタマイズ
  • 各メニュー設定」→「PCヘッダーメニュー

ヘッダーメニューカスタマイズ手順
ヘッダーメニューカスタマイズ手順

手順

背景色を変更する

  • 背景色」→カラーコード「#222222」を入力
  • ボーダー上下色」→カラーコード「#FFFFFF」を入力
  • ボーダー左右色」→カラーコード「#FFFFFF」を入力
  • ボーダー右色」→カラーコード「#FFFFFF」を入力
  • 文字色」→カラーコード「#FFFFFF」を入力

中央寄せにする

  • メニューをセンター寄せにする」にチェック
  • メニューの横幅を100%にする」にチェック
  • メニューの幅」→160px
  • 下層ドロップダウンメニュー背景色」→カラーコード「#222222」を入力

これでヘッダーメニューは完成しました。最後にスマホ用の設定をして完了です。

編集長F

スマホのみ:スライドメニューと検索スライドメニューをカスタマイズしよう

スマホだと画面サイズの関係でヘッダーメニューが下図のようになります。

スマホ画面用にスライドメニューのカスタマイズが必要なので、忘れずに設定しましょう。

スマホ用ヘッダーメニューのカスタマイズ方法
カスタマイズ手順
ヘッダーメニューカスタマイズ手順

手順

  • WordPress管理画面」→「外観」→「カスタマイズ
  • 各メニュー設定」→「スマホメニュー(スマホヘッダー)

ヘッダーメニューカスタマイズ手順
ヘッダーメニューカスタマイズ手順

手順

  • スライドメニューボタンの背景色」→カラーコード「#222222
  • スライドメニューアイコン」→カラーコード「#FFFFFF
  • スライドメニューバー背景色」→カラーコード「#FFFFFF
  • スライドメニューバー(グラデーション)」→カラーコード「#FFFFFF
  • スライドメニュー内のテキストリンク色」→カラーコード「#222222
  • スライドメニュー内リンクのボーダー色」→カラーコード「#222222
  • スライドメニュー内背景色」→カラーコード「#FFFFFF
  • 検索スライドメニュー内背景色」→カラーコード「#FFFFFF

実際のデザインを確認してみよう

デザイン

最後に出来上がったデザインを確認してみましょう。

下図のようになっていればOKです。

AFFINGER6ヘッダー/ヘッダーメニューのカスタマイズ方法
ヘッダー/ヘッダーメニュー:完成イメージ

お疲れ様でした!

編集長F

まとめ(次章の内容)

この記事ではヘッダー/ヘッダーメニューのカスタマイズ方法を見てきました。

次章では下図の【ヘッダー下:スライドショー】部分のカスタマイズ方法を解説していきます。

ヘッダー下(スライドショー):完成イメージ

それではまた次回、【AFFINGER6:ヘッダー下にスライドショーを設置する方法(ブロよび。風カスタマイズ)】でお会いしましょう!!


>>次の作業に進む

「稼ぐ」に特化したおすすめテーマ
ACTION / AFFINGER6

\当ブログも愛用してます/

AFFINGER6の詳細はこちら

/いますぐゲットする\

よく読まれている記事

アイキャッチ 1

副業に興味のある方は多いと思います。 月に5万円でも稼げれば生活はかなり楽になりますよね。副業候補の代表格でもあるアフィリエイト。 一度は耳にしたことがあるのではないでしょうか? そんな疑問に答えます ...

アイキャッチ 2

それでは本題に入りましょう! 目次 SEOとは?SEOの本質を知ろうGoogleのビジネスモデルを理解しようユーザー満足度を理解しよう検索エンジンの仕組みSEO対策の目的SEO対策の具体例①検索意図に ...

アイキャッチ 3

本記事ではエックスサーバーを使ったワードプレスブログの始め方を解説しています。 画像付き解説ですので手順に従って作業すれば、10分程度で完了します。 目次 はじめにブログ開設に必要なものサーバーとはワ ...

-カスタマイズ