アフィンガー5 (Wing)

【初心者必見!】アフィンガーでデザインを簡単に着せ替えする方法

2018年10月29日

どうも。カエルブロガーのケロ蔵です。

ワードプレステーマWING(アフィンガー5)を買ったのはいいけれど、ブログのデザインを1から作るのは面倒くさい!と思ったことはないでしょうか?

WINGのテーマを買ってもどういったデザインが最適なのかわからないですよね?

実はWINGではすでに完成されたデザインテンプレートが用意されています。

このデザインを流用してそのままブログを運営すことだって出来るんです。

デザインテンプレートとは?

すでにカスタマイズが施されているデータのこと。
このデータをワードプレスに取り込むだけで公開されているデモサイトとほぼ同様のデザインになる。

アフィンガーの基本機能だけを使ってカスタマイズしているので、その気になれば誰でも同じデザインにすることが出来る。

このデータを使用することによって最初から見た目がいいブログを作成することが出来るので、デザインに時間を掛けること無くすぐに記事作成作業に移る事が出来ます。

デザインでつまずくようであれば、用意されているデザイン済みテーマを使ってみてもいいかもしれませんね。
ケロ蔵

アフィンガーのデザインはダサい!?デザインを着せ替えて簡単にオシャレなブログに早変わり!

アフィンガーのデザインがダサいと言われていたのはアフィンガー4の頃の話であって、WING(アフィンガー5)に進化してからはデザイン面でダサいと言われることがなくなりました。

このブログもWINGを使用して運営していますが、ダサいと思ったことはありません。

以下は実際にWINGを有効化した時点でのデザインです。

これはワードプレスをインストールしてWINGのテーマを有効化しすぐにプレビューした画面です。

まだ何もカスタマイズしていない段階ですが、シンプルではあるものの有料テーマとしてはあまりデザインがいいとは言えません。

ここから少しずつデザインをカスタマイズすることによって、自分だけのオリジナルデザインへと変えていくことが出来ます。

せっかく自分のブログを持ったのであれば、デザインにはこだわりたいですよね。
ケロ蔵

自力でデザインをカスタマイズするのは大変!?

WINGでオシャレなデザインにできるとは言っても、買ったばかりのテーマの設定方法がわからない状態で、オリジナルデザインにするには設定方法を理解しなければなりません。

この作業だけでも時間がかかってしまい、効率的ではありませんよね。

ピョン太
デザインなんかに時間なんかかけてられねぇよ。

そんなせっかちな方でもあらかじめ用意されているデザインを導入することで見た目がキレイなブログへとドレスアップすることが出来ます。

アフィンガーで用意されている着せ替えデザインを一気に紹介

アフィンガーで使用できるデザイン済みデータは全部で10種類です。
(2019/2/16現在)

それぞれ異なったデザインになっているので、自分の好きなデザインを選んで使うことが出来ますよ。

(画像・動画やプラグインのデータはご自身で用意する必要があります。)

アフィンガー5及びEX版専用

WING(アフィンガー5)のテーマであれば利用することが出来るデザインです。

 

Note

シンプルなデザインでありながらオールマイティーに使用できるデザインです。

どのようなジャンルにも違和感がないので、着せ替えデザインに迷ったらおすすめです。

PINKY

ヘッダー画像を1枚絵にしてその下にスライドショーを表示させているデザインです。

ヘッダー部分の色がピンクになっているので女性向けのデザインのように見えますが、色の変更も可能になっています。

画像を前面に押し出すタイプのデザインなので、観光スポットなどを紹介するブログにいいかもしれませんね。

HappyDiary

ヘッダー画像に複数の画像を設置でき、下にデザインカードを設置しています。

Lupine

1カラムのシンプルなデザインです。
ライティングページとして使うのにはもってこいです。

1カラムなので、ペラサイトで使うのには便利である反面、ほぼ更新するブログとして使うのには物足りないかもしれません。

YouTuber

Youtube動画をたくさん使いたい場合に使いやすいデザインになっています。

動画を1つのページで大量に使用しているのでキャッシュ系プラグインやLasyLoadSEO(遅延読込プラグイン)も同時に使用しないと、サイトの読み込み速度が低下してしまいますので注意してください。
(権利関係のため動画をモザイク処理しています)

