【完全無料】AFFINGER6デザインテンプレートの設定方法

この記事で解決できる悩み

こんな悩みを解決する記事を用意しました！

ボクの初めてのブログも「30万PV」を超えるメディアに成長しました！

本記事の信頼性

とはいえ、ちょっと何言ってるかわかんないですよね？

そこで、記事の前半で「AFFINGER6デザインテンプレートの種類と設定方法」を。

後半では「デザインテンプレートが上手く反映されない時の対処法」について解説します。

本記事を最後まで読むことで、サクッとおしゃれなデザインに着替えて、ブログを書き始められますよ！

＼稼ぐに特化したテーマ／

当サイト限定特典プレゼント中

『AFFINGER6（アフィンガー6）』とは

『AFFINGER6（アフィンガー6）』とは、「稼ぐ」に特化した有料のWordPressテーマです。

当サイトも『AFFINGER6』でできています。

そんなAFFINGER6には「デザイン済みデータ」というテンプレートがあるんです。

デザイン済みデータとは

「デザイン済みデータ」とは、インポートするだけで「おしゃれなデザイン」に着せ替えられるテンプレートのこと。

ブログのデザインは、次の３つをカスタマイズすることで設定できます👇

デザインを司る三要素

「デザイン済みデータ」は、この３つがカスタマイズされたものを「無料」でインポートできるのです。

とはいえ、インポートしてから「さらなる変更」を加えることもできますよ。

また、AFFINGER6には「デザインカード」というプラグインもあるんです。

公式サイトAFFINGER6専用デザイン済みデータ配布ページ（β）

デザインカードとの違い

「デザインカード」は、AFFINGER専用のプラグインになります。

「デザイン済みデータ」より、さらにカンタンにおしゃれなデザインに着せ替えられるんです。

３ステップ

つまり、プラグインを入れるだけ！

なんと、こちらも「無料」です。

AFFINGER6と、その上位版である「EX」のそれぞれにテンプレートが用意されています👇

４色展開

EX専用

デメリットは、「プラグイン」を常に有効化しておかなければならないこと。

「デザイン済みデータ」はインポート時のみプラグインを使いますが、すぐに削除してOK。

プラグインはなるべく減らしたいですからね！

公式サイト「AFFINGERデザインカード」プラグインを公開しました。

AFFINGER6のデザインテンプレート11種類【デザイン例】

AFFINGER6のデザインテンプレートも、大きく分けて「２種類」あります。

大きく分けて２種類

「AFFINGER6用」と、上位版の「EX用」ですね。

この章のもくじ

ダサかったら意味ないので、チェックしてみましょう！

公式サイトAFFINGER6専用デザイン済みデータ配布ページ（β）

その①SIMPLE START

『SIMPLE START』は、その名のとおりシンプルにスタートできるテンプレートです。

個人的には、いちばん好きなデザインですね。

ヘッダー

サイドバー

メイン

とはいえ、カラーがビビットなので、もう少し柔らかい色にしてあげれば、そのまま使えそうです。

SAMPLESIMPLE STARTのサンプルをみる

DATA GUIDESIMPLE STARTのデータガイドをみる

その②Tidy2

『Tidy2』は、ヘッダーのスライドショーが印象的なテンプレートです。

ヘッダー

サイドバー

メイン

カラーや画像・フォントの影響で「女性的なイメージ」になっていますね。

SAMPLETidy2のサンプルをみる

DATA GUIDETidy2のデータガイドをみる

その③MUKU

『MUKU』も、シンプルなデザインのテンプレートです。

トップページの下部に「ピックアップ記事一覧」があるのは珍しい構成ですね。

ヘッダー

サイドバー

メイン

個人的には、「白ベースに#333（グレーがかった黒）」の配色が最高です。

SAMPLEMUKUのサンプルをみる

DATA GUIDEMUKUのデータガイドをみる

その④cloud

『cloud』も、白ベースで作られたシンプルなテンプレートになります。

ヘッダーではなく、メインのトップに「流れるインフォメーションバー」が印象的ですね。

ヘッダー

