デザイン/カスタマイズ

【簡単】アフィンガー5のデザイン済みデータでおしゃれなブログにする方法

2020年8月10日

アフィンガー5 デザイン済みデータ 設定 (2)
この記事は5分で読めます

 

サラリーマン
・アフィンガー5のデザインがイマイチ決まらない
・簡単におしゃれなデザインにしたい

 

このようなお悩みにお答えします。

 

AFFINGER5(アフィンガー5)は、機能やカスタマイズ項目が豊富なテーマです。

 

自由度が高いアフィンガー5ですが、ブログのデザインは凝りはじめると終わりがなく永遠にPCに向かってカタカタしてしまいます。

 

僕もそうでしたが、

  • 何時間もデザインを調べて、結局思い通りにならない
  • デザインに時間をかけすぎて、肝心の記事が書けない

 

ブログをはじめた頃は、このような状態になりがちなんですよね笑

 

でもそんなあなたに朗報です!

 

アフィンガー5では、デザイン済みのデータを使って簡単におしゃれなブログを作ることができます。

 

本記事を読めば、自分にピッタリのデザインを簡単に設定できデザインに悩むことがなくなりますよ!

 

本記事の内容

  • アフィンガー5のデザイン済みデータは10種類
  • 一般の人がデザインしたデータも
  • デザイン済みデータの設定方法

 

本記事を書いた人

ねこたろす
AFFINGER5歴は3カ月ほど。最初はデザイン済みデータのNOTE.2020を使っていました。

 

本記事で紹介するデザイン済みデータは、アフィンガー5を導入していないと使えません。

 

まだ導入されていない方は、アフィンガー5の口コミ評判やレビューをまとめた記事も参考にしてみてください!

 

早くデザイン済みデータを見てみたい方はこちら。

 

目次

アフィンガー5のデザイン済みデータとは

アフィンガー5 デザイン済みデータとは

アフィンガー5には、すでに完成したデザインのテンプレートが用意されています。

 

デザイン済みデータは以下の10種類があります。

 

AFFINGER5・AFFINGER5EX専用データ

  • Tidy
  • Note.2020
  • PINKY
  • HappyDiary 2020
  • Lupine 2020
  • YouTube
  • YouTube2

 

AFFINGER5EX専用データ

  • MOCHA(モカ)
  • INAZUMA

 

AFFINGER5EX・STINGER PRO2EX用データ

  • START UP

 

嫁ちゃん
AFFINGER5EXってなに?

 

AFFINGER5EXは、AFFINGER5の上位版のこと。 使える機能がさらに多くなってるんだ!
ねこたろす

 

 

ちなみに、STINGER PRO2EXは会社のHPで使う機会が多いため、個人ブロガーの方は気にしないで大丈夫です。

 

また、公式HPで配布しているデータ以外にもデザインを探す方法があります。

 

それは一般の方が作ったAFFINGER5デザイン済みデータを共有する、「WING CLOSET」というサービス。

 

WING CLOSET」は2020年5月にスタートし、誰でもデザイン済みデータを公開・販売・共有が可能です。

 

ねこたろす
公式HP以外にもデータを探せるので、自分好みのデザインが見つかるかも!

 

アフィンガー5のデザイン済みデータを使うメリット

アフィンガー5 デザイン済みデータを使うメリット

アフィンガー5のデザイン済みデータを使うメリットは、以下の通りです。

  1. 簡単に短時間でデザイン可能
  2. 記事作成に時間をかけられる

 

ひとつずつ解説していきますね!

 

アフィンガー5デザイン済みデータを使うメリット
①簡単に短時間でデザイン可能

HTMLやCSSといった知識がなくても、簡単に短期間でデザインをすることができます。

 

実際に僕もプログラミングの知識はなかったです。

 

ねこたろす
何時間も調べて結局納得できず、中途半端に終わるというパターンを繰り返していました。

 

最初からデザイン済みデータを使っていれば、効率的に自分好みのブログが作れていたので若干後悔しています。

 

アフィンガー5デザイン済みデータを使うメリット
②記事作成に時間をかけられる

ブログの目的が収益化ならば、デザインに時間をかけるよりも記事を多く書くべきです。

 

なぜなら記事数が多い方が自分のライティングスキルも向上しますし、Googleからも評価されやすいから。

 

特に僕のように副業でブログを書いている方にとって、作業時間は限られています。

 

アフィンガー5のデザイン済みデータを利用して、ブログを書くという本質的な行為に時間をあてることができます。

 

アフィンガー5のデザイン済みデータ10種類

アフィンガー5 デザイン済みデータ 10種類

それでは、アフィンガー5のデザイン済みデータを紹介していきますね。

 

10種類もデザインテンプレートを配布しているのは、アフィンガー5だけです。

 

ねこたろす
ブログ初心者には非常に嬉しいですよね。

 

好みのデザインがあれば、サンプルページを見てイメージを膨らませてみてください!

 

また、サンプルページを見るときには、スマホでの見え方も確認しておきましょう。

 

なぜなら、ブログ閲覧者はスマホからが中心になるからです。

 

