> デザインが綺麗でおしゃれ!評判のSWELLをレビュー!

AFFINGER6の初期設定方法|初めにやるべき11項目を丁寧に解説

AFFINGER6-初期設定

AFFINGER6の初期設定方法を画像たっぷりで分かりやすく解説!初めにやるべき11項目が分かります。

みたろうさん

この記事の執筆者

みたろう 

AFFINGERを1年以上使用の現役ライター兼ブロガー。ブログ歴2年、ブログ記事100日連続投稿の記録あり。

  • AFFINGER6を購入したけど設定がわからない
  • サクッとAFFINGER6の初期設定を済ませたい
  • AFFINGER6の初期設定を失敗したくない

こういったお悩みがある方は、本記事がおすすめです。

この記事では、AFFINGER6の初期設定について詳しく丁寧に解説しています。

AFFINGER6の初期設定に悩んでいる方は、本記事を読みながら一緒に設定してみてくださいね。

▼AFFINGER6の評判・レビュー記事はコチラ

AFFINGER6の評判・レビュー|37のデザイン例もご紹介

\稼げるテーマで収益化を後押し/

AFFINGERの公式サイトにて、僕(みたろう)のツイートが紹介されました。

AFFINGER
タップできる目次

AFFINGER6の初期設定「11項目」

AFFINGER6の初期設定「11項目」は以下の通り。

AFFINGER6の初期設定11項目
  1. テーマ・必須プラグインのインストール
  2. 管理メニューの初期直設定
  3. カラー・デザインパターン設定
  4. フォントサイズ・行間設定
  5. 見出しの設定
  6. ふきだし設定
  7. Googleアナリティクス設定
  8. Googleサーチコンソール設定
  9. SNS設定
  10. プラグインのインストール
  11. デザイン済みデータの設定

それぞれ見ていきましょう。

AFFINGER6の初期設定①:テーマ・必須プラグインのインストール

AFFINGER6の初期設定ですが、まずはテーマ・必須プラグインのインストールを行っておきます。

①テーマと②必須プラグインについて順番に解説していきますね。

よろしくお願いします。

①:テーマAFFINGER6のインストール

まずは、購入したテーマAFFINGER6をWordpressにインストールしましょう。

STEP
「外観」→「テーマ」をクリック
外観からテーマをクリック
STEP
「新規追加」をクリック
新規追加をクリック
STEP
「テーマのアップロード」をクリック
テーマのアップロードをクリック
STEP
「ファイルを選択」をクリック
「ファイルを選択」をクリック
STEP
購入したAFFINGERのZIPファイルを選択
購入したAFFINGERのZIPファイルを選択

①のファイルは「親テーマ」、②のファイルは「子テーマ」となっています。

どちらもインストールしていきましょう。

STEP
親テーマのZIPファイルをインストール
「親テーマ」のZIPファイルをインストール

親テーマはインストールしたあと、有効化せずに「テーマページへ移動」をクリックしましょう。

子テーマの方を有効化します。

STEP
子テーマのZIPファイルをインストールして「有効化」をクリック
子テーマのZIPファイルをインストールして「有効化」をクリック

子テーマのインストールができたら、「有効化」をクリックしましょう。

有効化の確認

AFFINGER Childが「有効」となっていれば、テーマのインストールは完了です。

②:必須プラグイン「Gutenberg用ブロックプラグイン2」のインストール

続いて、AFFINGER6でブロックエディターを利用するのに必須のプラグイン「Gutenberg用ブロックプラグイン2」をインストールしましょう。

STEP
「プラグイン」→「新規追加」をクリック
「プラグイン」→「新規追加」をクリック
STEP
「プラグインのアップロード」をクリック
「プラグインのアップロード」をクリック
STEP
「ファイルを選択」をクリック
「ファイルを選択」をクリック

ちなみに、アップロードするZIPファイル名は「st-blocks.zip」です。

STEP
「プラグインを有効化」をクリックして追加完了
「プラグインを有効化」をクリック

これで、Gutenberg 用ブロックプラグイン2がプラグインに追加されました。

