AFFINGER5

アフィンガー5にデザインテンプレートを設定する方法【画像説明付きで絶対できる】

アフィンガーにデザインテンプレートを設定する方法【誰でも簡単にできる・画像説明付き】

 

こまりくん
アフィンガー5(AFFINGER5)を買ったけど、自分でデザインを設定するのが大変!

ぎもんさん
手軽におしゃれなデザインに変更したい!!

 

この記事ではこんな疑問にバッチリお答えいたします。

 

ワードプレス有料テーマ。
「アフィンガー5(AFFINGER5)」

 

購入して使ってみたはいいけど、お洒落で見やすくキレイにカスタマイズできない...と思ったことはないですか?

 

そんな方は必見!
実はアフィンガー5(AFFINGER5)はデザインテンプレートというものがあり、設定するだけで誰でも素晴らしいデザインにすることができるんです!!

 

でもデザインテンプレートの設定をするのは実はちょっと複雑。

 

そこで、今回の記事ではアフィンガー5(AFFINGER5)にデザインテンプレートを設定する方法を詳しくご紹介いたします。

 

誰でも簡単にできるよう画像付きで説明していくので、是非参考にして下さい!

 

記事の内容

・アフィンガー5のデザインテンプレートとは
・デザインテンプレートを設定する方法
・デザインテンプレートを使用するデメリット
・デザインテンプレートを使用するメリット

 

記事の信頼性

・当ブログでもアフィンガー5を使用。
・デザインテンプレートは「INAZUMA」。
・開設2ヶ月で8000PVオーバー、月間収益5桁達成。
・アフィンガー公式サイトに当ブログが紹介されました(2020/7/14時点)

 

それでは早速記事を見てみましょう!

 

アフィンガー5(AFFINGER5)のデザインテンプレートとは?

アフィンガー5(AFFINGER5)のデザインテンプレートとは?

 

アフィンガー5のデザインテンプレートとは、デザインなどのカスタマイズが調整済みのデータのこと。

 

このデータをワードプレスに適用するだけで、統一感のあるキレイなデザインになります。
もちろんCSSやHTMLなどの特殊な知識も必要なし!

 

手順に沿ってしっかり導入すれば、だれでもすぐに使うことができるんです。

 

アフィンガー5(AFFINGER5)のデザインテンプレートの種類

アフィンガー5のデザインテンプレートの種類

 

デザインテンプレートの設定方法をご紹介する前に、テンプレートの種類をご説明させていただきます。

 

種類は全部で10種類!(2020年12月現在)
まずはこの中で気に入ったテンプレートを見つけましょう!
もう気に入ってるのあるよ!っていう人は飛ばして次に進んで下さい♪

 

デザインテンプレートのダウンロードはこちら↓
デザイン済みデータ配布ページはこちら

 

アフィンガー5、EX版

 

アフィンガー5(EX版で無くとも可)を購入されている方は、次の7つのテンプレートを選んで使用することができます。

 

AFFINGER5デザインテンプレート①Tidy

Tidy

キャッチコピーは「整理された見やすいデザイン」。

トップページデザインが真ん中で2分割されているのが特徴です。
また、記事デザインはh2タイトル見出しの点線がアクセントになっていますね。

 

AFFINGERデザインテンプレート②NOTE.2020

NOTE.2020

キャッチコピーは「使いやすいシンプルイズベストなデザイン」。

とにかくシンプル。
見やすく使いやすいです。迷ったらコレですね!

 

AFFINGER5デザインテンプレート③PINKY

PINKY

キャッチコピーは「TOP写真でインパクトを出すブログデザイン」。

当ブログにはTOP写真はないのですが、サンプルサイトのようにインパクトを出したいならこのテーマです。
アイキャッチ画像が丸いのもポイント♪

 

AFFINGER5デザインテンプレート④HappyDiary 2020

HappyDiary 2020

キャッチコピーは「写真で彩る可愛いダイアリーデザイン」。

写真推しのポップなデザインにしたい場合はこちらがオススメ!
旅行系や育児系などに相性の良いデザインかと思います。

 

AFFINGER5デザインテンプレート⑤Lupine 2020

Lupine 2020

キャッチコピーは「LPなど1カラム向けのワンストップデザイン」。

ランディングページはワンカラムが定番なので、まさにこのテーマがぴったりです。
狙った商品を売りたいランディングページを作りたい方はオススメ!

 

AFFINGER5デザインテンプレート⑥YouTube

YouTube

その名の通り、YouTube動画を埋めることに適したテンプレートです。

