AFFINGER6の初期カスタマイズはこれでOK！ おすすめの設定27項目を紹介

けい

ブログ運営3年目のけいが解説していきますね。

上記の悩みを解決できる記事を書きました。

僕も初めてAFFINGER6を使ってカスタマイズをしたときは、「何を・どう設定したらいいんだろう…」と悩んでいたので、みなさんの気持ちはよく分かります。

でも、今回ご紹介する方法を試してみたところ、ブログ経験のなかった当時の僕でも初期デザインの整ったブログサイトを作ることができました。

この記事でご紹介をする「おすすめの初期カスタマイズ方法」を参考にすれば、誰でもおしゃれなブログを作ることができますよ。

記事前半では「AFFINGER6を使ってカスタマイズをする際の注意点」、後半では「AFFINGER6の初期カスタマイズ方法27項目」を紹介するのでブログ運営に興味がある人はぜひチェックしてみてください。

【本編に入る前に】

なお、AFFINGER6のインストールがまだ済んでいない人は下記の記事を参考にしてみてください。

それでは本編でAFFINGER6の初期カスタマイズ方法27項目について解説していきます。

AFFINGER6を使ってカスタマイズする際の注意点

けい

まずはAFFINGER6を使ってカスタマイズする際の注意点を理解していきましょう。

AFFINGER6でブログをカスタマイズする際は時間をかけすぎないようにしましょう。

なぜなら、外観に拘りすぎてしまうとその分ブログの仕組みづくりが遅れてしまうからです。

仮に、カスタマイズに30時間かけたとすると、その時間で「1記事10時間」と仮定しても3記事は書けてしまいます。

このように、時間をかけすぎると目標達成が遠のき、モチベーション維持も難しくなるのでカスタマイズは必要最低限にとどめておきましょう。

なお、これは僕の経験上にはなりますが、記事を重ねていくうちに“理想のデザイン”が見えてくるので一段落してからカスタマイズした方が効率が良いです◎。

けい

AFFINGER6の初期設定に時間をかけすぎるのはもったいないので3〜4時間くらいでサッと終わらせるのがベストです。

AFFINGER6の初期カスタマイズ方法24項目

それではここから、AFFINGER6の初期カスタマイズ方法24項目を紹介します。（※残りの3項目はデフォルトを省いておきたい設定）

冒頭で解説をした注意点の「時間をかけすぎない」を押さえつつ要点をまとめて説明していきます。

なお、24項目のカスタマイズは以下の設定の流れでまとめています。

これらの流れで説明していきますね。

1.管理画面の保存

AFFINGER6を導入したばかりだと、内部設定がまだ未登録の状態です。

そのままだと一部の機能やデザインが正常に動かないことがあるので最初に設定しておきましょう。

▼管理画面の保存手順▼

「①AFFINGER管理」→「②はじめに」→「③Save」をクリックしたら完了です。

2.パーマリンク

▼パーマリンクの設定手順▼

「①設定」→「②パーマリンク」→「③カスタム構造」にチェックを入れ→ 「④/%postname%/」を選択します。

「⑤変更を保存」をクリックしたら設定完了です。

3.サイトカラー

サイトカラーを決める前にイメージが湧きにくい人は、「COOL COLORS」をチェックしてみてください。

カラーコード（各色の番号）が表示されていて、さらに配色パターンの参考例も用意されているので自分のデザインイメージをつかみやすいです。

▼サイトカラーの設定手順▼

「①AFFINGER管理」→「②全体設定」→「③カラーパターン」「④デザインパターン」を選択し→「⑤Save」をクリックしたら完了です。

参考カスタマイズ〈サイト全体の設定〉

けい

デザインカラーが決まっていないようであれば初めはデフォルトでOKかと思います。

すでにカラーコードが決まっている人は下記の設定方法を参考にしてください。

「①外観」→「②カスタマイズ」をクリックします。

「③ヘッダーナビゲーション」をクリックします。

「④パソコン（PC）」を選択してください。

