当ページのリンクには広告が含まれています。

AFFINGER6&EX デザイン済みデータの導入・設定方法「ポイントをまとめてみた!」

AFFINGER6&EX デザイン済みデータの導入・設定方法「ポイントをまとめてみた!」

【2024年3月15日更新】記事が読みやすくなるように、全体を調整しました。

こんにちは "osaboo"です。"@osaboo_Bot"

AFFINGER6とEXで使える「デザイン済みデータ」の導入とちょっと分かりにくい?!設定方法をご紹介します。

AFFINGER6の「デザイン済みデータ」は、公式サイトから無料でダウンロードしてインストールすることで、すぐに使用可能な設定済みのテンプレートですが…

ダウンロード方法がいまいち分かりにくかったりします。
この記事では、初心者さんが戸惑いそうなところを重視してご紹介します。…なので大丈夫です。
是非、チャレンジしてくださいね。^^/

配布ページはこちら!

こんな方におすすめ!

  • AFFINGER6の初期設定方法が面倒
  • サイトのデザインを簡単に格好良くしたい
  • サイトの設定の時間をかけずに…すぐにでも「記事を書きたい・投稿したい」

この記事でわかること!

  • デザイン済みデータについて
  • デザイン済みデータの導入準備(ダウンロード)
    1. デザイン済みデータのダウンロード
    2. ブラグイン無料その1・その2 のダインロードとインストール
  • デザイン済みデータの導入:カスタマイズの設定『.dat』ファイル
    1. 『.dat』ファイルを書き出し(エクスポート)します。(プラグイン:Customizer Export/Import)
    2. 『.dat』ファイルをインポートします。(プラグイン:Customizer Export/Import)
  • デザイン済みデータの導入:ウィジェットの設定『.wie』ファイル
    1. 『.wie』をエクスポートします。(プラグイン:Widget Importer & Exporter)
    2. 『.wie』をインポートします。(プラグイン:Widget Importer & Exporter)
  • デザイン済みデータの導入:カスタマイズの設定『.json』ファイル本記事対象外
  • デザイン済みデータの設定
  • まとめ!

それではご覧ください!

初心者でも安心!コスパ最強の洗練されたWordPressテーマ

AFFINGER6 購入 ▶︎ 詳しくはこちら

\\『すごいもくじLITE』が付いてくる!限定特典キャンペーン実施中!//

デザイン済みデータについて

そもそも…「デザイン済みデータ」とは、汎用性の高いサイトパターンが予め設定されているのデータのことです。

AFFINGER6(EX)をより便利に!簡単に!ユーザーに使ってもらうように付加されたサービスです。

AFFINGER6は、設定箇所が豊富なことから「初期設定が大変」というイメージを打破するためにこのようなサービスがあるのかと…

では「デザイン済みデータの中身はどうなってるの?」ですが…

デザイン済みデータの詳細

ダウンロードするのは『.zip』ファイル 1つだけです。(圧縮ファイル要解凍)

『.zip』ファイルに格納されているファイルは3つ

  1. 『.dat』ファイル(Customizer Export/Import プラグインが必要)
    • 用途:カスタマイザーの設定
  2. 『.wie』ファイル(Widget Importer & Exporter プラグインが必要)
    • 用途:ウィジェットの設定
  3. 『.json』ファイル(テータ引き継ぎプラグインが必要)本記事対象外
    • 用途:AFFINGER管理の設定

本記事では、無料でできる範囲のみをご紹介します。

デザイン済みデータの導入準備(ダウンロード)

この章では、導入に必要なデータとプラグインのダウンロード手順をご紹介します。

ダウンロード及び追加するもの

  1. デザイン済みデータ(選択して1つ)
  2. プラグイン無料その1:Customizer Export/Import
  3. プラグイン無料その2:Widget Importer & Exporter
  4. プラグイン有料:データ引継ぎプラグイン(¥2,980税込)とりあえずは不要です。

デザイン済みデータのダウンロード

「公式サイト:STINGER STORE」にアクセスして必要な『デザイン済みデータ』をダウンロードします。

デザイン済みデータ配布ページβ)← ページ移動後にログインが必要です。「慣れてる方向け」

慣れてない方は以下の手順がおすすめです。

以下の手順で進むとログイン状態で「公式サイト:STINGER STORE」に入れます。

それでは見ていきましょう。

『WordPress管理>ダッシュボード>AFFINGER管理>はじめに』をクリックします。

