AFFINGER6のカスタマイズ方法を紹介

今回は、このような方に向けて書いています。

「AFFINGER6のカスタマイズは難しい」とか、「設定が多くて大変」という方が多いので、この記事ではそのあたりを解説できたらと思っています。

この記事では、AFFINGER6をカスタマイズして自分好みのデザインにする方法について解説していきます。AFFINGER6の購入を考えている方、WordPressテーマ選びで悩んでいる方の参考になると嬉しく思います。

AFFINGER6の評判。乗り換えて使ってみてわかった凄さを紹介

続きを見る

AFFINGER6のテーマを購入する方法

AFFINGER6を使うためには、販売サイトで購入する必要がありますがいくつか種類があるので解説していきます。

購入できるAFFEINGER6の本体は2種類

AFFINGER6を使うためには、以下のどちらかを購入する必要があります。

AFFINGER6本体

AFFINGER6EX

必要に応じてプラグインを購入する

AFFINGER6用のプラグインが販売されています。必須ではないので使ってみたいという方は専用のプラグインを購入して使ってみてください。プラグインの数も多いのですべて購入すると金額も大きくなるのでおすすめしません。

必要だと感じたプラグインのみで事足りると思います。参考までに購入できるプラグインを紹介しておきます。

AFFINGER6のテーマのインストール手順

購入したAFFINGER6のインストール手順を紹介していきます。お手元にダウンロードしたAFFINGER6のzipファイルを準備してください。

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

購入したAFFINGER6をWordPressにインストールしていきます。以下の手順でテーマを設定してみてください。

AFFINGER6インストールの確認

AFFINGER6をインストールした直後の画面は上の画像のような感じです。この状態を見ると何から手を付けていったらいいのかと不安になりますよね。

ここまでできていたらインストール完了です。次から本題のAFFINGER6のカスタマイズに入っていきます。

初期設定 - AFFINGER6のカスタマイズ

AFFINGER6の初期設定から始めていきます。

画面中央にある青い「Save」ボタンを1回クリックして下さい（初期値が設定されます）

書いてある通り、１度だけ「Save」ボタンをクリックして初期設定をしていきます。ちなみに見た目が以下のように初期値の色が設定されます。

全体設定 - AFFINGER6のカスタマイズ

「AFFINGER 管理」の「全体設定」の中で全体に関わる設定をしていきます。主に色の設定、レイアウト、フォントなどの設定をしていきます。

最初に「Save」ボタンを押した時にカラーが青になったのはカラーパターンの初期値が青（ビジネス）になっているためです。試しにここでご自分の好きなカラーに変更して保存しサイトのカラーを変更してみましょう。

メニュー設定 - AFFINGER6のカスタマイズ

AFFINGERのメニューの設定では、PC用画面でメニューを表示するか、しないか。スマホでメニューを表示するか、しないかなどの設定をします。

実際にメニューを作ったり、内容を作成する場所は「ダッシュボード」の「外観」の「メニュー」で行います。その中で「ヘッダーメニュー」、「フッターメニュー」、「サイドメニュー」などを作成し設定をします。

一例としてサイドメニューにカテゴリーを表示する手順を紹介していきます。

カテゴリーを作成する

「ダッシュボード」 → 「投稿」 → 「カテゴリー」でカテゴリーを作成します。ここではカテゴリーA、カテゴリーBを作成しました。

メニューを作成をする

メニューの作成は、「ダッシュボード」　→　「外観」　→　「メニュー」で表示するメニュを作成していきます。

以下の手順でメニューを作っていきます。

ウィジェットで設定をする

ウィジェットは、「ダッシュボード」　→　「外観」　→　「ウィジェット」で設定していきます。

サイドバートップに左側にある「01_STINGERサイドバーメニュー」をドラッグ・アンド・ドロップします。（ドラッグ・アンド・ドロップするだけで保存されます）

無事にサイドメニューにカテゴリーが表示されました。同じような方法でいろんな項目を表示できます。

ヘッダー設定 - AFFINGER6のカスタマイズ

次はヘッダーの設定をしていきます。

ヘッダーの設定でできることは以下の４点です。順に解説していきます。

ヘッダーエリアの設定

ヘッダーエリアは画像の青い部分です。例えば、高さを変える場合は、「PCヘッダーの高さ（px）」に入力し調整します。

ヘッダー左にある「affinger-test」はサイト名です。こちらはWordPressの設定で「ダッシュボード」　→　「設定」　→　「一般」のサイト名で変更できます。

サイト名の上にある「Just another WordPress site」はキャッチフレーズです。こちらはWordPressの設定で「ダッシュボード」　→　「設定」　→　「一般」のキャッチフレーズで変更できます。

ヘッダー画像の設定

「AFFINGER 管理」の「ヘッダー画像エリア」には、ヘッダー画像はカスタマイザーで設定しますとあります。

カスタマイザーというのは「外観」　→　「ヘッダー画像」です。

ヘッダーコンテンツの設定

ヘッダーコンテンツ設定は、ヘッダー画像のエリアにテキストを表示する設定です。表示したいテキストを入力し、保存するだけです。

記事スライドショー設定

ヘッダー画像エリアに記事のスライドショーを表示することができました。これでヘッダー画像の設定は一通り終了です。

ヘッダー下 / おすすめ設定 - AFFINGER6のカスタマイズ

ここはヘッダー画像の下にヘッダーカードやサムネイルスライドショーを表示する設定を行います。

ヘッダーカードの設定

サムネイルスライドショーの設定

「ヘッダー画像下ウィジェットエリアにサムネイル画像のスライドショーを表示します。」という部分で全ページを選択すると記事が表示されます。

おすすめ記事一覧の設定

トップページの設定 - AFFINGER6のカスタマイズ