「⑤背景色」を選びます。

「⑥サイト名のカラー」を選択→「⑦公開」をクリックしたら完了です。

参考カスタマイズ〈ヘッダーナビゲーション〉

けい

スマホの方も同じように設定しておきましょう。

4.サイト名・キャッチフレーズ

▼サイト名・キャッチフレーズの設定手順▼

「①外観」→「②カスタマイズ」を選択します。

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

「④キャッチフレーズ」を入力→「⑤公開」をクリックしたら完了です。

5.メニューバー

ここではスマホ用のカスタマイズについて説明していきます。

「左：メニュー」と「右：検索欄」の色（●黒）を変えていきます。

▼メニューバーの設定手順▼

「①外観」→「②カスタマイズ」を選択します。

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

「④スマホスライドメニュー/検索」をクリックしてください。

「⑤アイコン色」を選択→「⑥公開」をクリックしたら完了です。

参考カスタマイズ〈メニューバー〉

けい

なお画像左端（メニュー欄）の設定については後に変更していくので今は気にしなくてOKです。

6.検索欄

▼検索欄の設定手順▼

「①外観」→「②ウィジェット」をクリックします。

「③サイドバー中部と下部のデフォルト設定」を解除します。

「④▼」をクリックし→各ブロックを「⑤消去」します。※中部3つ、下部2つすべて消去。

下部にスクロールし「⑥検索」を→先ほどの「サイドバー（上部）」にドラッグで移動してください。

「⑦タイトル」に“検索”と入力→「⑧完了」をクリックします。

「⑨外観」→「⑩カスタマイズ」を選択します。

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

「⑫ウィジェットタイトル（サイドバー）」をクリックしましょう。

「⑬文字色」を選択します。

「⑭ボーダー色」を選択します。

「⑮デザインスタイル」を選択→「⑯公開」をクリックしたら完了です。

参考カスタマイズ〈メニューバー〉

7.プロフィール

▼プロフィールの設定手順▼

「①ユーザー」→「②プロフィール」をクリックします。

「③ニックネームと各URL」を入力します。

URL入力項目

>>お問い合せフォームのURL取得方法はこちらから

「④プロフィール情報」を入力→「⑤プロフィールを更新」をクリックします。

「⑥外観」→「⑦ウィジェット」をクリックします。

「⑧AFFINGERプロフィールカード」をサイドバー（中部）にドラッグし→「⑨完了」をクリックします。

「⑩外観」→「⑪カスタマイズ」を選択してください。

「⑫オプション（その他）」をクリックします。

「⑬プロフィールカード」をクリックします。

「⑭アバター画像」を選択しましょう。

「⑮角丸にする」にチェックを入れ→「⑯公開」をクリックしたら完了です。

けい

ちなみにプロフィール欄の記載については「誰のどんな悩みを解決するブログなのか？」という点と権威性を意識して僕は作っています。

当ブログの参考プロフィール

また、有名サイト「マクサン」では以下の内容をプロフィール項目として推奨していました。

マクサン推奨〈プロフィール作成〉

これらを参考にしていただければ魅力的なプロフィールを作れると思います。

8.カテゴリー

▼カテゴリーの設定手順▼

「①外観」→「②ウィジェット」をクリックします。

「カテゴリー」をサイドバー（下部）にドラッグし→「③タイトル名」に“カテゴリー”を入力→「④ドロップダウンで表示」にチェックを入れて→「⑤保存」をクリックしたら完了です。

9.アーカイブ

▼アーカイブの設定手順▼

「①外観」→「②ウィジェット」をクリックします。

「③アーカイブ」をサイドバー（下部）にドラッグし→「④タイトル名」に“アーカイブ”を入力→「⑤ドロップダウンで表示」にチェックを入れて→「⑥保存」をクリックしたら完了です。

参考ホーム画面のバランスを保つためにもアーカイブはカテゴリーの下に設置しておきましょう。

10.お問い合わせフォーム

▼お問い合せフォームの設定手順▼

