AFFINGER6（アフィンガー）のデザイン済データーのテンプレート種類と変更。

ブログ運営半年で月20万超の元サラリーマンブロガーなつです。

AFFINGER5からAFFINGER6に変更してからデザイン済データーが少しリニューアルされました。先日、新しく整理されていましたので現時点でわかっているデザイン、その使い方などをお伝えしていきます。

AFFINGER6のデザイン済データー（着せ替え）のインストールと導入方法をお伝えしていきます。

　ブロガーが欲しい機能が満載のワードプレステーマ「AFFINGER6/ACTION」
⇒AFFINGER6（アフィンガー6）の公式ページを確認する。
※今なら、5大購入特典をお付けしています！

関連記事【AFFINGER6のレビュー】実際使ってみた感想と評判。

※　AFFINGER6（ACTION）は　AFFINGER5（WING）の後継版です。
⇒　違いについてはコチラの記事でどうぞ。

AFFINGER6のデザイン済データ（着せ替え）の種類

AFFINGER6へ切り替わったころには、はっきりと出てきている新しい着せ替えデザインは少なかったのですが、今回新たなデザインが公開されていました。

前回のAFFINGER5でもデザインが追加されていたので、今後増えるかもしれませんが、現時点でわかっているものをお伝えします。

SIMPLE START

超シンプルで基礎の項目だけのデザインです。まずは導入してしまってそこから小さな部分を調整するのに適しています。色はブルーですが、変更できますので、色だけ後で変更すれば自分なりのデザインにもなります。

出典：AFFINGER6

基本のシンプルなデザインです。最初の細々した設定が面倒だったりできない方は、このデザインを導入し色変更等で整えましょう。

　速報！
芸大卒のなつが作ったデザインのマニュアルも特典に追加しました。

⇒　詳しくはコチラをご覧ください。

※ヘッダーの画像は、イラストACのイラストレーターさん方の作品です。特典内でURLをお伝えしています。

Tidy2

ピンクと水色のグラデーションが美しい「Tidy2」は、AFFINGER5の時もほぼ同じものがありました。今回AFFINGER6では、テキストが違っていたり、使いやすそうなギャラリーやGutenbergで使える見出しやボックスなど機能性も高いです。

出典：AFFINGER6

Tidy2はとにかく色合いがきれいです。女性をターゲットにしたブログサイトなどにも良いと思いますが、もし男性にもアピールする場合には色変更でイメージが変わります。

AFFINGER5でも似たデザインがありましたが、色合いがカッコよいので化粧品などのブログにも使えます。

MUKU

基本形のデザインをピンポイントで色などをシックな雰囲気に変更させているデザインです。一番の特徴はスライドショーの背景に黒にしてシックなイメージとなっています。

出典：AFFINGER6

超シンプルですが、スライド背景のラインがとても印象的なデザインです。

【EX版】AFFINGER6のデザイン済データ（着せ替え）の種類

ACTION（AFFINGER6）にも上位版でEX版があります。前回は、カラフルなデザインがありましたが、今回は通常版の機能拡張のような内容になっているようです。

WIDE/EX

基本的にはシンプルに見えますが、内容がとてもユニークな機能が配置されています。EXの機能自体がシークレットのものもあるので通常版とはまた違った面白さもあります。

出典：AFFINGER6

よくアフィリエイトで、あと〇分〇秒までで締め切りのようなカウントして誘導するボタンが付いています。

Tidy　EX

通常版のTydy2の基本にEXの特徴を追加してあります。大きく違っているのはトップページの記事配置。「もっと読む」のボタンを押すと多くの記事のサムネイルが表示されます。

出典：AFFINGER6

MUKU/EX

MUKU/EXも通常版の基本にEXの特徴を追加したデザインとなっています。トップページにタブで切り替えできるようになっていて多くの記事をきれいな配置で見せることができます。

出典：AFFINGER6

AFFINGER6着せ替えとカラーレイアウト変更は別物

AFFINGERを使っていると着せ替えとカラーレイアウト変更がごっちゃになってしまいがちなんですが、このデザイン調整方法の2種類は別物です。デザイン済データ（着せ替え）は、すでに公式で完成させたデザインをダウンロードしてからブログに乗っけるものです。

カラー/レイアウト変更は、ブログの色とレイアウトの型のいくつかの選択肢を組み合わせて自分で設定するものです。

デザイン済データ「Tidy2」の色違いを作ってみた。

前の章でお伝えした通りTidy2はとてもセンスのよい美しい着せ替えですが、若干女性向けなのかなと感じます。そこで、男性向けや、もう少し違うイメージにしてみますのでよかったら参考にしてみてください。

色番号や作り方も記載していますので活用できますよ！

【基本】Tidy2の導入

まず、デザイン済データ（着せ替え）では、準備が必要ですので、導入前の操作と導入を説明していきます。Tidy2に限らず、ブラウザなどの違いにより全く同じものが出てこない場合もありますのでその都度調整が必要になる場合があります。

ざっくりと説明すると、上の「Customizer Export/Import」は全体のデザインの導入のため、下の「Widget Importer & Exporter」はウィジェット操作のために必要になります。

Tidy2ファイルをダウンロード

まずは公式のデザイン済データーのページからファイルをダウンロードします。

⇒　AFFINGER6「デザイン済データ」ページ

ダウンロードしたらファイルを開き、DATファイルと、WIEファイルをPCのわかるところに保存しておきます。

• affinger-export.dat・・・デザイン部分
• action-sample.com-skin4-widgets.wie・・・ウィジェット部分

Tidy2ファイルをインストール（デザイン）

Tidy2のインストールを行います。

▼　外観　⇒　カスタマイズ　⇒　エクスポート/インポート

affinger-export.datのファイルを選んで、インポートボタンをクリックします。

ウィジェットのインストール

プラグイン「Widget Importer & Exporter」の欄の下に「インポート/エクスポート」と記載されている部分をクリックします。ファイルをインストールできる部分がでてきます。

上記ができたら色変更していましょう。

インストールしたら、ヘッダー画像がなかったのとテキスト等が変更されてなかったので調整しています

Tidy2のモノクロっぽくする

このデザインに黒を追加してシックにしていみましょう。黒だけでも良いのですが単調になるので緑を足してみます。

ヘッダー上部の色変更

▼　外観　⇒　カスタマイズ　⇒　基本エリア設定　⇒　ヘッダーエリア

• 背景色・・・#2b2b2b
• 背景色（グラデーション）・・・#00a497

ヘッダーメニューの色変更

▼　外観　⇒　カスタマイズ　⇒　各メニュー設定　⇒　PCヘッダーメニュー

• 背景色・・・#00a497
• 背景色（グラデーション）・・・#333333

▼　外観　⇒　カスタマイズ　⇒　各メニュー設定　⇒　スマホメニュー（スマホヘッダー）で同じく変更をしていきます。

初心者だからこそWordpress有料テーマ を使うべき理由