ユーチューバーの特設サイトなどに良いかもしれませんね!!
※権利の問題があるためモザイクをかけています。

 

AFFINGER5デザインテンプレート⑦YouTube2

YouTube2

アフィンガー5のデザインテンプレート「YouTube」よりも少し文章多めでアピールできるようなテンプレートです。

※権利の問題があるためモザイクをかけています。

 

アフィンガー5EX版 限定

 

アフィンガー5がEX版の方は、次の2点を追加で選ぶことができます。
通常版のアフィンガー5よりも凝ったデザインの設定などができるテンプレートですよ!

 

AFFINGER5デザインテンプレート⑧MOCHA(モカ)

MOCHA(モカ)

こちらのテーマはEX版のため、EX記事一覧のカードデザイン化ができます。

こまりくん
カードデザイン化ってなに?

下の画像みたいな見た目で記事が表示されることだよ!
トモキ

カードデザイン

 

AFFINGER5デザインテンプレート⑨INAZUMA

INAZUMA

当ブログでも使用しているテーマ。

少しクールでかっこいい印象に仕上がります。
こちらもEX版専用のため、「MOCHA(モカ)」と同じく記事一覧のカードデザイン化ができますよ!

 

AFFINGER5EX / STINGER PRO2EX 限定

 

AFFINGER5EX / STINGER PRO2EX の方は、追加で次のテンプレートも使用することができます。

 

AFFINGER5デザインテンプレート⑩START UP

START UP

START UPは企業のコーポレートサイトにもってこいのテーマ!
おしゃれでSEO対策もされている企業サイトが素早く作れます。

 

アフィンガー5(AFFINGER5)のデザインテンプレート設定方法

アフィンガー5にデザインテンプレートを設定する方法

 

使用したいデザインテンプレートは決まりましたか?
それではさっそく設定する方法を見てみましょう。

設定の流れ

  1. アフィンガー5をインストールした状態にする
  2. デザインテンプレートをダウンロード
  3. プラグインをインストールする
  4. Customizer Export/Importを使う
  5. Widget Importer & Exporterを使う

 

こちらについて順に解説いたします。

 

デザインテンプレート設定の流れ①アフィンガー5をインストールした状態にする

 

まずはじめに、ワードプレステーマを「WING-AFFINGER5 Child」にしましょう。
アフィンガーを導入していない方は、入手してワードプレスに適用させてください。

\今なら当サイト限定特典付き/

AFFINGER5の詳細や購入はこちら


下の画像は「WING-AFFINGER5 Child」にしてから何もしていない状態です。

アフィンガー設定の流れ1

 

デザインテンプレート設定の流れ②デザインテンプレートをダウンロード

 

次に、デザイン済みデータ配布ページより使用したいテンプレートをダウンロードしましょう。(※ここでは、「NOTE.2020」を使用してみます。)

 

アフィンガー設定の流れ2

 

無事ダウンロードできたら、zipファイルを解凍して中身を確認しましょう。

アフィンガーの設定の流れ3

 

  • ウィジェット用
  • カスタマイザー用
  • ご利用前に必ずお読みください.txt
  • テーマ管理用

が中に入っていればOK!

 

メモ

「ご利用前に必ずお読みください.txt」は、一応読んでおきましょう。

 

デザインテンプレート設定の流れ③プラグインをインストールする

 

次に、ワードプレスにプラグインをインストールします。

インストールすべきプラグイン

 

上の2つは必ず必要ですが、一番下の「データ引継ぎプラグイン」は無くてもデザインテンプレートの適用が可能なので、説明を省略いたします。

 

メモ

「データ引き継ぎプラグイン」2,980円(税込)のアフィンガー専用有料プラグイン。
「AFFINGER5 管理」の設定をそのまま引き継ぐためのプラグインです。
これがあれば時短にもなりますが、無くても問題はないため今回は省略。

 

デザインテンプレート設定の流れ④Customizer Export/Importのインストール

 

【管理画面】→【プラグイン】→【新規追加】→検索ボックスに【Customizer Export/Import】と入力。

出てきたプラグインを【今すぐインストール】→【有効化】でインストールは完了です。

 

アフィンガーの設定の流れ4

 

デザインテンプレート設定の流れ⑤Widget Importer & Exporterのインストール

 

【管理画面】→【プラグイン】→【新規追加】→検索ボックスに【Widget Importer & Exporter】と入力。

出てきたプラグインを【今すぐインストール】→【有効化】でインストールは完了です。

 

アフィンガーの設定の流れ5

 

