【コピペでOK】アフィンガー6(ACTION)簡単設定

affinger6

ワードプレスのテーマとして、有名な「アフィンガー6(ACTION)」。

 

テーマの設定は初心者には難しく、途中で挫折するユーザーが多くいます。

 

この記事では、月に500万円の売上をあげてる、私が実際に使っている設定を公開してます。

 

記事を見ながら設定するだけで、下記と同じ見た目のサイトを作れます。

FXの歩き方

FXの歩き方」では表示速度優先の設定をしているため、本来使うべきアフィンガー6(ACTION)の機能を一部使っていません。
*上記サイトではアイキャッチ画像、SNSへのリンク表示などは使っていませんが、初心者の方は使った方が良いです。

 

アフィリエイトのプロが使っている設定を真似て、いったん運用してみてから自分好みに変更すれば、初心者が挫折しやすい設定を簡単にでき、記事の作成に集中できます。

 

手順通りにやれば、1時間程度でサイトの初期設定は終わります。

 

基本、コピペでできるので、がんばってくださいね ^^

 

ワードプレスの初期設定

設定 → 一般 → WordPress アドレス (URL)、サイトアドレス (URL)をhttpからhttpsに変更して、サイトにログインしなおす。

httpsに変更

 

これをすることにより、以後作られるファイルが全てhttps対応のものとなるので、必ず最初にする。

注意
httpsの設定がサーバーでのドメイン設定時に、あらかじめ必要な場合があるので、注意!

エックスサーバーはhttps(ssl化)は事前にサーバー側で設定が必要。

 

「設定 → パーマリンク設定」 カスタム構造に

/%postname%-%post_id%/

を張り付ける

「post_id」は記事IDを付与してくれるので、URLの重複が防げるうえに、記事IDの確認が簡単になるのでオススメ。

記事のURLにIDを付与

 

記事のIDの確認方法

 

アフィンガー6のマニュアルを見て、テーマと子テーマのインストールをしてください。

手順1
「外観」>「テーマ」より「新規追加」をクリック
手順2
テーマのアップロード
手順3
ファイルを選択でまず「親テーマ」を選択(AFFINGER6の場合は「affinger.zip」)
手順4
「今すぐインストール」をクリック
手順5
子テーマも同様にインストール

インストール後、「外観 → テーマ」 「AFFINGER Child」を有効化する

子テーマを有効化

 

子テーマを有効化しておかないと、親テーマがバージョンUPで更新されたときに、カスタマイズしたCSSなどが上書きされて無効化されてしまう。

アフィンガー6の管理設定

「AFFINGER 管理」をクリックして、「Save」をクリックし、初期値を設定アフィンガー6の初期値を設定

 

FXの歩き方では、カラーを緑に変更して使っていますが、初心者の方はデフォルトの「青(やさしい)」を使って、後々必要に応じてカラーを変えましょう。
*デフォルトの設定が最もバランスが良い配色のため、それをまず使うのが無難

 

フォントサイズについて
フォントサイズは、私が見やすいと思ったサイズを設定していますが、デフォルトのままでも問題ありません。

ただ、後でフォントサイズを変えるとサイトの見栄えが大きく変わってくるので、フォントサイズについては変えるか、デフォルト設定を使うか最初に決めましょう!

 

フォントサイズは大きくした方が見やすいサイトになります。

ただ、スタイリッシュなサイトを目指すならデフォルトのフォントサイズでも良いかと思います。

フォントサイズ詳細

 

全体設定

 

メニュー設定

 

ヘッダー設定

 

FXの歩き方では使っていないので、デフォルト設定のままです。

必要に応じてアフィンガー6のマニュアルを見ながら設定してください。

おすすめ設定

 

トップページ設定

 

タイトル
投稿日と更新日の両方を表示するのはNG!投稿日が検索で表示されてしまうことが多く、古い記事とみなされクリック率が下がるので、必ず更新日のみを表示すること
投稿・固定記事設定

 

SNS設定FXの歩き方では、スマホでの表示速度UPの観点から、SNSボタンは非表示にしていますが、通常は表示させた方が良いです。

 

「サーチコンソールHTMLタグ」は必ず設定しましょう。Google連携に関する設定

 

「会話風吹き出しプラグイン2」をFXの歩き方では使っているので、ここでは設定していません。

通常は吹き出しアイコンを設定します。

 

この顔画像の部分が吹き出しアイコンです。

 

ここで吹き出しアイコンを設定する場合は、「会話アイコンを少し大きく(※80px以上の正方形画像推奨)」にチェックを入れてください。

ちなみに後で出てきますが、FXの歩き方ではカスタムCSSで無理やり100pxで表示しています。

会話アイコン設定

 

その他の設定

 

カスタマイズ(アフィンガー6:テンプレート)の初期設定

「外観 → カスタマイズ」

デフォルト設定を使う場合は「使わない」を選択。

