WordPress

AFFINGER5のデザインテンプレートを設定する方法は?

AFFINGER5のデザインテンプレートを設定する方法は?
アフィンガーを購入してWordPressでブログ始めようと思うんだけど、あんまり初期設定に時間かけずに、どんどんブログ書いていきたい。

ブログの見た目のデザインを簡単に済ませる方法ってある?

アフィンガー買ってみたのはいいけれど、カスタマイズできる項目がたくさんあって迷うし、なかなかデザインが決まらない・・。

あらかじめ完成したデザインとかってないのかな?

 

アフィンガーでは「デザイン済みデータ」も配布されてるから、それを使ってみるとイイよ!
ゆうか堂

 

AFFINGER5はそのカスタマイズ性の豊富さゆえ、初心者の方はどこをどう触ったら思い通りのデザインになるのか、ちょっと手間取ってしまうかも知れません。

すぐにどんどん記事を書いていきたい人にとっては、ブログの見た目などの大まかなデザインは、手っ取り早く済ませたいという気持ちが強いのではないでしょうか。

 

そこでここでは、AFFINGER5であらかじめ用意されている「デザイン済みデータ」の種類や設定方法などについて、見ていきたいと思います。

 

『AFFINGER5』デザイン済みデータ

『AFFINGER5』および、『AFFINGER5 EX版』用のデザイン済みデータ。

 

このテーマ自体は、無料で利用できます。

なお後述しますが、あらかじめプラグインをインストールする必要があります。

 

ここでは、用意されているデザイン済みデータを紹介していきます。

  • Tidy
  • NOTE.2020
  • PINKY
  • HappyDiary 2020
  • Lupine 2020
  • YouTube
  • YouTube2
  • MOCHA(EX版用)
  • INAZUMA(EX版用)
  • START UP(EX版用)

 

Tidy(整理された見やすいデザイン)

Tidy
https://on-store.net/design-sample-affinger5/

 

ヘッダー画像の下に、カテゴリー別の記事に行ける「おすすめヘッダーカード」。

その下にカテゴリーごとの記事ページに行けるバナー。さらに最新の数記事を紹介。

サイドバーは設定されていません。

 

カテゴリーのジャンルがけっこう異なってて、それぞれを目立たせたい場合に有効なデザインですね。

また、訪れたユーザーが興味のあるカテゴリーの記事に、迷うことなくスムーズにアクセスしやすそうです。

 

NOTE.2020(使いやすい、シンプルイズベストなデザイン)

NOTE.2020
https://on-store.net/design-sample-affinger5/

 

シンプルに書きたい人向けのデザイン。

 

ヘッダー部分には、書いた記事が自動的に流れるスライドショー。

「おすすめヘッダーカード」の下には最新記事と、サイドバーには自己紹介や注目してほしいページへのリンク。

 

アフィンガーのデフォルトのテーマとそう変わらず、スッキリした見やすいトップページですね。

筆者的にはこれが一番使いたいデザインかな。

 

PINKY(TOP写真でインパクトを出すブログデザイン)

affinger5 PINKY
https://on-store.net/design-sample-affinger5/

 

ヘッダー部分にインパクトの利いた画像を置いて、ブログを印象付けたい場合に適したテーマ。

 

以下には、自動的にオススメ記事が横に流れるスライドショー。

その下は、最新記事&自己紹介や記事リンクのサイドバーで構成されています。

 

HappyDiary 2020(写真で彩る可愛いダイアリーデザイン)

HappyDiary 2020
https://on-store.net/design-sample-affinger5/

 

写真や画像を積極的に取り入れたいブログ向き。

 

ヘッダー部分は記事のスライドショー。

さらにヘッダーカード・おすすめ記事など、にぎやかに写真を配置することで、読者に興味を持ってもらい読んで欲しいコーナーや記事に誘導できます。

 

サイドバーにもピックアップ記事のスライドショーと、自己紹介・カテゴリー・おすすめ記事。

メインとなる左側の最新記事コーナーにも大きな画像が入るようになっていて、ビジュアルをふんだんに使うことにこだわったデザインですね。

 

Lupine 2020(LPなど1カラム向けデザイン)

Lupine 2020(LPなど1カラム向けのワンストップデザイン)
https://on-store.net/design-sample-affinger5/

  