サイドバー

メイン

『cloud』のみデータガイドがありません😱

SAMPLEcloudのサンプルをみる

その⑤Study Bear

『Study Bear』がいちばん凝ったデザインテンプレートですね。

これもカラーを変更するだけで「可愛らしいイメージ」を変えられそうです。

ヘッダー

サイドバー

メイン

サンプルサイトには「ダミーウィジェット」が設置されていますが、これらは削除してOKです。

SAMPLEStudy Bearのサンプルをみる

DATA GUIDEStudy Bearのデータガイドをみる

その⑥AFFINGER6 EX用【全６種類】

『MUKU』や『Tidy2』のEX版など、ぜんぶで「６種類」用意されています。

EX用

EX版でしかできない「１カラム（列）」や「記事一覧のカード型」のデザインが多いですね。

『AFFINGER6 EX』については別記事でレビューしています👇️

関連記事AFFINGER6 EXその「違い」を完全解説【ACTION PACK3】

AFFINGER6 EXその「違い」を完全解説【ACTION PACK3】

AFFINGER6デザインテンプレートの設定方法【３ステップ】

AFFINGER6デザインテンプレートの「設定方法」は、次のとおり。

この章のもくじ

最後まで「無料」で設定できる方法を紹介しますね！

まずは、『デザイン済みデータ配布ページ（β）』にアクセスしてください。

パート別に一つ一つカスタマイズしたい方は、別記事をどうぞ👇

関連記事【保存版】AFFINGER6のカスタマイズ方法をパート別に解説！

ステップ①デザイン済みデータをダウンロードする

「利用規約」を確認したら、次の３つに✅を入れます。

ダウンロード前に

すると、デザイン済みデータがダウンロードできるようになります。

ここではテンプレート『SIMPLE START』をダウンロードしました。

zipファイルを解凍すると、次の３つの「フォルダ」と「.txtファイル」が入っています。

フォルダの中身は、次のとおり👇

表は横にスクロールできます

これらをWordPressに入れるには「専用のプラグイン」が必要です。

ステップ②プラグインを入れる

それぞれのファイルを「インポート／エクスポート」するためのプラグインですね。

表は横にスクロールできます

『データ引継ぎプラグイン』のみ有料（2,980円）なので、本記事では手動で設定していきます。

※つまり、「.jsonファイル」は使用しません。

という方は購入したほうが時短になりますね。

無料プラグイン

では、２つのプラグインを「インストール＆有効化」していきましょう。

プラグインの入れ方

まずは、「カスタマイザー」の設定です。

プラグイン『Customizer Export/Import』を有効化すると・・・

のいちばん下に「エクスポート/インポート」が表示されます。

「エクスポート/インポート」をクリックしたら・・・

インポート

※「画像ファイルをダウンロードしてインポートしますか？」のチェックは外したままでOK。

これでカスタマイザーの設定が完了しました！

とはいえ、見た目は変わらないはず。

この段階でプラグイン『Customizer Export/Import』は無効化・削除してOKです。

つづけて、「ウィジェット」の設定です。

プラグイン『Widget Importer & Exporter』を有効化すると・・・

の上部に「インポート/エクスポート」が表示されます。

「インポート/エクスポート」をクリックしたら・・・

インポート

これでウィジェットの設定が完了しました！

インポート結果が表示されます。

サイドバー上部に

この段階でプラグイン『Widget Importer & Exporter』も無効化・削除してOKです。

ステップ③AFFINGER管理でカスタマイズする

プラグイン『データ引継ぎプラグイン』を購入しない場合は、「サンプルガイド」を見ながら「AFFINGER管理」を設定しましょう。

『SIMPLE START』でよければ、本記事で完全解説するので、このまま読み進めてくださいね。

わかりづらくなるので、次章に続きます👇

AFFINGER6デザインテンプレートの設定方法【無料編】

まずは、デザインを再現するために、次の６つを用意してください👇

用意するもの

ここまでのトップページはこんな感じ👇

「プロフィールカード」など今は画像と違ってても、最終的には同じになるので安心してください。