細かい色設定をしたい場合はここで色を設定。全体カラー設定

 

ロゴ画像 / サイトのタイト

 

サイト基本情報

 

ヘッダー画像

 

通常は設定しません。

背景画像

 

基本エリア設定

「外観 → カスタマイズ → 基本エリア設定」

カラーパレット

 

基本はデフォルトでOK

背景色

 

headerエリア

 

ヘッダーエリア

 

ヘッダー画像エリア上 / 下ウィジェット

 

ヘッダーカードエリア

 

header以下のエリア

 

mainエリア(記事) 

 

サイドバー

 

フッターエリア

 

記事一覧の区切りボーダー

 

ページャーとPREV NEXTリンク

 

メニュー

「外観 → カスタマイズ → メニュー」

通常は「外観 → メニュー」でメニュー内容を設定してから、ここでメニューの位置等を設定します。

グローバルナビ

 

サイドバー用(右カラム)に専用のメニューを設定する場合に使います。

ウィジェットでカラムの設定をすることが多いので、使う機会はあまりないです。
グローバルナビ(サイドバー用)

 

フッターナビ

 

すべての位置を表示

 

各メニュー設定

「外観 → カスタマイズ → 各メニュー設定」

カラーパレット

 

PCヘッダーメニュー

 

サイドメニューウィジェット

 

