AFFINGER6

【AFFINGER6】デザインテンプレートの設定方法【徹底解説】

セイタ

ブログ・ゲーム・ガジェットが好きな30歳。普段は営業の仕事をしながらブログを書いたり、トレンドになっているゲームを楽しんでいます。ブログ開始(27歳)→独立(28歳)→コロナで再就職(29歳)→複業ライフ満喫中。ゲーミングデバイスレビューやお仕事の依頼はメールアイコンへ。

あなた
AFFINGER6のデザインテンプレートの設定方法を教えてほしい。

 

こんにちは、セイタです。

 

今回はAFFINGER6のデザインテンプレートの設定方法について、以下の内容で解説します。

 

今回のコンテンツ内容

  • AFFINGER6デザインテンプレートの準備
  • AFFINGER6デザインテンプレートの設定方法
  • AFFINGER6デザインテンプレート設定時の注意

 

時間にして早ければ5分ほどで設定できてしまうため、サクッと設定していきましょう。

 

\ 当サイトも使ってるWPテーマ『AFFINGER6』/

当サイト限定の13特典付き

 

AFFINGER6デザインテンプレートの準備

AFFINGER6デザインテンプレートの準備

 

まずはAFFINGER6の公式サイトにて以下のファイルをダウンロードしてきましょう。

 

必要なダウンロードデータ

  • デザイン済みテンプレート
  • デザインデータを反映するプラグイン

 

データはこちらからダウンロード可能です。

 

 

セイタ
ドメインがaffinger5になっていますが、AFFINGER6用に刷新されているので安心してください。

 

AFFINGER6デザインテンプレートの準備①AFFINGER6のデザインテンプレートをダウンロード

デザイン済みデータ配布ページを開くと、デザインテンプレートのサンプルが表示されています。

 

好みのデザインを選んでダウンロードしましょう。

 

デザイン済みテンプレートをダウンロードするには”ダウンロードの方法 及び ご利用規約”のチェックを入れる必要があります。

 

ダウンロードの方法 及び ご利用規約

 

このチェックを入れないとデザイン済みテンプレートがダウンロードできないため、注意してください。

 

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

 

うまくいっていると”利用規約に同意してください”の文言が消え、ダウンロードできる状態になっているはずです。

 

デザイン済みテンプレートファイル

 

ダウンロードが完了すると各デザイン済みテンプレートの名称が付いているzipファイルがフォルダに入ります。

 

AFFINGER6 EX版のデザイン済みテンプレートもある

AFFINGER6のデザイン済みテンプレートには2種類あります。

 

AFFINGER6ノーマル用SIMPLE START、Tidy2、MUKU、cloud、Study Bear
AFFINGER6 EX用INAZUMA EX、mocha 6EX、MUKU EX、Tidy2 EX、WIDE EX

 

ちなみにAFFINGER6 EXを使用していたとしても、AFFINGER6用のデザイン済みテンプレートも使用することができます。

 

好みに合わせてAFFINGER6のデザイン済みテンプレートを選んでみてください。

 

AFFINGER6デザインテンプレートの準備②デザインテンプレートに必要なプラグインをダウンロード

AFFINGER6のデザインテンプレートを反映させるには、デザインデータを反映させるためのWordPressプラグインが必要です。

 

カスタマイザーCustomizer Export/Import
ウィジェットWidget Importer & Exporter
テーマ管理データ引き継ぎプラグイン(有料&任意)

 

カスタマイザーとウィジェットを反映させるためのプラグインは無料です。データ引き継ぎプラグインは有料となります。

 

しかし、データ引き継ぎプラグインは必ず必要というわけではありません。よりカスタマイズをしたくない場合は購入すると便利です。

 

AFFINGER6デザインテンプレートの設定方法

AFFINGER6デザインテンプレートの設定方法

 

AFFINGER6のデザイン済みテンプレートの設定方法は、以下の手順で設定可能です。

 

デザイン済みテンプレートの設定方法

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

 

AFFINGER6デザインテンプレートの設定方法①テーマ管理の反映

AFFINGER6デザインテンプレートの設定方法① テーマ管理の反映

 

テーマ管理の反映方法はAFFINGER管理の”データの引き継ぎ”から行います。

 

テーマ管理の反映をするとAFFINGER6内の設定を反映してくれるため、1つずつ設定する必要がなくなるため便利です。

 

デザイン済みテンプレートファイル解凍

 

データの引き継ぎをクリックすると”インポート”ボタンがあるため、クリックしましょう。

 

するとファイル選択をする画面へと移行するため、デザイン済みテンプレートのzipファイルを回答して"theme.json"というファイルを選択します。

 

テーマ管理の反映方法は以上で完結です。

 

AFFINGER6デザインテンプレートの設定方法②ウィジェットの反映

AFFINGER6デザインテンプレートの設定方法② ウィジェットの反映

 

