【AFFINGER6】初心者でも簡単にできる初期設定「9選」

ワードプレス初心者さん向けに「AFFINGER6」おすすめ初期設定を紹介します。

ここで紹介する内容は「とりあえず使えるようにする最初の準備編」(公式マニュアル)の設定が終わった方向けに書きました。

アップデートにより設定箇所に違いがあるかもしれません。※AFFINGER6EX:バージョン20210406で検証

プラグインを追加する

プラグイン>新規追加

まずはサイト作りに役立つプラグインを追加。ここでは必要なものだけ紹介します。

  • Classic Editor(クラシックエディタの追加)
  • Advanced Editor Tools (エディタの拡張)
  • Google XML Sitemaps(Google用サイトマップ)
  • Rich Table of Contents(お洒落な目次を作成)
  • WP Multibyte Patch(日本語の文字化け防止)
  • WPForms Lite(お問い合わせフォーム)
  • Simple Local Avatars(アバター画像のアップロード)

いずれも「プラグイン>新規追加」で検索可。

今のところサイトに不具合も出てないので、問題なく使えるはずです。

他、おすすめプラグインをまとめた記事もあるのでよければ参考にしてください。

AFFINGER6プラグイン
【初心者用】アフィンガー5におすすめの便利プラグインはこれ!

アフィンガー5におすすめのプラグインをまとめました。 とくに難しいものはありません。ワードプレス初心者の方でも簡単に使えます。 ここで紹介しているプラグインは「プラグイン>新規追加」で検索できます。 ...

続きを見る

 

アバター画像の設定

ユーザー>プロフィール

プロフィールに設定するアバター画像を登録。通常、アバター画像は「Gravatar」で設定しますが、面倒くさいので「Simple Local Avatars」プラグインを使ってます。

プラグインを有効化すればプロフィール設定画面に項目が追加され、簡単に画像がアップロードできます。

 

無料画像サイト紹介

アバターに使える無料画像サイト

hiro
お好みのアバター見つけてください。

 

エディタの拡張

設定>Advanced Editor Tools

プラグイン「Advanced Editor Tools」を有効化しエディタを拡張する。

エディタの拡張は「ブロックエディタ」「クラシックエディタ」の両方で出来ます。ドラッグ&ドロップで追加したい機能を選びましょう。

ぼくはいつも「スタイル」のみ追加。追加した項目はエディタに表示されます。

スタイルを追加すれば、アニメーションやマーカーなどの機能がワンクリックで使えます。

スタイルで使える機能紹介(抜粋)

  • ふわふわ(アニメーション)
  • 黄マーカー(マーカー)
  • 初心者マーク(アイコン)
hiro
他にもたくさん使えます。

 

会話アイコン画像をアップロード

AFFINGER管理>会話アイコン設定

会話アイコン画像をアップロード。ブロガーさんがよく使う「会話ふきだし」を設定します。

hiro
ウェイ。

ちなみに、アフィンガーの会話ふきだしの使い方はめちゃくちゃ簡単です。

タグ>会話ふきだし>会話1

会話ふきだしから「会話1」をクリックするだけでOK。

ふきだしの背景色を変えたいときは、「カスタマイズ>オプション(その他)>会話ふきだし」から変更できます。

hiro
ボーダーデザインタイプ(枠線のみ)にも対応してますよ。

 

カラーパターンの設定

AFFINGER管理>全体設定

サイトのカラー、デザインパターンを変更。サイトのテーマに合ったデザインを選びます。

デフォルトで満足できない場合は、自力でカスタマイズしてみましょう。以下、大まかにカスタマイズできる項目を紹介します。

 

基本エリア設定

カスタマイズ>基本エリア設定

  • 背景色
  • ヘッダーエリア
  • サイドバー
  • フッターエリア
  • 記事一覧の区切りボーダー

アフィンガーは各エリア毎にカラーの変更が可能です。

hiro
自力でデザインしたい方は、配色サイトを参考に。

 

おすすめ配色サイト

 

見出しタグ

カスタマイズ>見出しタグ(hx)/テキスト

  • 記事タイトル
  • H2タグ
  • カテゴリー
  • 引用部分の背景色
  • テキスト色一括変更

当サイトはテキスト色一括変更で文字色を変更してます。

サイトで使用している文字色「#4d5156」。

文字が真っ黒だと少し強めの印象になるので変更しました。

 

以下、大手サイトで使われている文字色を紹介します。

  • Amazon商品の説明「#333333」
  • Google検索結果(PCの説明文)「#4d5156」
  • Twitter「#14171a」
hiro
詳しく知りたい方は「Webサイト 文字色」で検索。

 

オプション(その他)

カスタマイズ>オプション(その他)

  • 記事内のWebアイコン(スタイル)
  • table(表)
  • おすすめ記事
  • 問い合わせボタン(ウィジェット)
  • 会話ふきだし

「table(表)」は、ボーダーや背景色が変更できます。

横一列目の背景と文字色を変更した場合↓↓

table(表) 横一列目 背景色変更
テキスト テキスト テキスト
テキスト テキスト テキスト