『STINGER STORE』赤矢印部をクリックします。

AFFINGER管理|はじめに
yajirusi-sita-80x40

ログインされた状態で【公式】STINGER STORE/パーツ工場 に遷移し、以下の画面が表示されます。

右端の『各種お問い合わせ』のドロップダウンメニューを開いて『購入ユーザー限定ページ』をクリックします。

『購入ユーザー限定ページ』をクリックします。

公式サイト|STINGER STORE
yajirusi-sita-80x40

購入ユーザー限定ページ一覧 に遷移し、以下の画面が表示されます。

下側にスクロールして、左側サイドメニューの最下部『デザイン済みデータ』をクリックします。

下側にスクロールします。

STINGER STORE:購入ユーザー限定ページ|TOP
yajirusi-sita-80x40

以下の画面が表示されるところまで下側にスクロールします。

『デザイン済みデータ』をクリックします。

STINGER STORE:購入ユーザー限定ページ|デザイン済みデータ(メニュー)
yajirusi-sita-80x40

デザイン済みデータ配布ページ(β)に遷移し、以下の画面が表示されます。

下側にスクロールします。

STINGER STORE:デザイン済みデータ配布ページ(β)
yajirusi-sita-80x40

以下の画面が表示されるところまで下側にスクロールします。

必ず!❶❷❸にチェックを入れましょう。
チェックが入っていないとダウンロードボタンが表示されません。(ダウンロードできない)

❶❷❸にチェックを入れます。

STINGER STORE:ダウンロードの方法 及び ご利用規約
yajirusi-sita-80x40

下側のスクロールして ダウンロードしたいデザイン済みデータダウンロードボタンを押し、 PC等の任意のデバイスに保存します。

AFFINGER6(STD)「5種類から選択できます」

STINGER STORE:SIMPLE START
STINGER STORE:Tidy2|MUKU
STINGER STORE:cloud|Study Bear

EX 限定「6種類から選択できます」

STINGER STORE:INAZUMA 6EX
STINGER STORE:Separate
STINGER STORE:mocha 6EX|MUKU EX
STINGER STORE:Tidy2 EX|WIDE / EX

デザイン済みデータの選択に迷ったら…

以下の記事で個々の「デザイン済みデータの特徴等」を解説していいるので 参考にしてください。

yajirusi-sita-80x40

ダウンロードされたデータを解凍します。参考

任意のデバイスにダウンロードした『.zip』ファイルをダブルクリックして解凍します。

※ Windowsの場合は『右クリック>全て展開』

デザイン済みデータ|ダウンロードzip
yajirusi-sita-80x40

解凍されるとzipファイルと同じ名称のフォルダーが作成されます。
フォルダーの中身を確認します。

デザイン済みデータ|ダウンロードzip|解凍|フォルダ
yajirusi-sita-80x40

以下のように…
『.wie』『.dat』『.json』の3つのファイルが確認できれば準備完了です。

デザイン済みデータ|ダウンロードzip|解凍|フォルダ|内部

デザイン済みデータのダウンロードは 以上です。

ブラグイン無料その1・その2 のダインロードとインストール

デザイン済みデータの設定に必要な2つのプラグインを追加します。

WordPress管理画面からプラグインを追加の画面を開きます。

『WordPress管理>ダッシュボード>プラグイン>新規追加』をクリックします。

WP管理:ダッシュボード|プラグイン|新規追加
yajirusi-sita-80x40

プラグインを追加の画面が表示されたら『Customizer Export/Import』と『Widget Importer & Exporter』を追加していきます。

ブラグイン無料その1:Customizer Export/Import

「プラグインを追加」の画面で、キーワードの枠欄に『Customizer Export/Import』と入力します。

以下の画面が表示されます。

ブラグインを追加|Customizer Export/Import
yajirusi-sita-80x40

上画面の赤枠部分の詳細です。

『今すぐインストール』をクリックします。

Customizer Export/Import|今すぐインストール

 

yajirusi-yoko-40x80

『有効化』をクリックします。

Customizer Export/Import|有効化

インストール済みプラグイン(プラグイン)の画面で以下のように表示されていればOKです。

「Customizer Export/Import」プラグインはインポートしてデザインが反映されたら無効化して下さい(有効化したままだとその後のカスタマイズができない場合があります。)

https://on-store.net/design-sample-guide/

ブラグイン無料その1:Widget Importer & Exporter

「プラグイン追加」の画面で、キーワードの枠欄に『Widget Importer & Exporter』と入力します。