追加完了

AFFINGER6の初期設定②:管理メニューの初期値設定

AFFINGER6の初期設定、管理メニューの初期値設定を行います。
(AFFINGER6のテーマ・プラグインのインストールが終わると設定可能)

手順は下記です。

AFFINGER管理

①:AFFINGER管理をクリック。

saveをクリック

②:「Save」をクリック。

これで、管理メニューの初期値設定が完了しました。

AFFINGER6の初期設定③:カラー・デザインパターン設定

AFFINGER6初期設定の3つ目、カラー・デザインパターン設定を行います。

サイト全体のイメージが決まるので慎重に決めていきましょう。デザインはあとから直すこともできますが、初心者がやると時間がかかります。

私は好みの設定にしないで50記事以上書いてからデザインを直すことになり、時間がとてもかかりました。

あなたがそうならないためにも、カラー・デザイン設定は妥協せずに決めてくださいね。

①:カラーパターン設定

サイトの雰囲気を決める「カラーパターン」を設定していきます。

全体設定

AFFINGER管理の「全体設定」をクリック。

カラーパターン

上記でサイト全体のカラーパターンを設定することができます。

なお、以下の12種類のカラーパターンが準備されています。

ここでは、あなたのサイトの全体のイメージに合った色を選択してください。

  • かわいいサイトなのか?
  • 大人な雰囲気のサイトなのか?
  • キレイなサイトなのか?

サイトのジャンルなどでも選ぶべき雰囲気は変わってきますよ。

どうしてもサイトの雰囲気が決められない、わからない場合は他の方のサイトをみておくと良いでしょう。

なお、AFFINGER6のデザインについては「AFFINGER6の評判・口コミをピックアップ|37のデザイン例もご紹介」でおしゃれなサイトをまとめてあるので参考にしてください。

AFFINGER6は細かくデザインを変更できます。AFFINGER6ならではのカスタマイズを楽しんでみてくださいね。

②:デザインパターン設定

あなたの選んだカラーパターンと合うデザインパターンを選びましょう。

AFFINGAER管理の全体設定「デザインパターン」で変更できます。

designパターン

ちなみに、それぞれの雰囲気は下記のとおりです。

あなたのイメージに合うデザインパターンを探してみましょう。

おすすめなのは、シンプルなデザインの「ブログ(初心者おすすめ)」です。

AFFINGER6の初期設定④:フォントサイズ・行間設定

AFFINGER6初期設定の4つ目、「フォントサイズ・行間設定」をしておきましょう。

文字が小さかったり、行間が詰まっていると読みにくい記事になってしまいます。記事を書き始める前に、しっかりと設定しておきましょう。

AFFINGERでは、細かく設定することが可能です。

フォントサイズ・行間設定

「AFFINGER管理」の「全体設定」でフォントのサイズを変えることができます。

フォントサイズ・行間を好みに合わせて変更しましょう。

初期値でも問題はありませんが、行間を少し広くするのが読みやすくておすすめです。

参考までに私のサイトの設定を載せておきます。

  • スマホ閲覧時
項目サイズ(px)行間(px)
基本1830
記事タイトル2235
H2タグ2027
H3タグ1927
H4タグ1827
記事一覧1724
  • タブレット閲覧時
項目サイズ(px)行間(px)
基本2030
記事タイトル2740
H2タグ2435
H3タグ2232
H4タグ2131
記事一覧2030
  • PC閲覧時
項目サイズ(px)行間(px)
基本1527
記事タイトル4040
H2タグ4040
H3タグ3030
H4タグ1626
記事一覧1626
  • 全体
全体px
段落下の余白20

扱うジャンルによって、文字の大きさ・行間の適正な値は変わってきます。あなたのサイトに訪れる読者に合わせて変更しましょう。

AFFINGER6では、以下のように簡単にフォントの種類も設定できます。

フォントの種類

フォントの種類を変えるとサイトの雰囲気も変わります。

【左】デフォルト、【右】設定変更

あなたのサイトにあったフォントの種類を設定してみましょう。