Customizer Export/Importを使う

 

【管理画面】→【外観】→【カスタマイズ】を選択。

その後、メニューの一番下に【エクスポート/インポート】というところがあるので、クリック。

 

アフィンガーの設定の流れ6

 

【ファイルを選択】というところに先ほどダウンロードしたデザインテンプレートファイルの「カスタマイザー用」の中にある「affinger5-export.dat」を選択し、インポートをしてください。

 

アフィンガーの設定の流れ7

 

Widget Importer & Exporterの使い方

 

【管理画面】→【ツール】→【Widget Importer & Exporter】を選択。

【ファイルを選択】というところに先ほどダウンロードしたデザインテンプレートファイルの「ウィジェット用」の中にある「wing-wp.com-sample21-widgets.wie(NOTE.2020の場合)」を選択し、インポートをしてください。

 

アフィンガーの設定の流れ8

 

【ウィジェットをインポート】をクリックして完了です。

お疲れ様でした。
あとはお好きなようにサイドバーウィジェットやカラーを変更して自由にいじればOKですね♪

 

アフィンガー5のデザインテンプレートのデメリット

アフィンガー5のデザインテンプレートを使用するデメリット

 

アフィンガー5にデザインテンプレートを使用するデメリットは、「初心者にはわかりにくい」という点です。

 

私も当時はかなり苦戦しました。
設定方法については公式サイトに一応掲載されているのですが、とにかくわかりにくいです。笑

 

ただ、この点については当記事でわかりやすく画像つきで説明してるので解消されましたね!

 

メモ

アフィンガー5にデザインテンプレートを設定する方法でご紹介している方法を順番に行えば誰でも確実にできるので、ぜひ参考にしていただければと思います。

 

アフィンガー5のデザインテンプレートのメリット

デザインテンプレートを使用するメリット

 

デザインテンプレートを使用するメリットは次の2点。

 

メリット

  • 統一感のあるデザインになる
  • 時間短縮になる

 

アフィンガー5のデザインテンプレートは全て統一感のある綺麗なデザイン。

 

デザインに自信のない人でも、適用するだけでお洒落なブログにすることができます。
また、統一感があることで自然と記事も読みやすくなるので良いことばかりですね♪

 

メモ

しかも「適用するだけで良い」ということは、デザインをいじる時間もかけずに済むということ。
ここで時間をかけなくて済むぶん、時間短縮になり他の作業がはかどりますよ♪

 

 

アフィンガー5でデザインが参考になるサイト紹介

アフィンガー5でデザインが参考になるサイト紹介

 

こまりくん
アフィンガー5のデザインテンプレートを設定して綺麗なサイトになったけど、もっと個性のある素敵なサイトにしたい!
参考になるサイトは知りたい!

 

そんな方のために、ここからはアフィンガー5を使用して作られたデザインがとっても参考になるWEBサイト7つを順番にご紹介していきます。

 

トモキ
同じテーマを使用しているので、自分のサイトデザインい取り入れたりしやすいよ!ぜひ参考に見てみよう!

 

 

アフィンガー5のデザイン参考サイトその1子ども通信教育の比較ランキング - 幼児教材ガイドブック

子ども通信教育の比較ランキング - 幼児教材ガイドブック

 

最初に見たとき「これアフィンガー5なの?」と思ったサイトです。

 

アフィンガー5は洗練されているとかスタイリッシュというイメージを多く持たれていますが、このような育児や教育など子供向けの元気で活発な雰囲気にだってすることが可能ですよ。

 

 

アフィンガー5のデザイン参考サイトその2メンタリスト DaiGo オフィシャルブログ

メンタリスト DaiGo オフィシャルブログ

 

あの有名なDaicoさんのブログです。

 

心理学とかなんやかんやで総合的に判断して選んだかのかどうなのかは知りませんが、Daigoさんもアフィンガー5使ってるんですよ!笑

 

デザイン的なことは置いといて、有名人が使っている!という意味でご紹介しました。

 

 

 

アフィンガー5のデザイン参考サイトその3DEVICES|デヴァイシーズ -理化学機器の擬人化サイト

DEVICES|デヴァイシーズ -理化学機器の擬人化サイト

 

こちらのサイトは完全にアフィンガー5だと思わないですよね!

 

なんなら今でもアフィンガー5で作られているのか疑うほど。

 

トモキ
設定次第でここまでアフィンガー5感を消しているサイトがあるということで、テーマのカスタマイズ性の高さがじゅうぶんわかるね!

 

 

 

