AFFINGER5でクールなデザインの作り方を44枚画像で解説！

こじブログのこじ(@kojiblog1)です。

今回はAFFINGER5 / EXを購入前と購入済みの方に向けて、AFFINGER5のデザインを徹底解説させていただきます。

 今回のお悩み

悩んでる人

・AFFINGER5 / EXはどんなデザインができるの？

・AFFINGER5 / EXを買ったけど、導入方法が分からない。

・AFFINGER5 / EXを自分でもカスタマイズしてみたい！

AFFINGER5を購入する前の方と購入したばかりの方に向けてAFFINGERのデザインの魅力と説明を分かりやすく説明させていただきますね！

 本記事の信頼性

この記事を読めば、『AFFINGER5 / EXのデザインテンプレートの魅力と導入方法』が1からステップを追って分かると思いますよ。

まずは、AFFINGER5 EXでできるデザインから説明しますね。既に購入済みで、導入手順が知りたい方を『コチラ』をクリックしてください！

3〜5分くらいで読めるので、ぜひ目を通してみてください。

AFFINGER5 EXでできるデザインは？

コンサルペンギン

まずは、簡単にアフィンガー5の説明を説明させていただきます。

 AFFINGER5 / EX 基本情報 

アフィンガー5は『コスパがすごく良いテーマ』です。僕自信は、 AFFINGER5 EXを使っていて自分でデザインをカスタマイズしています。

AFFINGERを使用しているブロガー

ここからは実際に、AFFINGERを使用しているブロガーを何名か紹介します。

 AFFINGERを使っているブロガー 

NOJIブログ

『NOJIBLOG』

SEO・動画配信・LIFEを中心に記事をかかれている、ブロガーです。

デザインは『少しカッチリした印象』をうけますがシンプルでとてもみやすいですよね。

コンサルペンギン

シンプルTHEベストで、みやすいデザインなのがGOODです

TSUZUKIブログ

『TSUZUKIブログ』

ブログ・副業・WEBマーケを中心に運営をしているTSUZUKI Blog。『NOJIBLOGと同じ様にシンプルなデザイン』ですが、とてもみやすいです。

僕自信もTSUZUKIさんのブログのデザインを参考にしていますよ！

コンサルペンギン

シンプルですが、見やすくついつい記事をみてしまいます

ぱるろぐ

『ぱるろぐ』

女性らしい、デザインとキャラクターをモチーフにしている、ぱるろぐ。

『ブログ・生活・生き方等』をジャンルにしている雑記系ブロガーのブログになります。

ペンギン

女性らしい、色使いとデザインでサイトがカワイイわね

MENTALIST DAIGO

『MENTALIST DAIGO』

あのメンタリストとしても有名な、ダイゴさんのオフィシャルブログです。

ビジネス用にかっちりとしたデザインになっていて『オフィシャルな感じ』がでているのが特徴です。

悩んでる人

フォーマルなビジネス用にもAFFINGERは対応しているので、使用用途は広いです

てっぺのマネーハック.INFO

『てっぺのマネーハック.INFO』

『ふるさと納税や資産運用』についての記事をメインにしている、ブログです。

トップページにジャンルが分かるようにしており、読者が読みやすいように項目が設置してあります。

コンサルペンギン

読者目線で、トップページにジャンルを設定しているのがいいですね！

AFFINGERのデザイン済みテンプレート

アフィンガーの特徴は、デザイン済のテンプレートが初心者用に用意されているので『初心者でも簡単にカッコいいブログ』にできますよ。

 デザイン済テンプレート

TIDY

『TIDY』

オシャレなデザインで、見やすいのが特徴のテンプレートです。

 ポイント

 このトップページのカテゴリーが特徴です。

『女性向けのサイトをつくるのに適しているテンプレート』になると思います。

NOTE.2020 / PINKY

『NOTE.2020 / PINKY』

シンプルにできているデザインで、『初心者でも簡単にデザインをつくれるのが特徴』です。

 ポイント

トップページのスライドショーが目を引きます。

コンサルペンギン

シンプルにブログを作りたい人におすすめしていますよ。

HappyDiary 2020 / Lupine 2020

『HappyDiary 2020  /  Lupine 2020』