トップページのレイアウトを変更したり、カテゴリをタブで表示する設定ができます。

投稿・固定記事設定 - AFFINGER6のカスタマイズ

投稿記事や固定記事でサイドバーや記事の下に表示するものを設定できます。上から順番に設定をしてみてください。

SNSの設定 - AFFINGER6のカスタマイズ

SNSの設定では、トップページや記事に表示するSNSアイコンの設定ができます。ここで設定できる点は以下になります。

設定できるアイコンの種類は、Twitter / Facebook / Pocket / はてブ / Pintarest / LINE / コメント / コピーとなっています。

SEO関連設定 - AFFINGER6のカスタマイズ

SEOの設定では、主に以下の設定をすることができます。

注意点は表示速度の優先設定です。こちらを有効にすると、AFFINGER6の多くの機能が制限されて使えなくなります。

実際に表示速度優先設定を有効化した効果がどのくらいあるのかわかりません。自分で制限されたくない機能があるのであれば、無効にしておくとよいでしょう。

Google連携に関する設定 - AFFINGER6のカスタマイズ

Googleのアドセンスの設定ができます。AFFINGER6ではアナリティクスのコードを設定し、表示する場所の設定をするだけで自動で広告を表示してくれます。

AFFINGER6にして、かなり運用が楽になりました。広告収入を得るためにペタペタ貼りすぎているサイトがありますが、逆にすぐに離脱したくなるので貼りすぎには注意です。

近い位置に貼ると、同じ広告が表示されたりするので鬱陶しいと感じる人が多いようです。

会話アイコン設定 - AFFINGER6のカスタマイズ

会話アイコンを設定できます。デフォルトでは８個まで設定できます。

step
1アイコン画像の登録

アイコン画像は100px以上推奨となっています。自分は200px x 200pxのアイコンサイズにしています。右上にある「Save」ボタンで保存するのを忘れずに。

step
2ショートコードを貼り付ける

クラシックエディタをつかっているので、ショートコードを貼り付けて使用しています。

step
3完成です

会話アイコンを表示できます。アイコン名は任意です。入力しなければアイコン名を非表示にできます。「アフィンガー先生」くらいの長さだと改行されてしまいます。

その他の設定 - AFFINGER6のカスタマイズ

その他の設定では、以下のような細かい設定をすることができます。

Font Awesomeを使用する

AFFINGER5からAFFINGER6にアップデートした人はFont Awesomeのアイコンが表示されなくなったという人がいたそうです。

Font Awesomeはバージョンアップしていくため、AFFINGER6も対応してアップデートしてくれるといいですが、現状はFont Awesomeの最新より古い状態のままです。

遅延読込の設定

WordPress本体には、LazyLoad機能が備わっているそうです。遅延読込をチェックすると画像が表示領域に入ったところで読込を始めるため初期ロード時の重さを解消することができます。

タイトルも同様に遅延できますが、パフォーマンス的にタイトルを遅延させる意味は効果はないと思いますがフワっと表示されるため、オシャレに見えるかもしれません。

AFFINGER6のデザインをカスタマイズしたい場合

AFFINGER6でデザインをカスタマイズしたい場合、公式にあるデザインテーマを使用するという方法もありますが自分の好みのテーマがない場合は自分でカスタマイズしていくことになります。

ここからはパーツをカスタマイズしていく方法をご紹介していきます。

見出しをカスタマイズする

例えば、記事の中の小見出しはH2,H3...となっています。見出しを変えるだけでも見た目は大きく変わりますね。

2色アンダーラインの見出し

「H2タグ」の項目をクリックして、カスタマイズしていきます。よく見る２色のボーダーのタイトルです。以下の画像のような感じです。

「2色アンダーラインに変更（※要ボーダー色）」を選択して、ボーダー２色選ぶと簡単にかっこいい見出しデザインが出来上がります。

吹き出しデザイン

このブログの見出しは以下のようなデザインにしています。「吹き出しデザインに変更」を選択。背景と文字色を設定するだけです。

サイドバーにプロフィールを表示する

このブログのサイドバーに表示されているプロフィールです。上記の画像のように表示するには、ウィジェットで設定します。「サイドバートップ」に「11_STINGERプロフィールカード」をドラッグ・アンド・ドロップするだけです。

アイコンを表示するためには、以下の場所でユーザーの設定をしていきます。

いつからかわからないですが、プロフィール画像をアップロードするためにはGravatarというアバターを作成していろんなサービスで利用できるWebサービスを使わなければならなくなっていました。

プラグインを使うか自分でカスタマイズするといった方法で回避できるようですが、WordPressは面倒な機能を入れましたね。

まずは以下の場所まで移動してください。

以下の画像のようにプロフィールに使いたい画像をアップロードすることで、設定することができました。AFFINGER6簡単でいいですね。

プロフィールの上に表示するヘッダー画像もアップロードして設定することができます。影を付けたり角丸にしたりカスタマイズすることができます。

AFFINGER6のカスタマイズ方法まとめ

今回はAFFINGER6を利用して３ヶ月弱ですが、利用して良かったというのが正直な感想です。

デザインのカスタマイズは慣れていない人にとっては簡単ではないと思いますが、AFFINGER6であれば情報も多いので比較的思い通りにカスタマイズが可能だと思います。

カスタマイズする方法は、２つの方法があります。

CSSを理解できると、カスタマイズの幅が広がります。本格的にカスタマイズしたいという方は、簡単なスクールに通うのもありだと思います。まずは無料で学習できるProgateあたりから始めてみてください。

AFFINGER6を使ってみたいという方は、ぜひ公式サイトをご覧ください。AFFINGER6に関する情報をたくさん得ることができると思います。

テックアカデミーの評判。現役フリーランスが人気の理由を丁寧に解説

続きを見る