AFFINGER6にデザイン済みデータを設定する方法

[st-kaiwa2]アフィンガー5をテーマにしたんですが、デザインのカスタマイズの仕方が分かりません。簡単にデザインを設定することはできませんか？[/st-kaiwa2]

といった悩みにお答えします。

 本記事の内容

アフィンガー5のデザイン済みデータを設定することにより、面倒なデザインをすぐに終わらせる事ができます。

とはいえ、「アフィンガー5のデザイン済みデータって何があるの？」「アフィンガー5にデザイン済みデータを設定する方法を知りたい！」と思っている方は多いのではないでしょうか？

今回は、アフィンガー5にデザイン済みデータを設定する方法を初心者向けに解説していきます。

デザインカスタマイズに悩んでいる方は本記事を参考にしてみてください。

当ブログで使用しているWordPressテーマ「AFFINGER5」については以下で詳しく解説しています。

[st-card myclass=”” id=”2484″ label=”あわせて読みたい” pc_height=”” name=”” bgcolor=”” color=”” fontawesome=”” readmore=”on” thumbnail=”on” type=””]

アフィンガー5にデザイン済みデータを導入すべき理由【作業効率UP】

まずは、アフィンガーにデザイン済みデータを導入すべき3つの理由を解説していきます。

[st-mybox title=”” fontawesome=”” color=”#757575″ bordercolor=”#204495″ bgcolor=”#ffffff” borderwidth=”3″ borderradius=”2″ titleweight=”bold” fontsize=”” myclass=”st-mybox-class” margin=”25px 0 25px 0″]

[/st-mybox]

自分でデザインする必要がないので、時間短縮になります。

アフィンガーは痒い所に手が届くデザイン性に優れたWordPressテーマですが、初心者からしたら、逆に機能が多すぎてどうカスタマイズしたらいいのか迷ってしまいます。

でもアフィンガーにテンプレートを設定すれば、そんな手間や時間をかけずに、ブログのデザイン設定が完了してしまいます。

しかも、たったの5分でできるので設定は超簡単です。

[st-kaiwa4 r]僕自身、初めは全く使い方が分からなかったのでデザインだけでも1日以上はかかってしまいました。[/st-kaiwa4]

アフィンガー5のデザイン済みデータ一覧

まずはアフィンガー5のデザイン済みデータを紹介します。

2021年1月時点で10種類あります。

[st-mybox title=”AFFINGER5及びAFFINGER5EX版専用” fontawesome=”fa-check-circle” color=”#333333″ bordercolor=”333333″ bgcolor=”#ffffff” borderwidth=”2″ borderradius=”5″ titleweight=”bold” fontsize=”” myclass=”st-mybox-class” margin=”25px 0 25px 0″]

[/st-mybox]

[st-mybox title=”AFFINGER5EX用データ” fontawesome=”fa-check-circle” color=”#333333″ bordercolor=”333333″ bgcolor=”#ffffff” borderwidth=”2″ borderradius=”5″ titleweight=”bold” fontsize=”” myclass=”st-mybox-class” margin=”25px 0 25px 0″]

[/st-mybox]

[st-kaiwa4 r]AFFINGER5の方は7種類、AFFINGER5 EXの方は10種類のデザインプレートを使うことができます。[/st-kaiwa4]

その①：Tidy

1つ目のデザイン済みデータは、「Tidy」です。

その②：NOTE.2020

2つ目のデザイン済みデータは、「NOTE.2020」です。

スタイリッシュなデザインなので、個人だけでなく企業サイトにもおすすめです。

ヘッダー画像がスライドショーになっているので、目を引く仕様になっています。

その③：PINKY

3つ目のデザイン済みデータは、「PINKY」です。

ヘッダー画像にボタンを配置することにより、クリック率（CTR）が向上します。

その④：HappyDiary 2020

4つ目のデザイン済みデータは、「HappyDiary 2020」です。

その⑤：Lupine 2020

5つ目のデザイン済みデータは、「Lupine 2020」です。

その⑥：YouTube

6つ目のデザイン済みデータは、「YouTube」です。

Youtubeとブログを両立させたい方におすすめです。

特に動画を優先して見せるブログに最適となっています。

その⑦：YouTube2

7つ目のデザイン済みデータは、「YouTube2」です。

その⑧：MOCHA（モカ）

8つ目のデザイン済みデータは、「MOCHA（モカ）」です。

その⑨：INAZUMA

9つ目のデザイン済みデータは、「INAZUMA」です。

その➉：START UP

10個目のデザイン済みデータは、「START UP」です。

[st-kaiwa4 r]早速アフィンガー5にデザイン済みデータを設定していきましょう！[/st-kaiwa4]

アフィンガー5にデザイン済みデータを設定する3つの手順

アフィンガー5にデザイン済みデータを設定する手順は以下の通り。

[st-mybox title=”” fontawesome=”” color=”#757575″ bordercolor=”#204495″ bgcolor=”#ffffff” borderwidth=”3″ borderradius=”2″ titleweight=”bold” fontsize=”” myclass=”st-mybox-class” margin=”25px 0 25px 0″]

[/st-mybox]

1つずつ解説していきます。

[st-kaiwa4 r]設定自体はとても簡単なので、見ながらゆっくりやっていきましょう！[/st-kaiwa4]

[st-mybox title=”ここに注意！” fontawesome=”fa-check-circle” color=”#ef5350″ bordercolor=”#333333″ bgcolor=”#FFF8E1″ borderwidth=”2″ borderradius=”5″ titleweight=”bold” fontsize=”” myclass=”st-mybox-class” margin=”25px 0 25px 0″]

既にデザインのカスタマイズや設定を行っている場合、上書きされてしまうので必ずバックアップを取ってから作業することをおすすめします。

バックアップに関しては、【超簡単】UPpdraftPlusならバックアップと復元がワンクリック！で詳しく解説しています。

[/st-mybox]

手順①：デザイン済みデータをダウンロード

まずはデザイン済みデータ配布ページでお好きなデザインをダウンロードしていきます。

少し分かりにくいのですが、スクロールすると、「利用規約及びご承諾事項・使い方と注意事項に同意します」という文言の左側にチェックボックスがあるので、必ずチェックを入れてください。

チェックを入れ終わったら、気に入ったデザイン済みデータの「※承諾事項を了承の上、ダウンロードする」をクリックしましょう。

[st-kaiwa4 r]本記事では「NOTE.2020」をダウンロードして解説していきます！やり方は何も変わらないので、自分がダウンロードしたテーマに置き換えて進めていきましょう！[/st-kaiwa4]

手順②：プラグインのインストール

アフィンガーにデザイン済みテンプレートを設定する際には、以下のプラグインが必要となります。

[st-mybox title=”” fontawesome=”” color=”#757575″ bordercolor=”#4865b2″ bgcolor=”#ffffff” borderwidth=”3″ borderradius=”2″ titleweight=”bold” fontsize=”” myclass=”st-mybox-class” margin=”25px 0 25px 0″]

[/st-mybox]

早速、プラグインをインストールしていきましょう。

1つ目は、Customizer Export/Importです。

WordPress管理画面より、「プラグイン」→「新規追加」で右上の検索ボックスで「Customizer Export/Import」と入力して、「今すぐインストール」をクリックしましょう。

インストールできたら、「有効化」すれば完了です。

2つ目は、Widget Importer & Exporterです。

Customizer Export/Importと同様に、「プラグイン」→「新規追加」で右上の検索ボックスで「Widget Importer & Exporter」と入力して、「今すぐインストール」をクリックしましょう。

インストールできたら、「有効化」すれば完了です。

[st-mybox title=”データ引継ぎプラグインって何？” fontawesome=”fa-check-circle” color=”#333333″ bordercolor=”#333333″ bgcolor=”#ffffff” borderwidth=”2″ borderradius=”5″ titleweight=”bold” fontsize=”” myclass=”st-mybox-class” margin=”25px 0 25px 0″]

「AFFINGER5 管理」で設定されているデータを全て引き継ぐことができるプラグインになります。

AFFINGER専用プラグインのため、価格2,980円（税込）とちょっとお高め。

とはいえ、設定したデータをインポートしたりエクスポートするだけで簡単に反映させられるので自分で設定する手間が省けます。

もちろん、全て自分で設定する・できるという方は不要です。

≫ データ引継ぎプラグインを導入する

[/st-mybox]

手順③：デザイン済みデータをインポート

最後に、一番最初にダウンロードしたデザイン済みデータをブログにアップロードしていきます。

• ウィジェット用
• カスタマイザー用
• テーマ管理用

まずはウィジェット用からインポートしていきます。

「ツール」→「Widget Importer & Exporter」→「ファイルを選択」をクリックしてください。

note_20200122.zipの中にある「ウィジェット用」のフォルダを開いて、「wing-wp.com-sample21-widgets.wie」を選択しましょう。

選択できたら、「ウィジェットをインポート」をクリックすればOKです。

[st-mybox title=”インポートができない場合” fontawesome=”fa-check-circle” color=”#ef5350″ bordercolor=”#ef5350″ bgcolor=”#FFF8E1″ borderwidth=”2″ borderradius=”5″ titleweight=”bold” fontsize=”” myclass=”st-mybox-class” margin=”25px 0 25px 0″]

上記のように、

You must upload a .wie file generated by this plugin

と表示され、「ウィジェット用」がインポートできない場合があります。

その場合には、以下を行えば解決することができます。

プラグイン「Disable Real MIME Check」を有効化するだけでOKなので、面倒な設定はありません。

[st-kaiwa4 r]終わったら、プラグインは「無効化」→「削除」を忘れないように！[/st-kaiwa4]

[/st-mybox]

次に、カスタマイザー用をインポートしていきます。

WordPress管理画面より、「外観」→「カスタマイズ」で画面が移動するので、「エクスポート/インポート」をクリックします。

上記のように切り替わったら、「ファイルを選択」をクリックしてください。

note_20200122.zipの中にある「カスタマイザー用」のフォルダを開いて、「affinger5-export.dat」を選択しましょう。

選択できたら、「インポート」をクリックすればOKです。

[st-mybox title=”カスタマイザーのリセット方法” fontawesome=”fa-check-circle” color=”#ef5350″ bordercolor=”#ef5350″ bgcolor=”#FFF8E1″ borderwidth=”2″ borderradius=”5″ titleweight=”bold” fontsize=”” myclass=”st-mybox-class” margin=”25px 0 25px 0″]

デザイン済みデータを複数ダウンロードした場合、別のデザインデータを間違ってインストールしてしまったなんてこともあります。

そんなときには以下の手順でリセットすることができます。

「全体カラー設定」をクリックしましょう。

下にスクロールして「リセット」をクリックして、

「OK」をクリックすればリセット完了です。

[st-kaiwa4 r]終わったら、プラグインは「無効化」→「削除」を忘れないように！[/st-kaiwa4]

[/st-mybox]

[st-mybox title=”データ引継ぎプラグインを使う場合” fontawesome=”fa-check-circle” color=”#757575″ bordercolor=”#BDBDBD” bgcolor=”#ffffff” borderwidth=”2″ borderradius=”5″ titleweight=”bold” fontsize=”” myclass=”st-mybox-class” margin=”25px 0 25px 0″]

「AFFINGER5 管理」→「データの引継ぎ」をクリック。

「ファイルを選択」をクリックして、最初にダウンロードしたデザイン済みテンプレートのフォルダの中の「テーマ管理用」をクリックし、「st-migrator.zip」を選択してください。

 

[/st-mybox]

これでアフィンガーにデザイン済みテンプレートの設定が完了となります。

[st-kaiwa4 r]お疲れ様でした！最後に、インストールしたプラグインは必要ないので、忘れずに「無効化」→「削除」しておきましょう！[/st-kaiwa4]

デザイン済みデータでよくある質問：疑問を解決

アフィンガーのデザイン済みデータに関するよくある質問をまとめています。

[st-mybox title=”” fontawesome=”” color=”#757575″ bordercolor=”#204495″ bgcolor=”#ffffff” borderwidth=”3″ borderradius=”2″ titleweight=”bold” fontsize=”” myclass=”st-mybox-class” margin=”25px 0 25px 0″]

[/st-mybox]

1つずつ解決していきます。

質問①：デザイン済みデータの画像はついてきますか？

いいえ、ついてきません。

デザイン済みデータはあくまで、デザインの枠組みのみとなるので画像は自分で用意する必要があります。

商用利用可能なフリー素材については【厳選】アフィリエイトで使えるフリー画像サイト8選+2で紹介しています。

質問②：AFFINGER5EX版専用テンプレートをAFFINGER5で使用することはできますか？

いいえ、できません。

アフィンガー5で使用できるデザイン済みデータは7つのみになります。

AFFINGER5EX版の専用テンプレートを利用したい方は、別途AFFINGER 5EXの購入が必要となります。

質問③：デザイン済みデータを設定したのですが、後から自分好みにカスタマイズすることはできますか？

はい、できます。

「AFFINGER5 管理」「カスタマイズ」にて設定を変更すれば、デザイン済みデータを設定したとしても、自分好みのデザインに変更は可能となっています。

あくまで、デザイン済みテンプレートの設定が反映されるだけなので、アフィンガーの使い方が分かってきたら、自分だけのオリジナルデザインに変更してみるといいかもしれません。

[st-kaiwa4 r]当ブログのデザインを公開しているので、カスタマイズしたい方は以下を参考にしてみてください。[/st-kaiwa4]

[st-card myclass=”” id=”3980″ label=”” pc_height=”” name=”” bgcolor=”” color=”” fontawesome=”” readmore=”on” thumbnail=”on” type=””]

まとめ：アフィンガー5のデザイン済みデータで時間短縮！

今回はアフィンガーでデザイン済みテンプレートを設定する方法を解説しました。

アフィンガーのデザインみデータを導入することにより、

[st-mybox title=”” fontawesome=”” color=”#757575″ bordercolor=”#204495″ bgcolor=”#ffffff” borderwidth=”3″ borderradius=”2″ titleweight=”bold” fontsize=”” myclass=”st-mybox-class” margin=”25px 0 25px 0″]

[/st-mybox]

といったメリットがあります。

デザインを最速で設定してしまえば、ブログで一番大事な記事制作にすぐ取り掛かることができます。

もちろん後からいくらでもデザイン変更することができるので、まずはデザイン済みデータを導入してブログ運営を開始しましょう。

[st-kaiwa4 r]ある程度記事が書けて余裕が出てきたら、以下の記事を参考にカスタマイズしてみてください！[/st-kaiwa4]

[st-card myclass=”” id=”3980″ label=”関連記事” pc_height=”” name=”” bgcolor=”” color=”” fontawesome=”” readmore=”” thumbnail=”on” type=””]