YouTuber2

YouTube用にデザインされたデータです。
上記のデザインと同様にプラグインと併用して使用しないと読み込み速度が低下します。
権利関係のため動画をモザイク処理しています

Tidy

トップページのカテゴリーごとに分けて左右2分割にしているのが特徴のデザイン。

AFFINGER5EX用

ここからはアフィンガー5EX専用のデザインです。

EX版には通常版にはないカスタマイズが施すことが出来るので、より高度な設定をすることが出来ます。

mocha

EX版専用デザインその1。

INAZUMA

EX版専用デザインその2。

START UP

コーポレート(企業用)向けのデザインです。

個人経営や自営業で会社のサイトを持ちたい方向けになっています。

アフィンガーを使ってデザイン済みテーマに着せ替えする方法

それでは実際にブログのデザインを変更してみましょう。

デザインを適用するためには複数のプラグインが必要になるので手間がかかりますが、使い方はそれほど難しくありません。

アフィンガーのテーマを購入していることが大前提です。

デザイン済みテーマのファイルをダウンロード

まずはじめにスティンガーストアからデザイン済みテーマをダウンロードします。

ダウンロードをするにはパスワードが必要です。

パスワードはマニュアルサイトと同じで確認方法は【AFFINGER5 管理】→【はじめにタブ】の初めの方に記載。

アイナ
以下のリンクからダイレクトに飛ぶことが出来ますよ~

デザイン済みデータ配布ページへ行く

お目当てのデザイン済みテーマをダウンロードするとzipファイルが保存され、このファイルを展開すると『ウィジェット用』『カスタマイザー用』『テーマ管理用』の3種類のファイルが表示されるようになります。

ダウンロードファイルの中身

これでファイルの準備が完了です。

プラグインの準備

次にプラグインをインストールします。
先ほどダウンロードしておいたファイルはプラグインを使って、あなたのワードプレスに適用させないとなりません。

着せかえをするには以下のプラグインが必要になってきます。

カスタマイズ Customizer Export/Import
ウィジェット Widget Importer & Exporter
AFFINGER5 管理 データ引継ぎプラグイン

この内『データ引き継ぎプラグイン』はアフィンガー専用プラグインで有料です。
絶対に必要というわけではありませんが、AFFINGER5 管理の設定をそのまま引き継ぐことが出来るので、時間短縮にもなりますよ。

【カスタマイズ】【ウィジェット】【AFFINGER5 管理】はそれぞれのプラグインが必要なので、まとめて引き継ぐといったことは出来ません。

Customizer Export/Importの使い方

プラグインを有効化し、左メニューの【外観】→【カスタマイズ】を選択。

メニューの一番下にある【エクスポート/インポート】を選択し、ダウンロードしたフォルダの中にあるカスタマイザー用を開き【affinger5-child-export.dat】を選択。

Widget Importer & Exporterの使い方

プラグインを有効化し、左メニューの【ツール】から【Widget Importer & Exporter】を選択。

ファイルを選択をクリックし、ダウンロードしたフォルダの中にあるウィジェット用を開き【wing-wp.com-sample-3-widgets.wie】を選択。
(デザイン済みテーマ【Note】利用時の場合。)

【ウィジェットをインポート】をクリックして完了。

データ引継ぎプラグインの使い方

僕はこのプラグインを所持していないので、あまり詳しく解説できません。
データ引き継ぎプラグインの使い方で詳しく紹介されていますのでそちらをご覧になってください。

デザインを考えるのが苦手な方は試してみては?

アフィンガーで最初から用意されているデザインを試せるのが嬉しいですね。

ネットで調べてみるとカスタマイズの幅が広くて使いこなすだけでも大変という話も聞いたりしましたが、このデザインを使うだけでもブログのイメージがガラリと変わっています。

このデータをそのまま使ったり自分好みにカスタマイズを施したりすることも出来ますので、土台となるデザインを是非ダウンロードしてみてください。

アイナ
最初から自身でデザインするのは難しいからデザイン済みデータをベースにしてカスタマイズするのがいいかも知れませんね。

-アフィンガー5 (Wing)
-, ,

Copyright© アフィノート , 2019 All Rights Reserved.