ブログの見た目のデザインを簡単に済ませる方法ってある？
あらかじめ完成したデザインとかってないのかな？
AFFINGER5はそのカスタマイズ性の豊富さゆえ、初心者の方はどこをどう触ったら思い通りのデザインになるのか、ちょっと手間取ってしまうかも知れません。
すぐにどんどん記事を書いていきたい人にとっては、ブログの見た目などの大まかなデザインは、手っ取り早く済ませたいという気持ちが強いのではないでしょうか。
そこでここでは、AFFINGER5であらかじめ用意されている「デザイン済みデータ」の種類や設定方法などについて、見ていきたいと思います。
『AFFINGER5』デザイン済みデータ
『AFFINGER5』および、『AFFINGER5 EX版』用のデザイン済みデータ。
このテーマ自体は、無料で利用できます。
なお後述しますが、あらかじめプラグインをインストールする必要があります。
ここでは、用意されているデザイン済みデータを紹介していきます。
- Tidy
- NOTE.2020
- PINKY
- HappyDiary 2020
- Lupine 2020
- YouTube
- YouTube2
- MOCHA（EX版用）
- INAZUMA（EX版用）
- START UP（EX版用）
Tidy（整理された見やすいデザイン）
ヘッダー画像の下に、カテゴリー別の記事に行ける「おすすめヘッダーカード」。
その下にカテゴリーごとの記事ページに行けるバナー。さらに最新の数記事を紹介。
サイドバーは設定されていません。
カテゴリーのジャンルがけっこう異なってて、それぞれを目立たせたい場合に有効なデザインですね。
また、訪れたユーザーが興味のあるカテゴリーの記事に、迷うことなくスムーズにアクセスしやすそうです。
NOTE.2020（使いやすい、シンプルイズベストなデザイン）
シンプルに書きたい人向けのデザイン。
ヘッダー部分には、書いた記事が自動的に流れるスライドショー。
「おすすめヘッダーカード」の下には最新記事と、サイドバーには自己紹介や注目してほしいページへのリンク。
アフィンガーのデフォルトのテーマとそう変わらず、スッキリした見やすいトップページですね。
筆者的にはこれが一番使いたいデザインかな。
PINKY（TOP写真でインパクトを出すブログデザイン）
ヘッダー部分にインパクトの利いた画像を置いて、ブログを印象付けたい場合に適したテーマ。
以下には、自動的にオススメ記事が横に流れるスライドショー。
その下は、最新記事＆自己紹介や記事リンクのサイドバーで構成されています。
HappyDiary 2020（写真で彩る可愛いダイアリーデザイン）
写真や画像を積極的に取り入れたいブログ向き。
ヘッダー部分は記事のスライドショー。
さらにヘッダーカード・おすすめ記事など、にぎやかに写真を配置することで、読者に興味を持ってもらい読んで欲しいコーナーや記事に誘導できます。
サイドバーにもピックアップ記事のスライドショーと、自己紹介・カテゴリー・おすすめ記事。
メインとなる左側の最新記事コーナーにも大きな画像が入るようになっていて、ビジュアルをふんだんに使うことにこだわったデザインですね。
Lupine 2020（LPなど1カラム向けデザイン）
１カラム、サイドバー無し。
商品の購入や申込みに特化したランディングページ（LP）用として利用できます。
また、洗練された、スタイリッシュなイメージをまとわせたいブログやサイトにも向いてますね。
YouTube（動画メインのサイトに）
YouTubeをブログで効果的に伝えることを目的としたデザイン。１カラム。
別途、動画関連の無料プラグインが必要となります。
YouTube2（動画メインサイト向け・2カラム）
上と同様、YouTuberのブログ向けデザイン。
こちらは２カラムで、カテゴリーに飛べるリンクバナーもあり、より機能的ですね。
こちらも別途、動画関連の無料プラグインが必要となります。
MOCHA（ゆるふわ癒し系・EX版用）
MOCHA（モカ）は『AFFINGER5 EX』用のデザインデータ。
フォントや見出しなど全体的にふわっとしたデザインで、優しさや暖かみが感じられる印象。
機能的には、おすすめヘッダーカードやおすすめ記事コーナー、サイドバーには自己紹介やカテゴリーリンクなど。
またメイン部分には、最新記事だけじゃなくカテゴリーやタグなど自由にリンク先を設定できる、タイル状のバナーが並んだ構成になってますね。
INAZUMA（黒が映えるクール＆シャープ・EX版用）
INAZUMAは黒を基調とした、クール＆シャープな格好良いテーマという印象ですね。
おすすめヘッダーカードや、サイドバーのスライドショー機能。
MOCHAと同様、メイン部分は自由にコンテンツを入れられる、タイル状のバナーが並ぶ構成です。
START UP（企業サイト向け・EX版用）
企業向けサイトや、個人のブランディングサイトに適した『START UP』。
１カラムで、不要なものは非表示。
必要最小限の表示を意識した、シンプルで落ち着いたデザインです。
デザイン済みデータの設定方法
ではここから、実際に『AFFINGER5』にデザイン済みデータを設定するやり方を紹介していきます。
なお、このデータは原則として初期状態での利用を想定していますが、もし既に何かしらのデータが入っている場合は、バックアップを取ることをおすすめします。
【１】デザイン済みデータをPCへダウンロード
まず、デザイン済みデータを自分のパソコンにダウンロードします。
アフィンガーを公式に販売している「STINGER STORE」の、該当ページに入ります。
⇒ STINGER STOREのデザイン済みデータ配布ページ
今回は「NOTE.2020」で説明します。
データについての説明箇所の、「※承認事項を了承の上、ダウンロードする」という青いボタンをクリック。
すると、左のようなzip形式のファイルがダウンロードされ、自動的に右のファイルが作られます。
もし右のファイルがダウンロードされてない場合は、zipファイルを解凍すると出てくるかと思います。
解凍されたファイルの中身は、このようになっています。
【２】プラグイン＆デザイン済みデータのインストール
次に、デザイン済みデータを利用するために必要なプラグインをインストール。
『AFFINGER5』では、「カスタマイザー」・「ウィジェット」・「テーマ管理」の３か所においてカスタマイズします。
そこで、それぞれに用意されたデザイン済みデータを、プラグインを使ってインポート（データを取り込む）するという手順を行います。
必要なものは以下の３つとされていますが、有料の「データ引継ぎプラグイン（税込2,980円）」は必ずしも必要ではありません。
- カスタマイザー用 ： Customizer Export/Import
- ウィジェット用 ： Widget Importer & Exporter
- テーマ管理用（有料）： データ引継ぎプラグイン
「テーマ管理」の設定は自分でも可能な筈ですが、あまり時間をかけたくないようであれば購入しても良いかも知れませんね。
『AFFINGER5』を同じ設定でたくさんのサイトやブログで使い回したい時は、時間をかけずにデータを引き継げて便利なプラグインだと思います。
「カスタマイザー用」プラグインのインストール＆デザイン済みデータのインポート
WordPressのダッシュボード（管理画面）より、「プラグイン」→「新規追加」を選択
- 右上の検索窓に「Customizer Export/Import」と入力すると、プラグインが表示される
- 「今すぐインストール」をクリック
- インストールが終了すると、同じ場所に「有効化」というボタンが表示されるのでクリック
次に、デザイン済みデータのインポートを行います。
「外観」→「カスタマイズ」を選択。
メニューの一番下に、「エクスポート / インポート」という項目が追加されているので選択。
- 「ファイルを選択」をクリック
- 先ほどダウンロードした「note_2020～」フォルダの「カスタマイザー用」→「affinger5-export.dat」ファイルを選択（開く）
- 「インポート」をクリックします
これで、AFFINGER5の「カスタマイザー」における、デザイン済みデータのインポートは完了です。
「ウィジェット用」プラグインのインストール＆デザイン済みデータのインポート
まず上記と同様の方法で、ウィジェット用プラグイン「Widget Importer & Exporter」をインストール・有効化します。
続いて、ウィジェット用データのインポートを行います。
- 左メニューから「ツール」→「Widget Importer & Exporter」を選択
- 「ファイルを選択」をクリックし、先ほどのフォルダ「note_2020～」より「ウィジェット用」→「wing-wp.com-sample21-widgets.wie」を選択（開く）
- 「ウィジェットをインポート」をクリック
これで、ウィジェットデータのインポートは完了です。
「テーマ管理」設定のインポート
ここでは、「データ引継ぎプラグイン」を購入・インストールが完了した状態から説明していきます。
- 左メニューの「AFFINGER5管理」→「データの引き継ぎ」を選択
- 「ファイルの選択」をクリックし、フォルダ「note_2020～」の中の「テーマ管理用」→「theme.json」を選択（開く）
- 「インポート」をクリック
これで、デザイン済みデータにおける「テーマ管理」設定がインポートされました。
以上で、全データのインポート完了です。
なおメニューは、「外観」→「メニュー」から自分で設定します。
これで、記事がまだ入って無い、または少ないなどの理由で見本の画面とは多少違うかも知れませんが、大まかな骨組みは整っているはずです。
【３】反映されない場合はリセットしてやり直し
インポートしたにも関わらず設定内容が反映されない場合は、それぞれの箇所でデータのリセット＆削除をして、やり直してみて下さい。
- カスタマイザー ：「外観」→「カスタマイズ」→「全体カラー設定」→「カスタマイザーをリセットする」
- ウィジェット ：「外観」→「ウィジェット」から、手動で項目を削除
- テーマ管理 ：「AFFINGER5 管理」→「AFFINGER5 管理リセット」→「全てリセットする」にチェックを入れ「保存」をクリック
まとめ
以上、『AFFINGER5』で用意されている、デザイン済みデータの紹介・および利用する方法について紹介してきました。
ブログやサイトを立ち上げた当初は、細かなデザインに気を取られるよりも、まずはどんどん記事を書いてコンテンツを充実させていくのがPV数や収益を上げる上で重要です。
このデザイン済みデータを使えば、大まかなデザインはひとまず完成。
余計な時間を取られることなく、速やかにブログ運営を進めることができますね。
『AFFINGER5』をこれから購入したい、または詳しく知りたいという方は、こちらからどうぞ。
-
-
アフィンガーの評判・口コミをレビュー！購入して損した理由とは？
アフィンガー（AFFINGER5）はSEOにも強く高速、カスタマイズ性も高く、多くのブロガーやアフィリエイターに人気のWordPressテーマです。ここではどんなテーマなのか紹介しつつ、個人的に感じるイマイチな点を書いてみたいと思います。
続きを見る