AFFINGER5のブログにデザイン済みデータを反映させてみたから手順を解説！

2019年8月8日


当ブログでお世話になっているブログテーマの「AFFINGER5」には、デザイン済みのデータをインポートして、完成してあるデザインに簡単に反映させることができます。

今日は当ブログ「TAKUBLOG」に「デザイン済みデータ」を反映させてみました。

 

今回反映させたのは「INAZUMA」と言うデザイン済みデータで、テーマ製作者のENJIさんがつい先日に新しく追加したデザインです。

 

 

他にも「MOCHA」と言う可愛いデザインも追加されましたが、個人的にINAZUMAの方が好みだったので今回は見送りました。

 


INAZUMAに反映させた結果、自分ではできないデザインでとても気に入ったので、この記事では「デザイン済みデータの反映方法」を解説します。

注意ポイント

デザイン済みデータの「MOCHA」と「INAZUMA」はAFFINGER5 EX版に対応しているデータです。

EX版じゃないか方はこちらでAFFINGER 5に対応したデザインで試してみて下さい。

 

デザイン済みデータの反映準備

今回はわたしが選んだ「INAZUMA」での作業手順で説明していますが、どのデータでもやり方は同じです。

必要なもの

  • 自分が使いたいデザイン済みデータ
  • プラグイン３つ

 

自分が使いたいデータをダウンロードする

AFFINGER5が売られている「STINGER STORE」の「デザイン済みデータ配布ページ」でINAZUMAのデータをダウンロードします。

すぐ使えるように一時的にデスクトップにでも置いておいて下さい。

 

プラグインを３つをインストールする

必要なプラグインが３つあります。

 

カスタマイザーとウィジェットの反映に使うプラグインは、WordPressの管理画面でサイドバーの「プラグイン→新規追加」で検索窓に「Customizer Export/Import」と「Widget Importer & Exporter」を入力してインストールして有効化して下さい。

テーマ管理のプラグインは有料のプラグインです。STINGER STOREで（2,980円）で売られているので、事前に購入しておく必要があります。

データのダウンロードとプラグインのインストールが終われば準備は終わりです。

 

デザイン済みデータをブログに反映させる

ここからは自分のブログにデザイン済みデータを反映させます。

まずは「カスタマイザー」から反映させます。

WordPressの管理画面で「外観→カスタマイズ」で画面が変わったら、一番下に「エクスポート／インポート」が追加されています。

ここをクリックして「ファイル選択」で先ほどダウンロードしていたINAZUMAのファイルで、「カスタマイザー用」の中の「datファイル」を選択してインポートを押します。

うまく反映されない場合は、「外観→カスタマイズ→全体カラー設定→カスタマイザーをリセットする」でリセットしてからサイド試してみて下さい。

 

次にウィジェット（サイドバー）の反映です。

サイドバーの設定はしたくなければこの次の「データ管理」までスキップしても問題ありません。Sampleと同じサイドバーにしたい場合のみ続けて下さい。

WordPressの管理画面で「ツール→Widget Importer & Exporter」で、先ほどダウンロードしていたINAZUMAのファイルから、「ウィジェット用」の中の「wieファイル」を選択してインポートします。

インポートしたウィジェットと元からあるウィジェットが、重複していないかチェックしましょう。

 

最後にデータ管理の反映です。

WordPressの管理画面で「AFFINGER5 管理→データの引き継ぎ」で、先ほどダウンロードしていたINAZUMAのファイルのテーマ管理用のファイルから、の「jsonファイル」を選択してインポートします。

既存のデータは削除されて、新しくインポートしたデータで上書きされます。もしうまくいかない場合は「AFFINGER5 管理→AFFINGER5 管理　リセット」でリセットしてから再度トライしてみて下さい。

 

最後に必要のないところは自分で調整する

反映が終われば終了なんですが、Sample通りだとヘッダーにボタンなどがあったり、ヘッダーカードがあったりします。

まだ全然記事数のないわたしのブログではまだ必要のない機能だったので、AFFINGER5 管理で全て消しました。

ちなみにヘッダーの大きな写真とボタンは「AFFINGER5 管理→ヘッダー→ヘッダーコンテンツ設定」の中を全て消して、カスタマイズ「カスタマイズ→ヘッダー画像→ヘッダー画像エリア」の値を消して空欄にすれば全て無くなります。

ヘッダーカードは「AFFINGER5 管理→おすすめ記事→おすすめヘッダーカード」に入っているのを全て削除してSAVEを押せば全て消えます。

ここまでやれば、わたしのブログみたいになります。

 

まとめ

以上でデザイン済みデータの反映が終了です。

ある程度運営歴が長くて記事数も多いブログなら、今回のデータ反映で読んでほしい記事を目立たせたりできるのでおすすめです。このブログみたいにまだ記事数が少ない場合は、もう少し記事数が増えるまで待ってからでもいいかもしれないと思いました。記事数がある程度あれば上記の4番みたいなことをしなくて済むんでね。

AFFINGER5を使い始めてまだ日が浅いですが、使ってみたい機能が多くてとても楽しいです！買ってよかった〜

今回やったデザインの反映もとても簡単にできたので、今後気になるデザインが追加された時はまた同じ方法で変えてみたいと思います。

-AFFINGER