AFFINGER6を購入したけどデザインを整えるのが難しい！
もっと簡単にデザインを整える方法を知りたい！
デザインのカスタマイズ方法を教えてほしい！
などの悩みに答えていこうと思います。
結論から言えば、最初はデザインテンプレートを使うことをおすすめします。
デザインテンプレートを使えば誰でも簡単にサクッとデザインを整えることができるので、無駄に頑張る必要はありません。
では早速紹介していこうと思います。
AFFINGER6のデザイン済みデータとカラーレイアウト
デザイン済みデータとは？
まずはデザイン済みデータのことがわからない人も多そうなので、デザイン済みデータについて紹介しようと思います。
そもそもデザイン済みデータとは、公式で完成されたデザインのことであり、Wordpressにダウンロードすればすぐに使用することができるというものです。
つまり、ダウンロードすれば完了ですので、デザインを全くしなくて良いということです。
他の人とデザインがかぶってしまうのでは？
と心配する人もいるかもしれませんが、問題ありません。
なぜならデザイン済みデータをダウンロードしても通常通りのデザインもできるからです。
とりあえずはデザイン済みデータをダウンロードし、後は自分好みにアレンジするという方法がデザイン性も高く簡単でしょう。
デザイン済みデータを使うためにはデータ引継ぎプラグイン（2,980円）の購入が必要になります。
ですが、これさえあれば一瞬でデザインが整うのでメリットは大きいです。
カラーレイアウトとは？
次にカラーレイアウトを紹介しようと思います。
と言ってもカラーとレイアウトの変更のことで、一から自分でデザインする通常の方法です。
一から作ることができますので完全にオリジナルのものですが、その分作業量も増えます。
デザインは早めに終わらせてブログを書きたい方はデザイン済みデータを使うほうが良いでしょう。
ちなみに僕はデザイン済みデータの存在を知りませんでしたので、一から設定していました。
AFFINGER6のデザイン済みデータの紹介
まずはAFFINGER6のデザイン済みデータになります。
種類がいくつかありますので順番に紹介します。
SIMPLE START
AFFINGER6にしては非常にシンプルなデザインになっており、ブログの基本ともいえるような形になっています。
スライダーがあり、プロフィールも設置されているのでシンプルながらデザイン性のあるサイトとも言えます。
写真はふんわりしたデザインですが、色やボックスの形を変更すれば自分好みにアレンジすることができます。
ポイント
- シンプルな見た目
- スライダーが角丸で設置
- タブボックスが設置
- SNSボタンがまるで設置
- プロフィールの設置
Tidy2
デザインの部分は女性寄りとなっていますが、色は簡単に変更することができるので特に問題はないでしょう。
また、色全体がグラデーションになっていたりと、細かい部分のデザイン性まで高いことがわかります。
ポイント
- 色全体がグラデーション
- プロフィール設置
- SNSの丸いアイコン
- ヘッダー画像のスライダー
- サムネイル画像がポラロイド写真風
- タブボックス
- かわいらしい文字
MUKU
全体的な装飾はSIMPLE STARTと似ておりシンプルなデザインとなっています。
ただ、ヘッダーの背景が黒色になったりとシックな印象となっています。
ポイント
- スライダーのボックスが角丸
- プロフィール設置
- Pick Up記事
- サムネイルが正方形で小さい
- SNSボタンが丸い
- タブボックス
cloud
cloudは使われているデザインはMUKUとかなり似ている設計になっています。
白を基調としたシンプルな設定ですので、雑貨ブログなどとの相性が良いように感じられます。
ポイント
- ヘッダーにスライド画像
- ヘッダー画像が角丸
- 正方形で小さいサムネイル
- プロフィール設置
- SNSボタンが丸い
- 流れる文字あり
Study Bear
シンプルなデザインながらかわいらしさのあるページとなっています。
スライダーやタグ、タブボックスなどかなり細かく設置されている印象です。
ポイント
- ヘッダーに流れる文字
- ヘッダー画像大
- プロフィール設置
- SNSアイコンが丸
- スライダーあり
- ウィジェットの数が多い
AFFINGER6EXのデザイン済みデータの紹介
次にAFFINGER6EXのデザイン済みデータを紹介します。
EX版でも通常のデザインは可能となっていますので、EX版独自のデザインのみの紹介となります。
≫デザイン済みデータのページに移動
INAZUMA ６EX
INAZUMA ６EXはどちらかと言えば、ブログというよりは企業のホームページ向けのデザインとなっています。
EX版から横いっぱいに広がるデザインができるようになったため、1カラムレイアウトでの設計が多く目立ちます。
ポイント
- 横いっぱいのレイアウト
- ブロックごとに異なる背景色
- カウントダウン機能
- 自動更新の日付設定
- タブボックス
- SNSボタンが四角
Separate
シンプルなデザインながらも、１カラムレイアウトを基本としています。
一部２カラムになっていたり、『Read More』をクリックすることで無限にスクロールし中身を見ることができるようになっています。
ポイント
- 横いっぱいのレイアウト
- 2種類のスライダー
- 無限スクロール機能
- プロフィール設置
- SNSボタンが丸
- 斜めの背景色
mocha 6EX
画面表示とともにキャッチコピーの文字が出てきたり、無限にスクロールできる機能など、かわいらしくも様々な機能が導入されています。
EX版唯一の2カラムレイアウトとなっており、ブログへの設置もスムーズにできそうです。
ポイント
- キャッチコピーにボタン
- プロフィール設置
- ランキング機能
- スライダーあり
- SNSアイコンが丸
- 無限にスクロール機能
- かわしらしい文字
- ブロックごとの背景色
MUKU EX
一言で言ってしまえば通常バージョンのMUKUを1カラム化したものになります。
全体的なデザイン構成はMUKUと同じですが、EX版特有の無限スクロールなどが導入されています。
ポイント
- サムネイル画像のカード化
- 1カラムレイアウト
- 無限スクロール機能
- ヘッダーのスライダー機能
- SNSアイコンが丸
Tidy2 EX
こちらも名前の通り通常版のTidy2のDX版となります。
基本のデザインはTidy2のまま、1カラムレイアウトになり、無限スクロール機能がついがされています。
ポイント
- ヘッダーのスライダー
- 無限スクロール機能
- タブボックス
- かわいらしい文字
- 色がグラデーション
- SNSアイコンが丸
WIDE/EX
WIDE/EXもINAZUMA ６EXと同様にブログというよりは企業サイトかポートフォリオなどに適した作りとなっています。
シンプルなつくりとなっており、非常に見やすいサイトとなっています。
ポイント
- ブロックごとに背景が変化
- スライダー
- 1カラムレイアウト
- カウントダウン
AFFINGER6のデザイン済みデータを設定する全手順
ここからはデザイン済みデータを設置する方法を紹介します。
まだダウンロードページを見ていない方はこちらから確認してみてください。
ステップ１：プラグインインストール
デザイン済みデータをダウンロードするには専用のプラグインが必要ですので、まずはそれらをインストールします。
- Customizer Export/Import
- Widget importer/ exporter
になります。
インストールしたら有効化を確認し、できたら次に進んでください。
ステップ２：AFFINGER6専用ページからZipファイルをダウンロード
次に専用ページからZipファイルをダウンロードしていきましょう。
こちらから移動し、少しページをスクロールすると先ほど紹介したデザインサンプルを確認することができます。
するとこのような『ダウンロードの方法及びご利用規約』というところにあるチェックを順番に付けましょう。
こうすることでデザイン済みデータをダウンロードできるようになります。
また少し下にスクロールするとデザイン済みデータがありますので、その中から自分が好きなものを選んでクリックしましょう。
するとファイルをインストールしますので、ファイルを開いてDATファイルとWIEファイルがあることを確認してください。
具体的には以下のようなファイルがあると思います。
多少内容が異なるかもしれませんが、DATファイルとWIEファイルがあれば大丈夫ですので問題がなければ次に進みましょう。
ステップ３：２つのファイルをインポート
次に取得した2つのファイルをWordpressにインポートしていきます。
まずはDATファイルからです。
WordPressの設定画面に行き、「外観」→「カスタマイズ」→「エクスポート/インポート」と進んでいきましょう。
すると以下のような画面にたどり着きますので、『ファイルの選択』を押してaffinger-export.datをインポートします。
これで完了です。
次にウィジェットをインポートします。
「ツール」→「Widget Importer&Exporter」→「ファイルの選択」でaction-sample.com-skin4-widgets.wieをインポートします。
これで終了です。
多少画像などがなかったりする場合はありますが、全体的なデザインは完了していると思います。
AFFINGER6のデザインの設定は「AFFINGER管理」か「外観」→「カスタマイズ」から変更できますので試してみてください。
お疲れさまでした。
補足：デザインが反映されない時
もしかするとデザインが反映されないという可能性があります。
そのような時は次の方法を試してみましょう。
対処法１：デザインをリセットする
WordPressの設定画面で、「AFFINGER管理」→「全体設定」に進み、カラーパターンとデザインパターンを『リセット』に設定しましょう。
カラーパターンとデザインパターンで全体のデザインが決まっていますので、ここを変更すれば直る可能性があります。
変更後は必ず画面下部にある『save』をクリックすることは忘れないでください。
対処法２：カスタマイザーをリセットする
またWordpressの設定画面から「外観」→「カスタマイズ」→「全体カラー設定」に進み、『カスタマイザーをリセットする』の箇所から『リセット』をクリックしましょう。
これでカラーの初期値がリセットされますので、デザインが反映さえるかもしれません。
これでもデザインが反映されない場合は、もう一度一から試してみるかお問い合わせを利用してみるのが良いでしょう。
まとめ
今回はAFFINGER6でデザイン済みデータのテンプレートをダウンロードする方法を紹介しました。
AFFINGER6は初心者にとっては設定が難しいと言われていますが、デザイン済みデータを使えば簡単にデザインを調整することができます。
一からデザインを触ることに抵抗がある人でも、ある程度決まった状態からの修正なら比較的簡単に取り組めますので自分好みのデザインに変更してみるのもよいでしょう。
当ブログではほかにもAFFINGER6やブログに関する情報を載せているので参考にしてみてください。