アフィンガー5のデザイン参考サイトその4ほたるノート

ほたるノート

 

先ほども記載しましたが「アフィンガー5はスタイリッシュ」の概念を覆すブログデザインですね。

 

色使いがとっても上手で、アイキャッチ画像もマスキングテープで止めたような装飾に設定していること、記事のカードデザインが角丸になっているなどの細かい工夫で全体の印象を柔らかく仕上げています。

 

 

 

アフィンガー5のデザイン参考サイトその5WAROCOM

WAROCOM

 

まさにアフィンガー5らしいデザイン。

 

洗練されていてスタイリッシュでとても読みやすいですね!

 

これくらいのデザインであれば、標準の状態やデザインテンプレートを少し調整するとできてしまうので割と目指しやすいデザインです。

 

 

 

アフィンガー5のデザイン参考サイトその6重ね煮アカデミー ®|「台所は家庭の薬箱」陰陽調和の重ね煮健康料理-横浜・鎌倉

重ね煮アカデミー ®|「台所は家庭の薬箱」陰陽調和の重ね煮健康料理-横浜・鎌倉

 

アフィンガー5はカスタム次第て生徒を集める料理教室サイトも作成することができますね!

 

トモキ
正直、色使いと使用画像でサイトデザインはどうにでもなるよ。

 

このサイトがまさにその代表例。
スライドショーの部分など基本的な形はよく見たらアフィンガー5ですが、他のところで画像をうまく使ったり、全体の色使いですっきりまとめて個性を出していますね!

 

アフィンガー5は自由にコンテンツを配置できるカスタマイズができるため、画像を思い通りに設置できるのでいろんなデザインができるという可能性にあふれていますよ。

 

 

 

アフィンガー5のデザイン参考サイトその72Bcafe

2Bcafe

 

もうとにかくおしゃれ!

カフェはサイトにおしゃれさを出したい場合が多いかと思いますが、アフィンガーはそんな点も柔軟に対応できますね。

 

ショップサイトを作る際にも参考にしたいWEBサイトです。

 

 

 

トモキ
全部とっても綺麗なサイトだね!

 

 

デザインテンプレートは使わないと損!是非試してみよう!

デザインテンプレートは使わないと損!是非試してみよう!

 

当記事でアフィンガー5のデザインテンプレートの設定方法やメリットなどはわかりましたでしょうか?

 

アフィンガー5のデザインテンプレートはとってもお洒落で使いやすく、作業時間短縮にもなるので是非利用することをオススメします!

私も「INAZUMA」というテンプレートを使用していますが、当ブログのデザインや記事の読みやすさを褒めて頂くことが多いです。
しかしこれは全てデザインテンプレートのおかげ。

 

まだの人はぜひ当記事を参考にデザインテンプレートを設定しましょう。

 

最後に:アフィンガー5を検討中の方へ

 

また、アフィンガー5を使用していないけど、デザイン性などが気になり当記事を読んで頂いた方もいるかと思います。
ありがとうございます。

 

もしも「アフィンガー5いいなあ」と思いましたら、判断材料の一つとしてAFFINGER5(アフィンガー5)の正直なレビューとお得な限定特典の入手方法の記事を是非読んでもらえると嬉しいです!

 

CHECK
【最新】AFFINGER5の特典付きレビュー!正直な感想やお得な入手方法もご紹介!
AFFINGER5の正直なレビューとお得な限定特典の入手方法

続きを見る

 

上記のレビュー記事にも書いてありますが、ただいま当サイトよりアフィンガー5を購入された方限定で7つの素敵な特典をプレゼントさせていただいております!

 

\今なら当サイト限定特典付き/

AFFINGER5の詳細や購入はこちら

 

是非内容などをチェックしてみてくださいね。

 

また、アフィンガーの購入は少し複雑なので戸惑う方も多いです。

 

これから購入したいと考えている方はアフィンガー5の購入〜インストール方法を徹底解説を参考に手順通り進めると失敗せずに安全ですので、よろしければこちらもどうぞ。

 

CHECK
【絶対できる】アフィンガー5の購入手順とダウンロード・インストール方法を徹底解説!
【絶対できる】アフィンガー5の購入手順とダウンロード・インストール方法を徹底解説!

続きを見る

 

この記事が参考になれば幸いです。

 

 

関連記事AFFINGER5の正直なレビューと特典の入手方法をご紹介!

関連記事アフィンガー5の購入〜インストールまでの方法を徹底解説

 

-AFFINGER5
-

Copyright © TOMOKIBLOG , All Rights Reserved.