以下の画面が表示されます。

ブラグインを追加|Widget Importer & Exporter
yajirusi-sita-80x40

上画面の赤枠部分の詳細です。

『今すぐインストール』をクリックします。

Widget Importer & Exporter|今すぐインストール

 

yajirusi-yoko-40x80

『有効化』をクリックします。

Widget Importer & Exporter|有効化

インストール済みプラグイン(プラグイン)の画面で以下のように表示されていればOKです。

※ 自動更新は有効化した方が無難です。

ブラグイン無料その1・その2 のダインロードとインストールは 以上です。

以上で…全ての準備が整いました。
次の章では、解凍したデザイン済みデータとインストールしたプラグインを使ってサイトに反映させていきます。

デザイン済みデータの導入:カスタマイズの設定『.dat』ファイル

この章では、カスタマイズの設定方法として デザイン済みデータを導入する手順をご紹介します。

「プラグイン:Customizer Export/Import」を使った「カスタマイズ設定『.dat』ファイル」の書き出しとインポートの作業手順になります。

手順は以下の通りです。

  1. 『.dat』ファイルを書き出し(エクスポート)します。(プラグイン:Customizer Export/Import)
  2. 『.dat』ファイルをインポートします。(プラグイン:Customizer Export/Import)

『.dat』ファイルを書き出し(エクスポート)します。(プラグイン:Customizer Export/Import)

『書き出し(バックアップ)』は一瞬で終わるのでおすすめです。
元の戻す必要がなければ基本的に不要ですが…不具合が出た場合に備えて 現在の設定を『書き出し(バックアップ)』しておきます。

『WordPress管理>ダッシュボード>外観>カスタマイズ』をクリックします。

カスタマイザーが起動して以下の画面が表示されます。

『エクスポート / インポート』をクリックします。

カスタマイザー:エクスポート / インポート
yajirusi-sita-80x40

「エクスポート / インポート」の詳細メニューが表示されます。

『.dat』ファイルを書き出し(エクスポート)します。

カスタマイザー:エクスポート / インポート|書き出し

『.dat』ファイルを書き出し(エクスポート)します。
「現在の設定バックアップします」

『書き出し』をクリックします。

任意のデバイスに保存します。

バックアップファイル|affinger-child-export.dat

ダウンロードした『デザイン済みデータ』とファイル名が同じになるため、保存場所は必ず変えておきましょう。
ファイル名:affinnger-child-export.dat

一瞬で終わるよ。

osaboo
osaboo

『.dat』ファイルをインポートします。(プラグイン:Customizer Export/Import)

『.dat』ファイルをインポートするとサイトの設定がでサイン済みデータに置き換えられるのでガラッと変わります。ここが本題の作業です。

『.dat』ファイルをインポートして不具合が生じた場合は「カスタマイザーをリセット」します。
※ 「現在の設定をバックアップ」をしておきましょう。

『.dat』ファイルをインポートします。

カスタマイザー:エクスポート / インポート|インポート(ファイルを選択)

『.dat』ファイルをインポートします。

『ファイルを選択』をクリックします。

ダウンロードした任意のデバイスから
『affinnger-child-export.dat』を選択して開きます。

デザイン済みデータ|ダウンロードzip|解凍|フォルダ|内部2

『ファイルを選択』の右側に「ファイル名」が表示された状態になります。

yajirusi-sita-80x40

『インポート』をクリックします。

カスタマイザー:エクスポート / インポート|インポート

※ 『画像ファイルをダウンロードしてインポートしますか?』にチェック入れません。(公式ページに注意事項あり)

デザイン済みデータの導入:ウィジェットの設定『.wie』ファイル

この章では、ウィジェットの設定方法として デザイン済みデータを導入する手順をご紹介します。

「プラグイン:Widget Importer & Exporter」を使った「ウィジェットの設定『.wie』ファイル」のエクスポートとインポートの作業手順になります。

手順は以下の通りです。

  1. 『.wie』をエクスポートします。(プラグイン:Widget Importer & Exporter)
  2. 『.wie』をインポートします。(プラグイン:Widget Importer & Exporter)

『.wie』をエクスポートします。(プラグイン:Widget Importer & Exporter)

『書き出し(バックアップ)』は一瞬で終わるのでおすすめです。
元の戻す必要がなければ基本的に不要ですが…不具合が出た場合に備えて『書き出し(バックアップ)』しておきます。