『柔らかな印象のHappyDiaryと1カラムで企業向けにもできるLupine』は、初心者も上級者ブロガーも対応しています。

 ポイント

サイドバーもGOODなHappydiaryと1カラムがカッコいいLupine

コンサルペンギン

『1カラムのサイトも個性がでる』と思うので、上記リンクを確認してみてくださいね！

YouTuber向けの着替えデータ

『Youtube / Youtube2』

AFFINGERはYoutuber用のサイトにも対応しているのも特徴です。『動画をメインに記事を書きたい人』は、このテンプレートがおすすめです。

 ポイント

Youtuberっぽいテイストも出せるのが特徴

コンサルペンギン

ブログを運営しながら、Youtubeの動画を配信している人にAFFINGERは本当におすすめです。

AFFINGER5EX用データ

『MOCHA（モカ） / INAZUMA』

『柔らかな色合いのMOCHAとダークブラックがカッコいいINAZUMA』ちなみに、僕のサイトはINAZUMAを使っていますよ！

 ポイント

トップページの自由度が高いです。

コンサルペンギン

AFFINGER5 EXのみ対応なのでご注意ください！

AFFINGER5EX / STINGER PRO2EX 用データ

『START UP』

企業向けサイトを考えている人におすすめなのでSTART UPのテンプレート。

 ポイント

フォーマルさを出すことも簡単できます。

コンサルペンギン

AFFINGER5 EX / STINGER PRO2EXのみ対応なのでご注意ください！

AFFINGERのテンプレート導入方法

AFFINGERを購入したばかり方向けに、導入方法を説明します！

『画像つき』で、説明するので安心してくださいね。

 導入手順

デザイン済みテンプレートをダウンロード

① まずは、『こちらのページ』へアクセスをしてください。

② 好きなテンプレートをダウンロードします

ZIPファイルを展開する

① ダウンロードしたZIPファイルを展開します。

② 使用するファイルはこの二つのフォルダー内に入っています。

③ datファイルとwieファイルが入っているか確認します。

プラグインをダウンロード / インストール

① プラグイン >> 新規追加をクリック

② キーワードに『Customizer Export / Import』と『Widget Importer & Exporter』を検索します。

③ 今すぐインストールを押します。

④ インストールしたら有効化を押します。(Widget Importer & Exporterも同樣に有効化します)

ZIPファイルの中身をインポート

① 先ほどのこの2つのファイルの出番です。

まずは、末尾がdatファイルから反映をしていきます。(デザイン済テンプレートの色が反映されます)

② 外見 >>カスタマイズをクリック

③一番下にある、エキスポート/  インポートをクリック。

④ 『affinger5-export.dat』ファイルをインポートします。datファイルのインポートはこれで完了です。

⑤ ここからは、末尾が『wieファイル』をインポートしていきます。(ウィジェッドが反映されます)

⑥ Widget Importer & Exporterを選びます。

⑦ 『wing-wp.com-sample21-widgets.wie』ファイルをインポートします。

コンサルペンギン

これでデザインテンプレートが反映されました！

デザイン済テンプレートが反映されない時

① 外観 >> カスタマイズをクリック

② 全体カラー設定をクリック

③ カスタマイザをリセットをクリック

こじブログ風カスタマイズ方法

当ブログは目に止まりやすいように、『ブログカード』をいれていますよ。簡単にできるので、ぜひ自分のサイトをカスタマイズしてみてくださいね！

こじブログデザイン

コンサルペンギン

このブログカードを使いたい人は、ブログカードがあるテンプレートを選んでくださいね！

 導入手順

AFFINGER5管理クリック

① まずは、AFFINGER5管理をクリック

画像をアップロードする

① おすすめ記事一覧をクリックし、画像をアップロードする

② 自分の好きなようにカスタマイズができます。テキストに文字をいれるとアップロードした画像に文字をいれられます。

※ テキストをいれると、画像をクリックできない場合はテキスト無しで画像直接文字をいれるといいですよ。

まとめ

いかがでしたでしょうか？AFFINGER5をつかえば、カッコいいデザインのサイトが簡単につくれますよ。

 AFFINGER5のメリット

AFFINGER5を使ってみようか、悩んでいる人は下記の記事も是非よんでみてくださいね。