1カラム、サイドバー無し。

商品の購入や申込みに特化したランディングページ(LP)用として利用できます。

 

また、洗練された、スタイリッシュなイメージをまとわせたいブログやサイトにも向いてますね。

 

YouTube(動画メインのサイトに)

YouTube
https://on-store.net/design-sample-affinger5/

 

YouTubeをブログで効果的に伝えることを目的としたデザイン。1カラム。

別途、動画関連の無料プラグインが必要となります。

 

YouTube2(動画メインサイト向け・2カラム)

YouTube2
https://on-store.net/design-sample-affinger5/

 

上と同様、YouTuberのブログ向けデザイン。

 

こちらは2カラムで、カテゴリーに飛べるリンクバナーもあり、より機能的ですね。

こちらも別途、動画関連の無料プラグインが必要となります。

 

MOCHA(ゆるふわ癒し系・EX版用)

MOCHA
https://on-store.net/design-sample-affinger5/

 

MOCHA(モカ)は『AFFINGER5 EX』用のデザインデータ。

フォントや見出しなど全体的にふわっとしたデザインで、優しさや暖かみが感じられる印象。

 

機能的には、おすすめヘッダーカードやおすすめ記事コーナー、サイドバーには自己紹介やカテゴリーリンクなど。

またメイン部分には、最新記事だけじゃなくカテゴリーやタグなど自由にリンク先を設定できる、タイル状のバナーが並んだ構成になってますね。

 

INAZUMA(黒が映えるクール&シャープ・EX版用)

INAZUMA
https://on-store.net/design-sample-affinger5/

 

INAZUMAは黒を基調とした、クール&シャープな格好良いテーマという印象ですね。

 

おすすめヘッダーカードや、サイドバーのスライドショー機能。

MOCHAと同様、メイン部分は自由にコンテンツを入れられる、タイル状のバナーが並ぶ構成です。

 

START UP(企業サイト向け・EX版用)

START UP
https://on-store.net/design-sample-affinger5/

 

企業向けサイトや、個人のブランディングサイトに適した『START UP』。

 

1カラムで、不要なものは非表示。

必要最小限の表示を意識した、シンプルで落ち着いたデザインです。

 

 

デザイン済みデータの設定方法

ではここから、実際に『AFFINGER5』にデザイン済みデータを設定するやり方を紹介していきます。

 

なお、このデータは原則として初期状態での利用を想定していますが、もし既に何かしらのデータが入っている場合は、バックアップを取ることをおすすめします。

 

【1】デザイン済みデータをPCへダウンロード

まず、デザイン済みデータを自分のパソコンにダウンロードします。

 

アフィンガーを公式に販売している「STINGER STORE」の、該当ページに入ります。

STINGER STOREのデザイン済みデータ配布ページ

 

 

今回は「NOTE.2020」で説明します。

https://on-store.net/design-sample-affinger5/

データについての説明箇所の、「※承認事項を了承の上、ダウンロードする」という青いボタンをクリック。

 

すると、左のようなzip形式のファイルがダウンロードされ、自動的に右のファイルが作られます。

もし右のファイルがダウンロードされてない場合は、zipファイルを解凍すると出てくるかと思います。

 

解凍されたファイルの中身は、このようになっています。

 

【2】プラグイン&デザイン済みデータのインストール

次に、デザイン済みデータを利用するために必要なプラグインをインストール。

 

『AFFINGER5』では、「カスタマイザー」・「ウィジェット」・「テーマ管理」の3か所においてカスタマイズします。

そこで、それぞれに用意されたデザイン済みデータを、プラグインを使ってインポート(データを取り込む)するという手順を行います。

 

必要なものは以下の3つとされていますが、有料の「データ引継ぎプラグイン(税込2,980円)」は必ずしも必要ではありません。

 

ちなみに今回初めて筆者も試してみたけど上手くいかず、「データ引継ぎプラグイン」を購入してやってみたら何とか形になりました。

「テーマ管理」の設定は自分でも可能な筈ですが、あまり時間をかけたくないようであれば購入しても良いかも知れませんね。

『AFFINGER5』を同じ設定でたくさんのサイトやブログで使い回したい時は、時間をかけずにデータを引き継げて便利なプラグインだと思います。

ゆうか堂

 

 