この章のもくじ

10分くらいで終わるので、ついてきてくださいね！

「AFFINGER管理」以外も触ります👇

全体設定カラーパターン

まずは、全体のカラーを設定しましょう。

12色

「Save」をクリック。

ここでは『SIMPLE START』と同じ「青（やさしい）」を選びました。

では、より自由度の高いカラーコードで設定できますよ。

ヘッダー編グローバルメニュー

「メニュー名（例：メイン）」を入力して、「メニューを保存」をクリック。

左の「メニュー項目を追加」から、グローバルメニューに追加する項目を選びます。

ここでは「カテゴリー」を追加してみます。

３ステップ

右の「メニュー構造」に追加されました。

つづけて、「メニュー設定」に移ります。

メニュー設定

「メニューを保存」をクリック。

これでヘッダーに「グローバルメニュー」が設置されました！

スマホでも確認してみてくださいね。

ヘッダー編サムネイルスライドショー

デフォルトでは「無効」になっているので、「フロントページ」を選択します。

これだけでトップページにスライドショーが表示されますよ！

※記事が６本以上ないとスライドしません。

「サムネイル（アイキャッチ）画像」を大きくしたい方は以下を選択してください。

任意

「Save」をクリック。

これで各所の「アイキャッチ画像」がフルサイズになるので、おすすめです。

サイドバー編プロフィールカード

プロフィールカードはWordPress側で設定します。

上から

WordPress側では「Twitter」ですが、アイコンは「X」になっていますね。

もちろん、ほかの「SNS」でもOK。

「サイト」にトップページのURLを入れてもいいですね。

「プロフィール写真」は「アバター画像」から設定してもOK。

「ヘッダー画像」を設定すると、プロフィール画像の後ろに画像が入りますよ。

さいごに「公開」をクリック。

また、プロフィール写真を丸くしたいなら・・・

から「アバター画像を丸くする（※コメント欄のアバター画像含む）」に✅を入れてください。

さらに、「プロフィール情報にhtmlタグを許可する」に✅を入れると、改行したりできますよ。

これでサイドバーの「プロフィールカード」も完成です！

サイドバー編おすすめ記事一覧

プロフィールカードの下に「おすすめ記事」を設置しましょう。

３ステップ

記事のIDは「投稿一覧 or 固定ページ一覧」のいちばん右で確認してくださいね。

さいごに「Save」をクリック。

これでサイドバーに「おすすめ記事一覧」が設置されました！

メイン編タブ式カテゴリ一覧

いよいよラストです。

３ステップ

カテゴリーのIDは「投稿 › カテゴリー」から確認してくださいね。

さいごに「Save」をクリック。

これでトップページに「タブ式カテゴリ一覧」が設置されました！

とはいえ、『SIMPLE START』とまったく同じじゃないかも。

そこで、さいごに「仕上げ」です👇

仕上げ

それぞれサクッと解説します👇

トップページやサイドバーに「新着記事一覧」がいらないなら・・・

任意

記事一覧に「カテゴリー」を表示したいなら・・・

から「記事一覧のカテゴリーを下に表示」に✅を入れてください。

SNSボタンを丸くしたいなら・・・

から「SNSボタンを丸くする」に✅を入れてください。

サイトのタイトルとキャッチフレーズを「中央寄せ」にしたいなら・・・

から「ヘッダーナビゲーションをセンタリング」に✅を入れてください。

グローバルメニューを「太字」にしたいなら・・・

から「第一階層メニューを太字にする（サイドメニュー連動）」に✅を入れてください。

これで『SIMPLE START』の完成です🙌

あとは、お好みで「カラー」を変更してくださいね。

AFFINGER6デザインテンプレートが反映されない場合の対処法

デザインテンプレートが上手く反映されない原因は、既存の設定が残っているから。

なので、一度リセットしてから再び「インポート or 設定」すればOK。

この章のもくじ

それぞれの「リセット方法」を解説します。

対処法①カスタマイザー編

「リセット」をクリック。

これで「カスタマイザーの設定」が初期値に戻ります。

対処法②ウィジェット編