「①プラグイン」→「②プラグインを追加」をクリックします。

「③プラグインの検索欄」に“Contact Form 7”と入力→「④今すぐインストール」をクリックして有効化します。

Contact Form 7を設定しやすくするために「⑤検索欄」から→“Classic Editor”と入力→「⑥今すぐインストール」をクリックして有効化します。

同じくContact Form 7を設定しやすくするために「⑦検索欄」から→“Advanced Editor Tools”と入力→「⑧今すぐインストール」をクリックして有効化します。

「⑨お問い合わせ」→「➉コンタクトフォーム1」をクリックしてください。

「⑪題名」に“○○ブログからお問い合わせが届きました。”と入力し→「⑫保存」をクリックします。

この時に🔵青色のショートコードもコピーしておきましょう。

「⑭固定ページ」→「⑮固定ページを追加」をクリックします。

「⑮タイトル名」に“お問い合わせ”と入力→「⑯パーマリンク」を変更し→「⑰🔵のショートコード」を本文にペーストして→「⑱公開」をクリックします。

「⑲外観」→「⑳メニュー」をクリックします。

「㉑メニュー名」に“フッターメニュー”を入力→「㉒メニュー設定」にチェックを入れ→「㉓メニューを作成」をクリックしてください。

「㉔お問い合わせ」にチェックを入れ→「㉕メニューに追加」→「㉖メニューを保存」をクリックしたら完了です。

けい

読者との接点を逃さないためにもお問い合わせフォームは必ず設定しておきましょう。

11.プライバシーポリシー

ちなみにプライバシーポリシーに記載する内容については、当ブログの掲載文をコピーして使ってください。

>>プライバシーポリシー（参考イメージ）

>>プライバシーポリシー（コピー用）

▼プライバシーポリシーの設定手順▼

「①固定ページ」→「②固定ページを追加」をクリックします。

「③タイトル名」に“プライバシーポリシー”と入力→「④パーマリンク」を変更し→「⑤本文をコピー」して貼り付けたら→「⑥公開」をクリックします。

※「けいブログ」のサイト名だけは変更する。

「⑦外観」→「⑧メニュー」をクリックします。

「⑨プライバシーポリシー」にチェックを入れ→「⑩メニューに追加」→「⑪メニューを保存」をクリックしたら完了です。

12.見出し

▼見出しの設定手順▼

「①外観」→「②カスタマイズ」をクリックします。

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

「④大見出し（H2タグ）」をクリックします。

「⑤文字色、背景色、グラデーション上部色、ボーダー色、ボーダーサブ色」を設定してください。

「⑥デザインスタイル」を選択します。

「⑦調整」から上下の余白を変更します。

「⑧テキストの中央寄せ」のチェックを外し→「⑨公開」をクリックしたら、大見出し（H2）の設定は完了です。

参考カスタマイズ〈大見出し（H2）〉

中見出し（H3タグ）も「①同じ手順」で設定して「②公開」をクリックします。

参考カスタマイズ〈中見出し（H3）〉

小見出し（H4タグ）も「①同じ手順」で設定して「②公開」をクリックします。

参考カスタマイズ〈小見出し（H4）〉

13.フォント

▼フォントの設定手順▼

「①AFFINGER管理」→「②全体設定」をクリックし下にスクロールします。

「③スマホ・PCのフォントサイズと行間の数値」を入力→「④Save」をクリックしたら完了です。

参考カスタマイズ〈フォント〉

14.会話吹き出し

けい

会話吹き出しはこちらのデザインになります。

▼会話吹き出しの設定手順▼

「①AFFINGER管理」→「②会話風アイコン」をクリックします。

「③アイコン名」に“名前”を入力し→画像を「④アップロード」します。

下にスクロールし「⑤会話風アイコンを少し動かす」と「⑥会話風アイコンを少し大きくする」にチェックを入れ→「⑦Save」をクリックします。

吹き出しが設定されました。続いて吹き出しの中の色を設定していきましょう。