ねこたろす
本ブログも7割はスマホから見られています。

 

ちなみに・・・

スマホでの見え方は確認したいPC画面で、「shift」+「ctrl」+「i」を押す。

 

アフィンガー5デザイン済みデータ
①Tidy

アフィンガー5 デザイン済みデータ Tidy

Tidyはトップ画像下に、4カテゴリーのヘッダーカードを挿入することができます。

 

PCでは2列、モバイルでは1列に表示。

 

トップページに各カテゴリー毎の記事があり、ページ下部には新着記事がスライドショーでも可能です。

 

見せたいカテゴリーが明確な人にはおすすめのデザインといえます。

 

 

アフィンガー5デザイン済みデータ
②Note.2020

アフィンガー5 デザイン済みデータ note.2020

任意のコンテンツをヘッダーにスライドショーで表示できます。

 

全体の作りとしては、非常にシンプルで洗練された印象で、ヘッダーカードにカテゴリー設定も可能。

 

僕もブログ開設当初は、このNote.2020を使っていました。

 

 

アフィンガー5デザイン済みデータ
③PINKY

アフィンガー5 デザイン済みデータ PINKY

画面いっぱいのヘッダー画像が特徴的なデザインです。

 

記事のサムネイルが丸いデザインで、可愛らしい印象を与えることができます。

 

特に、トップ画像で目を引きたいという方におすすめのデザイン。

 

 

アフィンガー5デザイン済みデータ
④HappyDiary 2020

アフィンガー5 デザイン済みデータ HappyDiary2020

Daiaryという名前の通り、画像の多さが特徴のデザインです。

 

ヘッダーとサイドバーにスライドショーが設定されていて、滞在時間や回遊率のアップが狙えます。

 

色合いが柔らかで穏やかな印象を与えるでデザインとなっています。

 

 

 

アフィンガー5デザイン済みデータ
⑤Lupine 2020

アフィンガー5 デザイン済みデータ Lupine

サイドバーのない1カラムのシンプルなデザインです。

 

ヘッダー画像でインパクトを与えられるので、訴求力のあるデザインという印象。

 

個人ブログでLupine 2020のような1カラムのデザインをあまり見たことがないので、差別化が可能です。

 

 

 

アフィンガー5デザイン済みデータ
⑥Youtube

アフィンガー5 デザイン済みデータ Youtube

著作権の関係でモザイクをしています。

Youtubeはヘッダーに動画を設定できるデザインです。

 

またヘッダー画像下にも、5つの動画をスライドショーで表示させることができます。

 

動画がメインのコンテンツである場合、おすすめできるデザインとなっています。

 

 

 

アフィンガー5デザイン済みデータ
⑦Youtube2

アフィンガー5 デザイン済みデータ Youtube2

著作権の関係でモザイクをしています。

ヘッダーに5つの動画をスライドショーで設定できるデザインです。

 

またヘッダー下にも、3つのカテゴリーを表示させることができます。

 

⑥Youtubeと比べて、アピールできる動画コンテンツの量が多いのが特徴です。

 

 

 

アフィンガー5EX用デザイン済みデータ
①MOCHA(モカ)

フィンガー5 デザイン済みデータ MOCHA

アフィンガー5EX用のデザイン済みデータであるMOCHA(モカ)。

 

特徴としては、以下のようなカード型のデザインが可能な点です。

アフィンガー5 デザイン済みデータ MOCHA カード型

 

 

ちなみに本ブログは、EX版ではなく、アフィンガー5専用子テーマのJETを導入してカード型デザインにしています。

 

【アフィンガーJET】AFFINGER5専用のカード型子テーマをレビューという記事にまとめていますので、カード型デザインにしたい方は参考にどうぞ。

 

 

アフィンガー5EX用デザイン済みデータ
②INAZUMA

アフィンガー5 デザイン済みデータ INAZUMA

INAZUMAもアフィンガー5EX用のデザイン済みデータとなります。

 

MOCHA(モカ)と同じく、カード型のデザインが可能です。

 

MOCHA(モカ)と比べると、色合いがクールで男っぽいデザインデータになります。

 

 

 

アフィンガー5EX / STINGER PRO2EX用デザイン済データ
START UP

アフィンガー5 デザイン済みデータ START UP

アフィンガー5EX / STINGER PRO2EXユーザの方が利用可能なデザインデータです。

 

個人ブログというよりも、会社HPに使われる洗練されたデザインとなっています。

 

 

 

アフィンガー5デザイン済みデータ
WING CLOSET

アフィンガー5 デザイン済みデータ WING CLOSET

WING CLOSET」とは、アフィンガー5やSTINGER PRO2のデザイン済みデータを公開・販売・共有できるサイトです。

 

一般の方が作ったデザインデータも公開されていて、無料のものもありました。

 

公式HPで気に入ったデザインが無かったときには、WING CLOSETで探しみるのもいいでしょう!

 

 

 

アフィンガー5デザイン済みデータの設定方法

アフィンガー5 デザイン済みデータ 設定方法