スマホメニュー(スマホヘ

 

スマホミドル / 横列メニュー

 

スマホフッターメニュー

 

ガイドメニュー

 

ボックスメニュー

 

見出しタグ(hx)/ テキスト

「外観 → カスタマイズ → 見出しタグ(hx)/ テキスト」

カラーパレット

 

記事タイトル

 

H2タグ

 

H3タグ

 

H4タグ

 

H5タグ

 

まとめタグ

 

ウィジェットタイトル(サイドバー)

 

カテゴリ

 

投稿日時・ぱんくず・タグ

 

引用部分の背景色

 

NEW ENTRY & 関連記事

 

タグクラウド

 

テキスト色一括変更

 

オプション(その他)

「外観 → カスタマイズ → オプション(その他)」

カラーパレット

 

記事内のWebアイコン 

 

リスト(数字・チェック/ボックスタイプ)

 

タイムライン

 

ステップ / ポイント

 

ブログカード / ラベル

 

表の見栄えを一括設定せずに、それぞれの表個別で行の色等を変えたほうが無難です。

一括設定すると、見出しがない表などは、逆に見栄えが悪くなったりします。

例:1行目を太字にした場合は1行目は太字なのに、2行目は普通の字。table(表)

 

検索フォーム

 

RSSボタン 

 

SNSボタン

 

お知らせ

 

おすすめ記事 

 

見出し付きフリーボックス

 

メモボックス 

 

スライドボックス 

 

問合せボタン(ウィジェット) 

 

オリジナルボタン(ウィジェット)

 

会話ふきだし

 

目次プラグイン(すごいも 

 

コンタクトフォーム7送信ボタン) 

 

プロフィールカード 

 

サムネイル画像 

 

TOPに戻るボタン

 

ウィジェット

「外観 → カスタマイズ → ウィジェット」でも設定できますが、基本的には「外観 → ウィジェット」で設定します。

アフィンガー6のマニュアルを見て個別に設定してください。

アフィンガー6のマニュアルはアフィンガー6を購入すると見れます。ウィジェット

 

ホームページ設定

 

アフィンガー6の吹き出し(画像)は小さいので、こちらのCSSを入力して、吹き出しを大きくしましょう。

.st-kaiwa-face,
.st-kaiwa-face2 {
width: 100px;
}
.st-kaiwa-face img,
.st-kaiwa-face2 img {
width: 100px;
}
.st-kaiwa-face-name,
.st-kaiwa-face-name2 {
max-width: none;
}

追加 CSS

 

プラグインの初期設定

 

AddQuicktag:ショートコードやタグを登録して、文章に挿入できるプラグイン

 

タグを登録しても、チェックボックスにチェックを入れないと、エディタで表示されないので注意!
AddQuicktag

 

 

Advanced Editor Tools (previously TinyMCE Advanced):投稿エディタの拡張、強化

ツールバーの整理

ツールバーのオプション設定

ツールバーの上級者向け設定 

 

 

Autoptimize:CSS、JS、画像の最適化で表示速度を高速化

autoptimizeの設定

autoptimizeのcss設定

autoptimizeのオプション設定

 

 

Captcha by BestWebSoft:ログイン時に数字の入力を追加するプラグイン

ログイン時に数字の入力を追加するプラグイン

Captcha by BestWebSoftの設定

 

 

Classic Editor:旧エディタの画面に戻す。ブロックエディタ(クーテンベルク)を使用する場合は不要

Classic Editorの設定

 

 

Edit Author Slug:ログインIDを外部からわからなくし、不正ログインを防ぐ。外部に見えるユーザー名を任意のものに変更できる。

デフォルト設定でOK。設定の変更の必要なし

 

 

EWWW Image Optimizer:自動で画像圧縮をし、サイトの表示スピードを高める

 

EWWW Image Optimizerの設定

EWWW Image Optimizerの設定完了

 

Google XML Sitemaps:Google向けのサイトマップ作製。コンテンツを検索エンジンに認識してもらい、検索順位を高める

 

Google XML Sitemapsの設定

Google XML Sitemapsの優先順位設定

Google XML Sitemapsの重要度設定

Google XML Sitemapsの重要度数字設定

 

 

Limit Login Attempts Reloaded:WordPressのログイン回数を制限。不正ログインを防ぐ

 

Limit Login Attempts Reloaded

 

 

PS Auto Sitemap:ユーザー向けのサイトマップを作製。ユーザービリティが向上し、アクセス数が増加。

 

PS Auto Sitemapの設定

 

設定後、固定ページに下記を記入するとサイトマップが表示される
<!-- SITEMAP CONTENT REPLACE POINT -->

 

 

Rinker:Amazon・楽天・Yahoo!ショッピングを一括で紹介できる商品ボックス。物販系のサイトは必須。

簡単に下記のような商品リンクが作れます。

Rinkerの設定

参考 Rinker導入はこちらから

ダウンロードはこちら

 

 

Search Regex:文字やコードの検索、置き換え。

通常は使わないので、普段はプラグインを無効化しておく。

広告コードや数字データが変更になった時、変更するのが簡単になる。

 

 

Simple Post Notes:記事一覧や投稿画面にメモ書きができるようになる

特に設定する必要は無し。

Simple Post Notesの設定

 

UpdraftPlus:サイトのバックアップ。BackWPUpが有名だが、こちらの方が使いやすくおすすめ。

 

サーバー上にバックアップファイルが作られるが、念のため月に1回データをダウンロードして、自分のPCに保存したほうがより安全。

UpdraftPlusの設定

UpdraftPlusのバックアップ設定

UpdraftPlusのバックアップ方法

 

 

Woody code snippets:ショートコード作成プラグイン。よく使いまわすデータや画像の管理に最適

特に設定の必要は無し

Woody code snippetsの設定

Woody code snippetsの使い方

 

 

WP Multibyte Patch:ワードプレスの日本語最適化。不具合修正。

設定は特に必要ありません。

入れないと様々な不具合が出る可能性があるので、インストールしましょう。

 

 

WP User Avatar:投稿者のアバター画像の設定。

設定自体は不要。

ユーザー → 編集 → プロフィール写真で画像を設定したら完了。

WP User Avatarの設定方法

 

WP User Avatarの設定完了後

 

 

WP-Optimize:データを最適化・削減し、表示速度を高速化

 

WP-Optimizeの設定

 

アフィンガー6のプラグイン

アフィンガー専用のプラグインです。

基本的にはプラグインを導入して有効化すればOKです。

 

Affinger Lasy Load:画像・iframe遅延読み込み

 

AFFINGERタグ管理マネージャー4:アフィリエイトや広告をはじめとした様々なコードの一括管理

 

Gutenberg 用ブロックプラグイン2:記事作成ブロックエディター

 

SUGOI MOKUJI(すごいもくじ)[PRO]:目次自動作成

 

ステ子:よく使うコンテンツを登録し、いつでも簡単に呼び出せるようにするソース挿入型の「テンプレート管理」プラグイン

 

ブログカード外部URL対応プラグイン2:外部リンクをブログカード風にリンクします(外部のサイトも自動スクリーンショットによりサムネイル表示が可能)

 

会話風吹き出しプラグイン2:会話ふきだしプラグイン
*多くの吹き出しを使う場合に必要だが、通常は買わなくてもアフィンガー6についてる吹き出し機能で十分

 

注意
「PVモニター」という記事ごとのアクセスやランキングを確認できるプラグインがあるが、サイトが重くなるので使わないほうが良い。

アフィンガー6専用のプラグインは基本的にプラグインをONにすればOK。

 

細かい設定が必要なプラグインもあるが、それはアフィンガー6のマニュアルを見ながら設定してください。

 

テーマ「アフィンガー6」の設定 まとめ

まとめ
  • 初期設定はコピペでOK
  • プラグインは最小限に
  • 設定項目が多く、初心者は難しい

 

記事の通りにすれば、意外に簡単に設定が終わったかと思います。

 

「あんな機能やこんな見栄えを使いたい」そういう気持ちはよくわかります。

 

ただ、騙されたと思って、今回の設定で記事を作ってみてください。

 

思っている以上にスムーズに、見栄えの良い記事を作れるはずです。

 

慣れてきてから、自分好みにサイトをカスタマイズすることをおすすめします。

この記事が役に立ったら、ブックマークか、SNSでシェアしていただけると嬉しいです ^^

最後までお読みいただきありがとうございました。