「⑧外観」→「⑨カスタマイズ」をクリックします。

「⑩オプション（その他）」をクリックします。

「⑪会話吹き出し」をクリックします。

「⑫背景色」を選択し→「⑬Save」をクリックしたら完了です。

参考カスタマイズ〈会話吹き出し〉

15.この記事を書いた人

▼この記事を書いた人の設定手順▼

「①AFFINGER管理」→「②投稿・固定記事」をクリックします。

下にスクロールして「③この記事を書いた人を有効化する」にチェックを入れ→「④Save」をクリックしましょう。

記事に戻って下にスクロールすると「この記事を書いた人」が表示されます。

続いて角を丸くしたいのでカスタマイズしていきます。

「⑤外観」→「⑥カスタマイズ」をクリックします。

「⑦オプション（その他）」をクリックします。

「⑧プロフィールカード」を選択します。

下にスクロールして→「⑨角丸にする」にチェックを入れ→「⑩公開」をクリックしたら完了です。

※プロフィールカードとこの記事を書いた人はAFFINGER6で連携されています。

もしも「この記事を書いた人」の色を変更したい場合は、「旧プロフィールカード」の「①ボーダー色」を変更し→「②公開」をクリックしてください。

参考カスタマイズ〈この記事を書いた人〉

16.アイキャッチ画像

▼アイキャッチ画像の設定手順▼

「①AFFINGER管理」→「②投稿・固定記事」をクリックします。

「③アイキャッチ画像の表示を全ての記事で有効化する（デフォルトは上部）」にチェックを入れ→「④Save」をクリックしたら完了です。

けい

アイキャッチ画像を設定すると記事にデザインを入れる際の一手間を省けるので便利です。

17.ブログカード

▼ブログカードの設定手順▼

「①外観」→「②カスタマイズ」をクリックします。

「③オプション（その他）」をクリックします。

「④ブログカード/ラベル」を選択します。

「⑤背景色」を設定し→「⑥たすき掛け」にチェックを入れ→「⑦公開」をクリックしたら完了です。

参考カスタマイズ〈ブログカード〉

18.TOPに戻るボタン

▼TOPに戻るボタンの設定手順▼

①「外観」→「カスタマイズ」をクリックします。

「③TOPに戻るボタン」をクリックします。

「④背景色（テキスト）」を選択し→「⑤公開」をクリックしたら完了です。

参考カスタマイズ〈TOPに戻るボタン〉

19.リスト（連番・チェック・他）

▼リスト（連番・チェック・他）の設定手順▼

①「外観」→「カスタマイズ」をクリックします。

「③オプション（その他）」をクリックします。

「④リスト（連番・チェック・他）」をクリックします。

「⑤数字リスト色」「⑥チェック（サークル）リスト色」を選択し→「⑦公開」をクリックしたら完了です。

参考カスタマイズ〈連番・チェック・他〉

けい

カラーボックスはシンプルなのに強調性があるので必ず設定しておきましょうね。

20.記事内のWebアイコン（スタイル）

▼記事内のWebアイコン (スタイル) の設定手順▼

①「外観」→「カスタマイズ」をクリックします。

「③オプション（その他）」をクリックします。

「④記事内のWebアイコン（スタイル）」をクリックします。

「⑤各色」を選択し→「⑥公開」をクリックしたら設定完了です。

参考カスタマイズ〈記事内のWebアイコン〉

21.ステップ・カウント/ポイント

▼ステップ・カウント/ポイントの設定手順▼

「①外観」→「②カスタマイズ」をクリックします。

「③オプション（その他）」をクリックします。

「④ステップ・カウント/ポイント（SC）」をクリックしてください。

「⑤ステップ・ポイント（SC）のラベル背景色」「⑥ステップ・ポイント（SC）のラベル色」を選択し→「⑦公開」をクリックしたら完了です。

参考カスタマイズ〈ステップ・カウント/ポイント〉

22.カテゴリー/広告（PR）

▼カテゴリー/広告（PR）の設定手順▼

