【AFFINGER7】おしゃれなサイトデザインの作り方！公式テンプレート（デザイン済みデータ）の適用手順とデモサイト事例

こんにちは、あるふです。

今回はAFFINGER7でおしゃれなサイトデザインの作り方と題しまして、AFFINGER7公式テンプレートのデザイン済みデータの適用方法やカスタマイズの方法について解説していこうと思います。

本記事を見ることでAFFINGER7の標準デザインよりもオシャレなデザインに変更することが出来るため、ぜひ読みつつデザインの適用をしてみてください。

AFFINGER7のカスタマイズ性は抜群！デザインの幅広さを知ろう

AFFINGER7のカスタマイズ性は幅広く、尚且つ細かく1パーツごとに変更が可能なテーマとなっています。しかし、1つ1つ細かいカスタマイズをしていては時間がかなりかかってしまうのも現実です。

そのため、個人的なおすすめはAFFINGER7の公式サイトで配布されている「デザイン済みテーマ」を使用して、自分なりにカスタマイズしたい部分のみをカスタマイズする。必要な部分のみをカスタマイズするという作り込みをしていただくと、よりカスタマイズに割く時間を削減することができます。

イメージを膨らませよう！AFFINGER7の公式デモサイトとデザイン事例

AFFINGER7の公式サイトで配られている「デザイン済みテンプレート」は次のサイトから確認が可能です。

公式のデモサイト一覧と確認方法

公式でもサイトが一覧として公開されているのは、以下のページです。

ラインナップは以下のラインナップとなっています。

それぞれのデザインについては上記外部リンクの公式サイトから確認をしてください。

最短でおしゃれに！「デザイン済みデータ（テンプレート）」の活用法

それでは、実際にデザイン済みデータの下準備と注意点について確認していきます。

1. デザイン済みデータの種類とダウンロード場所

デザイン済みデータについては、先ほど紹介した公式サイトからダウンロードします。今回はMUKUを例として選択します。

「ダウンロード」ボタンをクリックして、カスタマイズデータをダウンロードします。

2. デザイン済みデータの適用（インポート）手順

WordPressの画面へ移動しプラグインを導入していきます。

公式サイトでは「データ引継ぎプラグイン」が2,980円で販売されていますが、必須ではないので購入しなくても問題ないかなと思います。データ引継ぎプラグインがあれば、AFFINGER管理で設定した設定情報をそのまま引き継ぐことができますが、デザイン済みテンプレートを適用することにより、元の設定データが後ろ髪を引く可能性があるため、こちらは心配だったら購入する程度の判断基準で良いです。

上記2点のプラグインをWordPressのプラグイン検索画面からインストールすれば下準備完了です。

3. 【重要】テンプレート適用時の注意点と事前準備

デザイン済みテンプレートの適用時の注意点と事前準備としては、バックアップは必ず取っておきましょう。

というのも、デザイン済みテンプレートを適用した場合、良くも悪くも元々のデザインや設定値に情報を上書きすることになります。そのため、意図しない変更が加わってしまった場合などを考慮してバックアップは必ず取得しておきましょう。

また、デザイン済みテンプレートを適用することにより、カラー設定などの情報やTOPページのカラム表示などの設定も上書きされる状況となるため、デザインを全て一新して細かな調整をしていくという気持ちで居てください。今のカラー設定などの情報をそのまま維持したい場合は、先述したデータ引継ぎプラグインを購入する必要があります。カスタマイズで追加CSSを利用していた場合はこのカスタマイズについても上書きされます。

当ブログではバックアッププラグインとして「BackWPup」を使用しています。扱いやすいバックアッププラグインでおすすめです。

【実践】AFFINGER7デザイン済みテンプレートの適用方法

実際にAFFINGER7のデザイン済みテンプレートの適用をしていきましょう。適用する前のSEITALITY状況は以下になります。

1. デザイン済みテンプレートの解凍

先ほどダウンロードしたテンプレートデータを解凍していきます。当ブログはAFFINGER7 EXを使用しているため、MUKU EXを適用します。

2. WordPressからカスタマイズを選択

WordPress左メニューから「外観」⇒「カスタマイズ」⇒「エクスポート / インポート」と進み、解凍したファイルの中身から「affinger-export.dat」ファイルを選択し、インポートボタンをクリックします。このとき「画像ファイルをダウンロードしてインポートしますか？」の部分はチェックを入れてインポートボタンをクリックしましょう。

3. WordPressからツールを選択

WordPress左メニューから「ツール」⇒「Widget Importer & Exporter」と進み、解凍したファイルの中身から「action-sample.com-skin2-widgets.wie」ファイルを選択し、「ウィジェットのインポート」ボタンをクリックします。

インポート後の結果として、以下の画像のように成功した表示になっていればOKです。既に追加されているウィジェットがある場合は「ウィジェットがすでにあります」という表示になります。

4. デザイン済みテンプレートの反映を確認

デザイン済みテンプレートの適用後、上記のような画像状況となりました。画像を見ると分かる通りで、デザイン済みテンプレートを適用した場合、一部変更されない部分などがあります。この部分についてはデザイン済みテンプレート適用後に微調整をして、周りのベースカラーと合わせていく調整を行いましょう。

各部分のカスタマイズ方法はAFFINGER7を購入した際にマニュアルサイトのパスワードが配布されているかと思いますので、そちらを確認して該当箇所の修正を適宜行えばOKです。

理想のテンプレートを見つけてAFFINGER7をおしゃれに仕上げよう

AFFINGER7のカスタマイズは凝ったら凝っただけ自分のオリジナルサイトが出来ますが、逆に凝りすぎると時間の消費や奇抜なサイトになってしまいがちです。

そのため、デザイン済みテンプレートを利用して統一性を持たせたデザインにしつつ、適宜編集をして違和感のないデザインにしていくのが無難になります。

とはいえ、カスタマイザーの項目を見ると色々と編集できるポイントも多くあるので、カスタマイズに時間をかけずに楽しみつつブログを運営して行けるのもAFFINGER7の良いところですね。