『WordPress管理>ダッシュボード>外観>ウィジェット』をクリックします。

以下のウィジェット画面が表示されます。

ウィジェット画面上部(赤枠)の『インポート / エクスポート』をクリックすると『Widget Importer & Exporter』の画面に遷移します。

『インポート / エクスポート』をクリックします。

WP管理:ダッシュボード|ウィジェット
yajirusi-sita-80x40

以下の Widget Importer & Exporter 画面が表示されます。

『WordPress管理>ダッシュボード>ツール>Widget Importer & Exporter』をクリックしても同等です。

破線赤枠部分を設定します。

WP管理:ダッシュボード|ツール|Widget Importer & Exporter|全体
yajirusi-sita-80x40

※ 以降の画面は、上画面の破線赤枠部を詳細説明用に拡大表示しています。

『.wie』をエクスポートします。

『.wie』ファイルをインポートして不具合が生じた場合に備えて『ウィジェットのエクスポート』をします。
※ 「現在の設定をバックアップ」をしておきましょう。

『ウィジェットのエクスポート』をクリックします。

WP管理:ダッシュボード|ツール|Widget Importer & Exporter|詳細|ウィジェットのエクスポート
yajirusi-sita-80x40
バックアップファイル|⚪︎⚪︎⚪︎×××-widgets.wie

任意のデバイスに保存します。

『⚪︎⚪︎⚪︎×××-widgets.wie』

先頭にサイトの名称が自動でつけられます。

『.wie』のエクスポートは以上です。(既存のウィジェットはエクスポートされました)

『.wie』をインポートします。(プラグイン:Widget Importer & Exporter)

『.wie』ファイルをインポートするとでサイン済みデータのウィジェットが追加されます。

『.wie』をインポートします。

『ファイルを選択』をクリックします。

WP管理:ダッシュボード|ツール|Widget Importer & Exporter|詳細|ファイルを選択
yajirusi-sita-80x40
デザイン済みデータ|ダウンロードzip|解凍|フォルダ|内部3 wie

ダウンロードした任意のデバイスから
『affinnger-demoxxx-widgets-export.wie』を選択して開きます。

yajirusi-sita-80x40

『ファイルを選択』の右側に「ファイル名」が表示された状態になります。(ファイルが選択された状態)

『ウィジェットのインポート』をクリックします。

WP管理:ダッシュボード|ツール|Widget Importer & Exporter|詳細|ウィジェットのインポート
yajirusi-sita-80x40

インポートが完了すると以下のような「インポート結果」が表示されます。

緑色の項目が新しくインポートされたウィジェットで、オレンジ色の項目は既存のウイジェットです。

Widget Importer & Exporter|インポート結果

『.wie』のインポートは以上です。(既存のウィジェットは除外され、新しいいウィジェットが追加されました)

デザイン済みデータの導入:ウィジェットの設定『.json』ファイル

有料項目のためこの記事では除外します。

データ引き継ぎプラグイン(有料)」を利用する場合は先リンクからご確認ください。

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

各デザイン済みデータの設定方法を詳しく確認するには、『備考:こちらを参照』をクリックしてください。

※ 画像やウィジェットに挿入する項目は手動で行う必要があります。

STINGER STORE:各デザインの詳細設定|こちらを参照

参考各デザイン済みデータの設定方法はこんな感じでご覧頂けます。

STINGER STORE:各デザインの詳細設定|抜粋

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

『備考:こちらを参照』のリンクで公開されている記事から抜粋しています。

設定箇所と設定場所がわかりやすく解説されています。

左画像のような設定記事が各デザイン済みデータでご覧頂けます。

じっくり見ながら設定してくださいね。^^/

デザイン済みデータの設定方法は以上です。

初心者でも安心!コスパ最強の洗練されたWordPressテーマ

AFFINGER6 購入 ▶︎ 詳しくはこちら

\\『すごいもくじLITE』が付いてくる!限定特典キャンペーン実施中!//

まとめ!AFFINGER6&EX デザイン済みデータの導入・設定方法「ポイントをまとめてみた!」

AFFINGER6とEXのデザイン済みデータの導入と設定のポイントをまとめてご紹介しました。デフォルトから全て設定するのに比べるとかなり時間が短縮できます。記事(投稿)を少しでも早く書きたい方は、是非 チャレンジしてみてください。

「最後まで、ご観覧いただきありがとうございました。」
また、次の記事で…お会いしましょう。\^^/

-カスタマイズ_AFFINGER
-,