カスタマイザーの反映は”Customizer Export/Import”プラグインを使用して反映させます。WordPressのダッシュボードからツールを選択し”Customizer Export/Import”を選択しましょう。

 

デザイン済みテンプレートのウィジェットファイル

 

”ウィジェットのインポート”の画面へ移動したら、ファイルを選択するボタンが有るためクリックします。すると、先程のファイル選択と同じ画面が表示されるため、"action-sample.com-skin6-widgets.wie"を選択しましょう。

 

wieファイルが読み込めない場合

環境によっては"action-sample.com-skin6-widgets.wie"が読み込めない場合があります。

 

その際はファイルを選択下にある"copy and paste"をクリックするとテキストボックスが表示されます。

 

wieのテキストファイル貼り付け

 

action-sample.com-skin6-widgets.wie”を開いて表示されたコードを、表示されたテキストボックスの中にコピペしてあげてください。

 

.wieファイルはダブルクリックしただけでは開けないため、テキストエディターアプリなどをインストールして開きましょう。個人的なおすすめは"VSCode"です。

 

最後に"ウィジェットをインポート"をクリックしたら、ウィジェットの反映は完了です。

 

AFFINGER6デザインテンプレートの設定方法③カスタマイザーの反映

最後にカスタマイザーの反映をしていきましょう。

 

カスタマイザーの反映は、WordPressのダッシュボードから外観をクリックしてカスタマイズから行います。

 

AFFINGER6デザインテンプレートの設定方法③ カスタマイザーの反映

 

カスタマイズを開くと”エクスポート/インポート”をクリックして、カスタマイザーデータのインポート画面へと進みます。

 

デザイン済みテンプレートカスタマイザーファイル

 

ファイルを選択ボタンをクリックするとファイル選択のウィンドウが開くため、”affinger-export.dat”を選択して”インポート”ボタンをクリックしたらOK。

 

以上でカスタマイザーの反映は完了です。

 

AFFINGER6デザインテンプレート設定時の注意

AFFINGER6デザインテンプレート設定時の注意

 

AFFINGER6のデザイン済みテンプレートを使用すると、カスタマイズを行わずに高品質なデザインを手に入れることが可能です。

 

しかし、いくつか注意点があるため解説しておきます。

 

データ引き継ぎプラグインは任意

データ引き継ぎプラグインは必須ではありません。

 

データ引き継ぎプラグインはあれば便利ですが、有料であるため購入するのに躊躇しますよね。

 

デザイン済みテンプレートを使用する際にAFFINGER6管理で必要な部分の設定できれば、データ引き継ぎプラグインは不要であることを覚えておきましょう。

 

セイタ
とはいえ、あったほうがやっぱり便利です。

 

全く同じデザインにはならない

デザイン済みテンプレートをブログにインポートしても、全く同じデザインにはなりません。

 

というのも、ある程度の型は決められていますが、おすすめ記事や細かい部分の設定は自分で行う必要があるからです。

 

そのため、デザイン済みテンプレートのサンプル通りのデザインでスタート出来ると考えると肩透かしをされた感覚になるので、簡単に追加の設定は必要になることを覚えておきましょう。

 

ある程度の設定変更やカスタマイズは必要

デザインとは別にAFFINGER管理内の設定は、自分で必要箇所を設定する必要があります。

 

  • SNS設定
  • Googleアナリティクス
  • Googleサーチコンソール
  • Googleアドセンス

 

などが挙げられます。

 

デザイン済みテンプレートを利用する際には、あくまで外見の部分だけのカスタマイズが完成した状態で使用することが出来るという認識でいるのが正解です。

 

AFFINGER6のカスタマイズテンプレートでデザイン時間を短縮しよう

AFFINGER6のカスタマイズテンプレートでデザイン時間を短縮しよう

 

今回はAFFINGER6のデザイン済みテンプレートの設定方法や注意事項について解説しました。

 

新しくブログやサイトを立ち上げる際に使用すると便利なカスタマイズデータとなっているため、AFFINGER6ユーザーには積極的に使用してもらいたいコンテンツです。

 

当ブログでも使用していますし、もうひとつのSEITA GAMESでも使用していて便利に使わせてもらっています。

 

AFFINGER6は独自でカスタマイズを行うにしてもアレンジしやすいテーマとなっているため、使用中の場合も検討中の場合もAFFINGER6を使用してユーザーが使いやすいサイトを運営しましょう。

 

  • この記事を書いた人

セイタ

ブログ・ゲーム・ガジェットが好きな30歳。普段は営業の仕事をしながらブログを書いたり、トレンドになっているゲームを楽しんでいます。ブログ開始(27歳)→独立(28歳)→コロナで再就職(29歳)→複業ライフ満喫中。ゲーミングデバイスレビューやお仕事の依頼はメールアイコンへ。

-AFFINGER6
-