ウィジェットには「リセットボタン」がないので、一つずつ「手動で削除する」必要があります。

インポートして増えたコンテンツを開いて「削除」してください。

※間違って削除しても、左の「利用できるウィジェット」からドラッグ＆ドロップすればOK。

対処法③テーマ管理編

「全てリセットする」に✅を入れて、「Save」をクリック。

これで「AFFINGER管理」及び「Gutenberg設定」が初期値に戻ります。

※Googleアドセンスやアナリティクスのコードもリセットされるので注意！

リセットが済んだら、また「インポート＆設定」してみましょう！

もし、リセットしても上手く反映されない場合は、手動で設定する必要があります。

とはいえ、一つ一つはそんなに難しくないので、やってみましょうね！

【AFFINGER6】おしゃれなトップページの作り方【完全オリジナル】

当ブログの「トップページ 」は、EX版にもできないカスタマイズを施しています。

完全オリジナル

そんな「トップページの作り方」は、次のとおり。

ハイブリッド型の作り方

ステップ④までは別記事で「無料公開」しているので、マネしてみてくださいね👇

関連記事【ハイブリッド】ブログのトップページをサイト型＋一覧型にする方法

当サイトの「20大特典」を改めて見てみましょう。

多すぎて画像に入りきりませんでした！笑

※「太字」がカスタマイズに関する特典になります。

「トップページをハイブリッド型にする方法」の【完全版】もありますね。

基本的にカスタマイズは、すべて「コピペ」でできるようにしてありますが・・・

現に、「2022年2月」にご購入いただいた方のカスタマイズに、「2024年7月」にも即日対応しています！

公式特典もついてくる

さらに、今なら「約40,000円」のプラグインが３つと、WordPressマニュアルが公式特典としてついてきますよ👇

＼稼ぐに特化したテーマ／

当サイト限定特典プレゼント中

関連記事【20大特典】AFFINGER6本音レビュー！３年使ったメリット

【20大特典】AFFINGER6本音レビュー！３年使ったメリット

【Q&A】AFFINGER6デザインテンプレートに関するよくある質問

AFFINGER6デザインテンプレートに関する「よくある質問（Q&A）」は次のとおり。

この章のもくじ

順番に見ていきましょう！

Q1：AFFINGER6で見出しをデザインする方法は？

A見出しデザインは「カスタマイザー」で設定できます。

から「大見出し（H2タグ）」と「中見出し（H3タグ）」をクリック。

簡単３ステップ

他にも、「ボーダーの太さ」や「余白」をpx単位で変更したり・・・

デザインは自由自在

色々できるので触ってみてくださいね！

とはいえ、ボクは「見出し」もオリジナルなものを用意しています。

簡単２ステップ

オリジナルと言っても『manablog copy』のコピーですね。

余談ですが、『manablog copy』の装飾は『AFFINGER4』のコピーなんですよ👇

関連記事Manablog copyのデザインを完全再現【マナブログコピー】

Q2：AFFINGER6以外にデザインに優れたテーマは？

A『SWELL』ですね。

『AFFINGER6』と違って、シンプルなデザインが特徴のテーマです。

この人気を二分する２大テーマは、別記事で徹底比較しています👇️

関連記事【比較表あり】AFFINGER6とSWELLどっち？二刀流が解説

関連記事ブログにおすすめのWordPressテーマ５選【無料・有料】

【まとめ】AFFINGER6のデザインテンプレートでサクッと時短！

「AFFINGER6デザインテンプレート」について解説しました。

まとめ

設定方法もおさらいです👇

簡単３ステップ

本記事のとおり設定すれば、初めてでも「完全無料」でデザインテンプレートを実装できますよ。

まだ『AFFINGER6』を購入してない方は、当サイトの独自特典も受け取ってくださいね👇

＼稼ぐに特化したテーマ／

当サイト限定特典プレゼント中

関連記事【20大特典】AFFINGER6本音レビュー！３年使ったメリット

【20大特典】AFFINGER6本音レビュー！３年使ったメリット

AFFINGERを導入したい方へ