table(表)を使いたい場合は、エディタのテーブルから追加できます。

hiro
行の挿入や、列の追加も簡単です。

 

フォントサイズの変更

AFFINGER管理>全体設定

デフォルトのままだと、スマートフォンの文字が大きいため変更してます。

これはサイトのテーマにもよるので、適宜変更してください。

 

フォントサイズ(スマホのみ変更)

  • 基本(pタグ):15
  • 記事タイトル:18
  • H2タグ:17
  • H3タグ:17
hiro
フォントサイズを変更したあとは、スマホ画面で確認を。

 

ロゴ画像の作成

カスタマイズ>ロゴ画像/サイトのタイトル

サイトのロゴを作ります。こだわりまくると時間かかるので、はじめは簡単なもので大丈夫です。

当サイトのロゴは「Canva」を使って作りました。テンプレートも豊富なので初心者さんにもおすすめです。

Canva

Canvaは無料で使えますが、有料版も用意されています。(当サイトは有料版を使用)

有料版だと背景透過やSVGファイルが作れます。無料版で満足できない方は、ぜひ使ってみてください。

 

Canvaの使い方

Canvaトップページでカスタマイズを選択。

画像の幅と高さを設定。新しいデザインを作成をクリック。

Canvaの操作画面に移行。

画面左側にテンプレートが表示されます。

写真、テキスト、素材を選んでロゴ画像を作成。

操作がとても簡単なので、直感的に使えます。

hiro
ロゴが完成したら、画面右上のダウンロードをクリック。

 

アイキャッチ画像の設定

AFFINGER管理>投稿・固定記事

アイキャッチ画像を表示させたい場合は、有効化するにチェックを入れます。

他、アイキャッチ画像をタイトル下に表示させることも可能です。

 

アイキャッチに使える画像サイト(無料)

hiro
画像サイズを揃えた方が統一感が出ますよ。

 

プロフィールカードを追加

外観>ウィジェット>11_STINGERプロフィールカード

サイドバーにプロフィールカードを表示させます。ウィジェットで「11_STINGERプロフィールカード」を追加。

プロフィールカードの設定は「カスタマイズ>オプション(その他)」で変更可能。

ヘッダー画像を設定したり、背景色も変更できます。

プロフィールカードに表示される文章は、プロフィール情報で入力した文章です。

hiro
自己アピールしちゃってください。

 

補足

AFFINGER6の設定項目は多いので、覚えるまでに時間かかるはず…

さらにアップデートされると機能も追加されてきます。ぼくはAFFINGER5から数えて2年ほど使ってますが、いまだに使えてない機能も多いです。

 

ワードプレス初心者だと理解できないことが多いかもしれません。

ぼくも初めはまったく使えませんでした。ただ毎日使っていたおかげで、今は何とかなってます。

hiro
焦らずボチボチいきましょう。

 

こちらも一緒に読まれてます

AFFINGER6プラグイン
【初心者用】アフィンガー5におすすめの便利プラグインはこれ!

アフィンガー5におすすめのプラグインをまとめました。 とくに難しいものはありません。ワードプレス初心者の方でも簡単に使えます。 ここで紹介しているプラグインは「プラグイン>新規追加」で検索できます。 ...

続きを見る

【AFFINGER6】お問い合わせフォームを設置する方法

プラグインを使ったお問い合わせフォームの作り方を紹介します。 使用するプラグインは「WPForms Lite」。完成形はこちらです↓↓ 目次 プラグイン「WPForms Lite」を有効化お問い合わせ ...

続きを見る

【AFFINGER6】インフィード広告を設置する方法

アフィンガー6にインフィード広告を設置する方法を紹介します。 インフィード広告 サイトのデザインに合わせてカスタマイズできる広告で、投稿とリスティングの間に表示されます。 インフィード広告を設置した画 ...

続きを見る

人気記事

AFFINGER6プラグイン 1

アフィンガー5におすすめのプラグインをまとめました。 とくに難しいものはありません。ワードプレス初心者の方でも簡単に使えます。 ここで紹介しているプラグインは「プラグイン>新規追加」で検索できます。 ...

2

プラグインを使ったお問い合わせフォームの作り方を紹介します。 使用するプラグインは「WPForms Lite」。完成形はこちらです↓↓ 目次 プラグイン「WPForms Lite」を有効化お問い合わせ ...

3

AFFINGER5(WING)から進化した「AFFINGER6(ACTION)」。 当サイトでも使ってますが、アップロードには注意が必要です。サーバーのPHPバージョンが7.3以上でないとエラーになり ...

4

サーバーをConoHa WINGに変えてから、ウィジェットでアドセンスコードを貼り付けるとエラーになります… この原因を調べると、サイトのWAF設定がONになっていたからでした。このWAF設定をOFF ...

5

アフィンガー6にインフィード広告を設置する方法を紹介します。 インフィード広告 サイトのデザインに合わせてカスタマイズできる広告で、投稿とリスティングの間に表示されます。 インフィード広告を設置した画 ...