AFFINGER6の初期設定⑤:見出しの設定

見出しデザイン

AFFINGER6初期設定の5つ目、「見出しの設定」をしていきましょう。

カスタマイズをしながら見出しを確認できるように、トップページを「デザイン確認用」に変えておくと便利です。

STEP
まず固定ページを作成する
固定ページ作成

上記のようなテスト用固定ページを作成して、「公開」をしましょう。

STEP
固定ページのIDを確認
固定ページを公開してIDを確認

固定ページ一覧から、先ほど作ったページの「ID」を確認します。

STEP
固定ページをトップページにする
固定ページをトップページにする

「AFFINGER管理」の「トップページ」にIDを入力。これで、カスタマイズの画面で見出しの変化を確認できるようになります。

外観の「カスタマイズ」から、見出しのデザインを変更していきましょう。

STEP
「外観」→「カスタマイズ」を選択
外観の「カスタマイズ」を選択
STEP
「見出しタグ/テキスト」を選択
「見出しタグ/テキスト」を選択
STEP
変更を確認しながら見出しデザインを変更する
見出しデザインを変更

AFFINGERには見出しの種類がたくさんあります。自分のサイトに合う見出しに設定しておきましょう。

オシャレにしようとして、変にカスタマイズしすぎると見づらくなります。グラデーションなどを使うときは、読者が見やすいか注意したいところです。

AFFINGER6の初期設定⑥:ふきだし設定

AFFINGER6初期設定の6つ目、「ふきだし設定」を行っていきます。

AFFINGER管理の「会話アイコン設定」を開くとアイコン画像を8つまで登録しておくことができます。

登録方法は下記です。

AFFINGER管理から「会話アイコン」をクリックする。

会話アイコン設定画面になったら、①キャラの名称、②画像URLを指定して、③「アップロード」をクリックすれば登録完了です。

あとは、投稿画面でいつでも呼び出し可能になりました。

こんな感じ!

設定すれば色々なアイコンを使えるよ!

会話形式にすると、文章を読みやすくするメリットがあります。

また、サイトにあったアイコンを設定しておけば、雰囲気も良くなりますよね。

有料アイコンを考えている場合は、ココナラで探すと良いですよ。

ふきだしを活用できるかで記事の質が変わります。アイコンも3,000円から5,000円でオリジナルで作ってもらえるので、作成する事をおすすめします。

成功しているブロガーさんはみんなオリジナルアイコンを作っていますしね。

AFFINGER6の初期設定⑦:Googleアナリティクス設定

AFFINGER6初期設定の7つ目、「Googleアナリティクスを設定」をしていきます。

サイトを運営する上での必須ツールですので、必ず連携しておきましょう。

Googleアナリティクスをまだ登録していない方は「ワードプレスでのグーグルアナリティクス設定方法・使い方」で解説しているのでそちらをご覧ください。

では、AFFINGERでの設定方法について解説します。

AFFINGER管理から、「Google・広告/AMP」を選択して、アナリティクスコードの欄にトラッキングIDまたは測定IDを入力しましょう。

Googleアナリティクス設定

アナリティクスのコードを貼れば、連携完了です。

AFFINGER6の初期設定⑧:Googleサーチコンソール設定

AFFINGER6初期設定の8つ目、「Googleサーチコンソール設定」も必須です。

Googleアナリティクスの設定・連携が終わったら、続けてサーチコンソールも必ず連携しましょう。

ログインしてURLを登録するだけなので、30秒ほどで終わります。

下記の記事で画像付きで詳しく解説しているので、わからない方は参考にしてください。

連携の詳しいやり方は「ワードプレスでのグーグルサーチコンソール設定方法と使い方」をご確認ください。

AFFINGER6の初期設定⑨:SNS設定

AFFINGER6初期設定の9つ目、「SNSの設定」について解説します。

設定方法は下記です。

SNS/OGP

設定は、AFFINGER管理の「SNS/OGP」で設定できます。

非表示設定

上記のように、どのSNSシェアボタンを表示させるかも設定できます。