「①外観」→「②カスタマイズ」をクリックします。

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

「④カテゴリー/広告（PR）」をクリックします。

「⑤背景色」を選択→「⑥角を丸くする」にチェックを入れ→「⑦公開」をクリックしたら完了です。

参考カスタマイズ〈カテゴリー/広告〉

けい

カテゴリーは細かい設定になりますがブログの統一感をだすために必要なカスタマイズです。

23.NEW ENTRY & 関連記事

▼NEW ENTRY & 関連記事の設定手順▼

「①外観」→「②カスタマイズ」をクリックします。

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

「④NEW ENTRY & 関連記事」をクリックします。

「⑤背景色」「⑥ボーダー色」「⑦文字色」を選択し→「⑧公開」をクリックしたら完了です。

参考カスタマイズ〈NEW ENTRY & 関連記事〉

24.SNS登録・シェア

▼SNS登録・シェアの設定手順▼

「①AFFINGER管理」→「②SNS/OGP」をクリックします。

「③X ID」を入力→「④カードサイズ」を選択し→「⑤Save」をクリックしたら設定完了です。

参考ちなみに、当ブログでは画像サイズを「小」に設定しています。

けい

カードサイズですが投稿をしたあとにも変更が可能なので特に悩む必要はないですよ。

AFFINGER6の初期カスタマイズで省いておきたい3項目

続いて、AFFINGER6のカスタマイズで省いておきたい3項目を紹介します。

デフォルト設定のままだと、デザインが少し不自然に見える場合もあるため早めに調整しておきましょう。

なお、これら3項目はサイドバーと記事部分のカスタマイズになります。

それでは、それぞれを順番に説明していきますね。

25.サイドバーの新着記事

サイドバーの新着記事では表示したくない記事も自動で反映されてしまい、かつ記事を更新するたびに一手間カスタマイズが必要になるため設定を省いておきましょう。

▼サイドバー新着記事の設定手順▼

「①AFFINGER管理」→「②トップページ」をクリックします。

下にスクロールし「記事一覧」から→「③下層ページのサイドバーの新着記事一覧を非表示にする」にチェックを入れ→「④Save」をクリックしたら完了です。

26.記事内のコメント欄

コメント欄にはネガティブな内容が書き込まれる場合もあるため設定を省いておきましょう。

▼記事内のコメント欄の設定手順▼

「①AFFINGER管理」→「②投稿・固定記事」をクリックします。

下にスクロールし「コメント」から「③コメント欄・コメントフォームを非表示にする」にチェックを入れ→「④Save」をクリックしたら完了です。

けい

ちなみに読者とのやり取りはお問い合わせフォームで対応できるのでこの点は特に気にしなくてもOKです。

27.記事の抜粋

記事の抜粋をしないと、記事の冒頭文がそのまま説明文として表示されてしまいます。冒頭文が似たような文章になると読者に単調なイメージを与えてしまうので設定を省いていきましょう。

▼記事の抜粋の設定手順▼

「①AFFINGER管理」→「②全体設定」をクリックします。

②下にスクロールし「抜粋設定」から「③抜粋項目.1」「④抜粋項目.2」にチェックを入れ→「⑤Save」をクリックしたら設定完了です。

参考カスタマイズ〈記事の抜粋〉

けい

以上でおすすめカスタマイズ27項目が完了です。お疲れ様でした。

まとめ（AFFINGER6でブログをカスタマイズしてみよう！）

本記事では、AFFINGER6の初期カスタマイズ方法27項目について解説してきました。

最後に、これまで紹介してきたカスタマイズ内容の要点をまとめて終わりたいと思います。

ご紹介した「AFFINGER6のカスタマイズ方法27項目」を参考にすれば、誰でも整ったブログサイトを作れます。

ぜひ本記事を参考にしながら、この機会にブログのカスタマイズに挑戦してみてくださいね。

【最後に】

なお、AFFINGER6のインストールがまだ済んでいない人は下記の記事を参考にしてみてください。