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

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

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

プラグインを追加する

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

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

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

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

アバター画像の設定

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

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

無料画像サイト紹介

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

• FLAT ICON DESIGN
• flaticon
• Canva

hiro

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

エディタの拡張

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

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

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

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

スタイルで使える機能紹介（抜粋）

• ふわふわ（アニメーション）
• 黄マーカー（マーカー）
• 初心者マーク（アイコン）

hiro

他にもたくさん使えます。

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

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

hiro

ウェイ。

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

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

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

hiro

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

カラーパターンの設定

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

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

基本エリア設定

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

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

hiro

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

おすすめ配色サイト

• Adobe color
• ColorHunt
• colorsupplyyy

見出しタグ

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

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

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

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

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

• Amazon商品の説明「#333333」
• Google検索結果（PCの説明文）「#4d5156」
• Twitter「#14171a」

hiro

詳しく知りたい方は「Webサイト　文字色」で検索。

オプション（その他）

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

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

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

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

hiro

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

フォントサイズの変更

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

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

フォントサイズ（スマホのみ変更）

• 基本（pタグ）：15
• 記事タイトル：18
• H2タグ：17
• H3タグ：17

hiro

フォントサイズを変更したあとは、スマホ画面で確認を。

ロゴ画像の作成

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

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

⇒Canva

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

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

Canvaの使い方

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

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

Canvaの操作画面に移行。

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

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

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

hiro

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

アイキャッチ画像の設定

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

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

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

• Canva
• O-DAN
• pixabay

hiro

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

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

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

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

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

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

hiro

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

補足

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

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

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

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

hiro

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

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