あなたのサイトにあったシェアボタンに変更しておきましょう。

Twitter設定

Twitterやフェイスブックのアカウントを持っている場合、上記のようにOGP設定をしておきましょう。

  • Twitter・Facebookへの流入
  • 読者の信頼性の確保
  • 権威性につながる

記事を読んだ後に、あなたが信頼できる人か確認したいと思う読者はたくさんいます。

また、権威性・信頼性という部分でもSNSと連携させておくことは重要です。

AFFINGERでは簡単に設定できるので、ココで済ましておきましょう。

AFFINGER6の初期設定⑩:プラグインのインストール

AFFINGERとプラグイン

AFFINGER6初期設定の10コ目、「プラグインのインストール」をしていきましょう。

プラグインはブログ運営を効率化させてくれるものの、入れすぎてしまうとサイトスピードにも影響するので必要最低限にしておくと良いです。

AFFINGER6に導入すると良いプラグイン

AFFINGER6で最低限必要なプラグインは以下の通り。

  • セキュリティ対策プラグイン
  • 目次作成プラグイン
  • サイトマップ送信プラグイン
  • バックアッププラグイン
  • お問合せフォーム作成プラグイン

プラグイン同士の相性もあるので、不具合が出ないか確認しながら導入しましょう。

もし他の方が導入していても、あなたにとっては不要なプラグインもあります。不要になったプラグインはアンインストールするようにしましょう。

実際に使用しているプラグインを紹介

参考に私がAFFINGER6に入れているプラグインは以下の通りです。

  1. ABテスト3(有料AFFINGER専用プラグイン)
  2. AFFINGERタグ管理マネージャー4(有料AFFINGER専用プラグイン)
  3. Aurora Heatmap(ヒートマップ)
  4. BackWPup(サイトのバックアップ)
  5. Contact Form 7(お問い合わせフォーム)
  6. EWWW Image Optimizer(画像圧縮)
  7. Google XML Sitemaps(サイトマップ送信)
  8. Gutenberg(必須プラグイン)
  9. Gutenberg 用ブロックプラグイン2(AFFINGER必須プラグイン)
  10. ProfilePress(プロフィール設定)
  11. Pz-LinkCard(外部リンクのカード表示)
  12. Rich Table of Contents(目次)
  13. Rinker(商品リンク作成)
  14. Show Article Map(内部リンクの可視化)
  15. SINPLE BLOG DESIGN(有料装飾プラグイン)
  16. W3 Total Cache(キャッシュ)
  17. Yoast Duplicate Post(記事のリライト)
  18. SiteGuard WP Plugin(セキュリティ対策)

AFFINGER6の初期設定⑪:デザイン済みデータの設定

AFFINGER6初期設定のラスト、デザインの設定をショートカットできる「デザイン済みデータの配布」について解説します。

注意点としては・・・

  • 別売りの有料プラグインが必要
  • 初期設定の状態で行う

ということがあります。

また、デザインを変更することになった際にも注意が必要です。

私がデザイン済みデータを利用したときも、デザイン変更後に見づらくなったと指摘がありました。

「デザイン済みデータ」を利用しても、調整が必要になるのでそこは理解しておきましょう。

なお、「デザイン済みデータ」の利用の仕方は、公式サイトで詳しく解説されています。

公式のデモサイトを確認する

「デザイン済みデータ」の設定の仕方

まとめ|AFFINGER6の初期設定おわりっ!

この記事ではAFFINGER6の初期設定に関して解説しました。

この記事内容の通り設定すれば、AFFINGER6初期の設定は完了できます。

その他、細かい設定については、運営しながら少しずつ変更していきましょう。

素晴らしいテーマAFFINGER6と共に、稼ぐブロガーへと進化していきましょう!

それでは、また!

▼AFFINGER6を使ったレビュー記事はコチラより

AFFINGER6の評判・レビュー|37のデザイン例もご紹介

\最強のテーマで稼げるブロガーに/

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

コメントは日本語で入力してください。(スパム対策)

CAPTCHA

タップできる目次
閉じる