「カスタマイザー用」プラグインのインストール&デザイン済みデータのインポート

WordPressのダッシュボード(管理画面)より、「プラグイン」→「新規追加」を選択

 

 

  1. 右上の検索窓に「Customizer Export/Import」と入力すると、プラグインが表示される
  2. 「今すぐインストール」をクリック
  3. インストールが終了すると、同じ場所に「有効化」というボタンが表示されるのでクリック

 

 

次に、デザイン済みデータのインポートを行います。

「外観」→「カスタマイズ」を選択。

メニューの一番下に、「エクスポート / インポート」という項目が追加されているので選択。

 

 

  1. 「ファイルを選択」をクリック
  2. 先ほどダウンロードした「note_2020~」フォルダの「カスタマイザー用」→「affinger5-export.dat」ファイルを選択(開く)
  3. 「インポート」をクリックします

 

これで、AFFINGER5の「カスタマイザー」における、デザイン済みデータのインポートは完了です。

 

 

「ウィジェット用」プラグインのインストール&デザイン済みデータのインポート

まず上記と同様の方法で、ウィジェット用プラグイン「Widget Importer & Exporter」をインストール・有効化します。

 

「ウィジェット用」プラグイン&デザイン済みデータのインストール

続いて、ウィジェット用データのインポートを行います。

  1. 左メニューから「ツール」→「Widget Importer & Exporter」を選択
  2. 「ファイルを選択」をクリックし、先ほどのフォルダ「note_2020~」より「ウィジェット用」→「wing-wp.com-sample21-widgets.wie」を選択(開く)
  3. 「ウィジェットをインポート」をクリック

 

これで、ウィジェットデータのインポートは完了です。

 

 

「テーマ管理」設定のインポート

ここでは、「データ引継ぎプラグイン」を購入・インストールが完了した状態から説明していきます。

 

「テーマ管理」設定のインポート
  1. 左メニューの「AFFINGER5管理」→「データの引き継ぎ」を選択
  2. 「ファイルの選択」をクリックし、フォルダ「note_2020~」の中の「テーマ管理用」→「theme.json」を選択(開く)
  3. 「インポート」をクリック

 

これで、デザイン済みデータにおける「テーマ管理」設定がインポートされました。

 

 

以上で、全データのインポート完了です。

なおメニューは、「外観」→「メニュー」から自分で設定します。

これで、記事がまだ入って無い、または少ないなどの理由で見本の画面とは多少違うかも知れませんが、大まかな骨組みは整っているはずです。

 

 

【3】反映されない場合はリセットしてやり直し

インポートしたにも関わらず設定内容が反映されない場合は、それぞれの箇所でデータのリセット&削除をして、やり直してみて下さい。

 

  • カスタマイザー :「外観」→「カスタマイズ」→「全体カラー設定」→「カスタマイザーをリセットする」
  • ウィジェット  :「外観」→「ウィジェット」から、手動で項目を削除
  • テーマ管理   :「AFFINGER5 管理」→「AFFINGER5 管理リセット」→「全てリセットする」にチェックを入れ「保存」をクリック

 

 

まとめ

以上、『AFFINGER5』で用意されている、デザイン済みデータの紹介・および利用する方法について紹介してきました。

 

ブログやサイトを立ち上げた当初は、細かなデザインに気を取られるよりも、まずはどんどん記事を書いてコンテンツを充実させていくのがPV数や収益を上げる上で重要です。

 

このデザイン済みデータを使えば、大まかなデザインはひとまず完成。

余計な時間を取られることなく、速やかにブログ運営を進めることができますね。

 

『AFFINGER5』をこれから購入したい、または詳しく知りたいという方は、こちらからどうぞ。

 

 

AFFINGER5で固定ページを使ったトップページの作り方は?
アフィンガーの評判・口コミをレビュー!購入して損した理由とは?

アフィンガー(AFFINGER5)はSEOにも強く高速、カスタマイズ性も高く、多くのブロガーやアフィリエイターに人気のWordPressテーマです。ここではどんなテーマなのか紹介しつつ、個人的に感じるイマイチな点を書いてみたいと思います。

続きを見る

 

-WordPress
-

Copyright© ネットビジネス覚え書き , 2021 All Rights Reserved Powered by AFFINGER5.