ここからは、デザイン済みデータをアフィンガー5に設定する方法を解説していきます。

 

設定の流れは以下の通りになります。

  1. バックアップをとる
  2. デザイン済みデータをダウンロードする
  3. プラグインをインストールする
  4. プラグインを使ってインポートする

ひとつずつ解説していきますね!

 

アフィンガー5デザイン済みデータの設定方法
①バックアップをとる

デザイン済みデータを設定する前に、必ずバックアップを取っておきます。

 

万が一、デザイン済みデータの設定がうまくいかなかった場合、データを復元できるためです。

 

アフィンガー5を導入してすぐにデザイン済みデータを使うといった方は、バックアップの必要はありません。

 

ある程度サイトやブログを運営している方は、必ずバックアップをとるようにしましょう。

 

BackWPUpというプラグインを使ったバックアップが簡単です。

 

バズ部さんのBackWPUpで確実にWordPressのバックアップを取る方法という記事を参考にしてみてください。

 

 

アフィンガー5デザイン済みデータの設定方法
②デザイン済みデータをダウンロードする

次に、気に入ったデザイン済みデータをダウンロードしていきます。

 

今回は、Note.2020を例にして解説していきます。

 

アフィンガー5 デザイン済みデータ 設定方法

 

ファイルを解凍すると、以下の4つのファイルがあります

アフィンガー5 デザイン済みデータ 設定方法2

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

 

上記の4つのファイルがあることを確認しておきます。

 

アフィンガー5デザイン済みデータの設定方法
③プラグインをインストールする

デザイン済みデータを設定するために、必要なプラグインをインストールしていきます。

 

必要なプラグインは以下の通り。

プラグイン用途
Customizer Export/Importカスタマイズ引き継ぎ
Widget Importer & Exporterウィジェット引き継ぎ
データ引継ぎプラグインAFFINGER5管理引き継ぎ

 

データ引継ぎプラグインは、税込2,980円と有料のプラグインになります。

 

AFFINGER5管理で設定したデータ内容を引き継ぐことができるプラグインですが、無くても引き継ぎ自体は可能です。

 

時間短縮をすることはできますので、データ引継ぎプラグインの使い方はこちらからどうぞ。

 

無料の「データ引継ぎプラグインLITE」も配布されているようです。

 

「データ引継ぎプラグイン(LITE)」は有料の「データ引継ぎプラグイン」からコードの出力設定やGoogleアナリティクス設定など複数の設定を除外したものです。
引用元:【特典あり】デザイン済みデータ共有サイト「WING CLOSET」開始のお知らせ

 

本記事では、データ引継ぎプラグインの設定については割愛いたします。

 

プラグイン→新規追加→検索窓に「Customizer Export/Import」、「Widget Importer & Exporter」を入力
今すぐインストール→有効化

アフィンガー5 デザイン済みデータ 設定方法3

 

 

アフィンガー5デザイン済みデータの設定方法
④プラグインを使ってインポートする

先ほど有効化したプラグインを使って、デザイン済みデータをインポートしていきます。

 

Customizer Export/Importでインポート

カスタマイズ→エクスポート/インポート
ファイルを選択
先ほどダウンロードしたファイルの「カスタマイザー用」→「affinger5-export.dat」を選択
インポート

アフィンガー5 デザイン済みデータ 設定方法4

 

Widget Importer & Exporterでインポート

ツール→Widget Importer & Exporter
ファイルを選択→先ほどダウンロードしたファイルの「ウィジェット用」→「wing-wp.com-sample21-widgets.wie」を選択
インポート

アフィンガー5 デザイン済みデータ 設定方法5

以上で完了です。

 

ねこたろす
お疲れ様でした。

 

まとめ:アフィンガー5のデザイン済みデータをうまく使おう

本記事の内容をまとめます。

 

デザイン済みデータは以下の10種類があります。

 

AFFINGER5・AFFINGER5EX専用データ

  • Tidy
  • Note.2020
  • PINKY
  • HappyDiary 2020
  • Lupine 2020
  • YouTube
  • YouTube2

 

AFFINGER5EX専用データ

  • MOCHA(モカ)
  • INAZUMA

 

AFFINGER5EX・STINGER PRO2EX用データ

  • START UP

 

デザイン済みデータの設置方法

 

  1. バックアップをとる
  2. デザイン済みデータをダウンロードする
  3. プラグインをインストールする
  4. プラグインを使ってインポートする

 

アフィンガー5のデザイン済みデータを活用することで、簡単におしゃれなデザインを導入することができます。

 

ブログのデザインは、凝りだすと時間をかけてしまいがち。

 

デザインにかける時間を最小限にして、記事の作成に時間をあてることを意識しましょう。

 

10以上のデザイン済みデータを利用できるのは、アフィンガー5だけです。

 

まだアフィンガー5を使っていない方は、口コミや評判、レビューをまとめた記事をご覧いただき、検討してみてください。

 

それでは!

 

関連記事

 

ブログランキング参加中!クリックお願いします!

ブログランキング・にほんブログ村へ 

-デザイン/カスタマイズ