「AFFINGER6（アフィンガー6）」カスタマイズ方法

 

このような悩みにお答します。

 

 

Twitter：(@keiji_blog)　Instagram：(@keijiblog）

 

WordPressテーマのAFFINGER6、初期のデザインを変更したいと思いますよね。

 

 

記事作成に集中したいですよね。

 

 

 

AFFINGER6カスタマイズ方法①：トップページ

 

トップページをカスタマイズしていきます。

 

ダッシュボードから、「外観」→「カスタマイズ」をクリックします。

 

タイトル名の変更

 

1.「サイト基本情報」をクリックします。

 

2.「サイトのタイトル」の欄にタイトル名を入力すると、ブログタイトルを変更できます。

「キャッチフレーズ」の欄に入力すると、ブログタイトルの上に表示されます。

 

3.これでOKなら「公開済み」をクリックします。本ブログに反映されます。

 

 

タイトルの位置を中央に変更

 

タイトルの位置は、デフォルトでは左端に寄っています。

 

これを中央に変更する方法を紹介します。

 

1.ダッシュボードから、「AFFINGER管理」→「AFFINGER管理」→「ヘッダー」をクリックします。

 

2.「ヘッダーを分割しない」、「ヘッダーエリアをセンタリング」にチェックを入れて、下にスクロールして「SAVE」をクリックします。

 

トップページを確認すると、タイトルが中央に寄っているはずです。

 

タイトル文字のカラーの変更

 

1.「ロゴ画像/サイトのタイトル」をクリックします。

 

2.「サイトタイトルとキャッチフレーズの文字色」、「スマホヘッダーのタイトル色」のカラーを変更すると、タイトル文字（スマホのタイトル文字）のカラーが変更できます。

 

背景色のカラーの変更

 

1.「基本エリア設定」をクリックします。

 

2.「背景色」をクリックします。

 

3.「背景色」のカラー更すると、下記の部分のカラーが変わります。

 

ヘッダーエリアのカラーの変更

 

1.「基本エリア設定」をクリックします。

 

2.「ヘッダーエリア」をクリックします。

 

3.「サイト上部にライン」、「背景色」、「背景色（グラデーション上部）」のカラーを変更すると、下記の部分のカラーが変わります。

 

 

メニューエリアのカラーの変更

 

1.「各メニュー設定」をクリックします。

 

2.「PCヘッダーメニュー」をクリックします。

 

3.「背景色」、「背景色（グラデーション上部）」、「ボーダー上下色」、「ボーダー左右色」、「ボーダー右色」、「文字色」のカラーを変更すると、下記の部分のカラーが変わります。

 

mainエリア(記事)のカラーの変更

 

1.「基本エリア設定」をクリックします。

 

2.「mainエリア(記事)」をクリックします。

 

3.「背景色」、「周りのボーダー」のカラーを変更すると、下記の部分のカラーが変わります。

 

サイドバーのカラーの変更

 

1.「基本エリア設定」をクリックします。

 

2.「サイドバー」をクリックします。

 

3.「サイドの文字色」、「サイドバーウィジェットエリアの背景色」のカラーを変更すると、下記の部分のカラーが変わります。

 

フッターエリアのカラーの変更

 

1.「フッターエリア」をクリックします。

 

2.「フッター文字色」、「背景色」、「背景色（グラデーション上部）」のカラーを変更すると、下記の部分のカラーが変わります。

 

AFFINGER6カスタマイズ方法②：メニュー

 

メニューは、下記の部分です。

 

メニューは、読者に見てもらいたいコンテンツを表示するのに大切です。

 

 

設置の方法を解説するので、設置後はテストをしながら最善の設置場所を探してみてください。

 

メニューの設置方法

 

1.「メニュー」をクリックします。

 

2.「メニューを新規作成」をクリックします。

 

3.「メニュー名」を入力、「メニューの位置」を選択して、「次」をクリックします。

「メニュー名」は何でもいいです。メニューの位置は、「ヘッダーメニュー」を選ぶと、タイトル下に設置されます。

 

4.「項目を追加」をクリックして、メニューに表示させたい項目を選んでクリックします。

 

5.表示させたい項目を追加すると、下記のように表示されます。

 

6.メニューに表示する文言を変えたい場合は、▼をクリックすると文言を編集できます。

 

7.「公開」をクリックすると、本ブログに反映されます。

 

メニューのカラーの変更

 

1.「各メニュー設定」をクリックします。

 

2.「PCヘッダーメニュー」をクリックします。

 

3.「背景色」、「背景色（グラデーション上部」、「ボーダー上下色」、「ボーダー左右色」、「ボーダー右色」、「文字色」のカラーを変更すると、下記の部分のカラーが変わります。

 

AFFINGER6カスタマイズ方法③：フォント

 

文字の大きさや行間もカスタマイズして変更できます。

 

今回ご紹介する設定は、当ブログと同じ設定になります。

 

 

フォントの種類

 

1.ダッシュボードから、「AFFINGER管理」→「全体設定」→「フォントの種類」をクリックします。

 

2.その他（優先）の空欄に　font-family:Noto, "Hiragino Sans", Helvetica, Arial, sans-serif;　を入力して保存(save)すると、設定変更完了です。

 

フォントのサイズ、行間

 

フォントのサイズと行間は下記の4つを指定しています。

 

 

1.ダッシュボードから、「AFFINGER管理」→「全体設定」→「フォントのサイズ」をクリックします。

 

2.スマホ、PCの空欄に下記の数字を入力して、Saveをクリックして、設定を変更します。

 

✓スマホ

 

 

✓PC

 

 

AFFINGER6カスタマイズ方法④：見出し

 

ブログ記事内の見出しをカスタマイズしていきます。

 

ダッシュボードから、「外観」→「カスタマイズ」をクリックします。

 

H2タグ

 

1.「見出しタグ（hx）/テキスト」→「H2タグ」をクリックします。

 

 

 

2.下にスクロールして、下記の画像のようにデザイン設定をします。

 

3.H3も「各テキストとhタグ（見出し）」→「H3タグ」から同様の手順で設定をしていきます。

最後の左の余白だけ設定が違います。

 

以上です。

 

 

カスタマイズは他にもたくさんできるので、自分で調整しながら変えてみてください。