AFFINGER5

AFFINGER5のデザイン・カスタマイズを解説【画像付きです】

2020年6月1日

AFFINGER5(アフィンガー5)がSEOに強い7つの理由

 

悩んでいる人
最近、AFFINGER5を購入しました。しかし、うまくデザインができずに困っています。そこで、ブログ初心者の僕にも簡単にできるアフィンガー5のデザイン方法を教えてください。

こんな疑問を解決します。

 

 記事の内容

・AFFINGER5のデザイン・カスタマイズをする前にやること
・AFFINGER5のおすすめデザイン・カスタマイズ方法
・AFFINGER5のデザインテンプレート【デザイン済みデータ一覧】
・AFFINGER5のデザインテンプレートを設定する手順

 

 記事の信頼性

カタクリのプロフィール【経歴】

この記事を書いている僕は、「AFFINGER5」を使用しておりまして、月8万円のブログ収益を達成することができました。

 

たしかに、AFFINGER5は、SEOの面であったり、アフィリエイトの面で魅力的なWordPressテーマです。

とはいえ、しっかりとブログをデザインできなければ、AFFINGER5の魅力をグッと落としてしまうことに、つながります。

 

そこで本記事では、当ブログのデザインをベースにしつつ、AFFINGER5のデザイン・カスタマイズ方法を画像付きで徹底解説していきます。

 

また、後半の部分では、自分でAFFINGER5(アフィンガー5)をデザインすることがめんどくさい方向けに、アフィンガー5のデザインテンプレートを6つご紹介しています。

前置きが長くなりましたが、はじめていきますね。

 

すべてのデザインを1日で完了することは厳しいかもなので、ブックマークなどにしておいて、数日にわけてデザインをする方がいいかもです。
カタクリ

 

 まだAFFINGER5を導入していない方へ

アフィンガー5を導入していない方はAFFINGER5はブログ初心者でも使える?【2年目ブロガーが解説】にてAFFINGER5について詳しく解説しているので、そちらを読んでみてください。

 

Contents

AFFINGER5のデザイン・カスタマイズをする前にやること

AFFINGER5のデザイン・カスタマイズをする前にやること

AFFINGER5のデザイン・カスタマイズをする前にやること

 

AFFINGER5のデザインとカスタマイズをする前にやることは、以下の3つです。

 

 アフィンガー5のデザインをする前にやること

  1. アフィンガー5の購入
  2. アフィンガー5の導入
  3. アフィンガー5の初期設定

 

上記のどれかが完了していない人は、アフィンガー5のデザインをする前に必ず完了させておきましょう。

 

また、AFFINGER5の導入方法から、導入後の初期設定については以下の記事で詳しく解説しているので、参考にどうぞ。

 

関連記事
AFFINGER5(アフィンガー5)がSEOに強い7つの理由
【辛口】AFFINGER5の感想をレビュー【評判・口コミあり】

 

 質問:導入から初期設定まで、どれくらいの時間がかかるの?

結論、導入から初期設定までは、30ほどで完了します。

 

とはいえ、人によってパソコンの操作の慣れであったり、パソコンのスペックが異なるかと思います。

そのため、AFFINGER5(アフィンガー5)の導入から初期設定までにかかる時間の目安としては、多く見積もっても1時間ほどと考えておけばOKです。

 

なお、初期設定の方法についてはアフィンガー5の初期設定は「7つだけ」でOK【初心者でも簡単】にて解説しています。

 

AFFINGER5のデザイン・カスタマイズ方法①:トップページ

AFFINGER5のデザイン・カスタマイズ方法①:トップページ

AFFINGER5のデザイン・カスタマイズ方法①:トップページ

 

AFFINGER5(アフィンガー5)のトップページの完成形としては、上記の画像のとおり。

また、トップページのデザインでカスタマイズする箇所は、以下の4つです。

 

 トップページのデザイン

  1. 固定ページ
  2. おすすめヘッダーカード
  3. スライドショー
  4. おすすめ記事

 

では、順に説明していきますね。

 

その①:固定ページを作成

 

まずは、トップページの土台である「固定ページ」を作成しましょう。

 

step
1
固定ページを新規追加

固定ページを新規追加

固定ページを新規追加

 

「固定ページ」「新規追加」をクリックしましょう。

固定ページの名前は、あなたのブログ名でOKです。

 

step
2
固定ページをホームページに選択

固定ページをホームページに選択

固定ページをホームページに選択

 

「外観」「カスタマイズ」「ホームページ設定」をクリックしてください。

 

「ホームページ」の欄に先ほど固定ページで新規追加したページを選択できればOKです。

 

フロントページの記載

フロントページの記載

 

「固定ページ」を再度クリックし、「フロントページ」と記載されていれば、固定ページの作成は完了です。

 

その②:おすすめヘッダーカードの設置

その②:おすすめヘッダーカード

その②:おすすめヘッダーカード

 

おすすめヘッダーカードとは、上記の画像の赤枠で囲っている箇所です。

あなたのブログに訪れた読者が必ずトップページで見る箇所なので、設置していると、アクセス数&収益のアップが見込めます。

 

step
1
アフィンガー5管理画面に移動

アフィンガー5管理画面に移動

アフィンガー5管理画面に移動

 

「アフィンガー5管理」「おすすめ記事一覧」をクリックしてください。

 

少し下にスクロールすると「おすすめヘッダーカード」という項目が表示されます。

 

step
2
おすすめ記事を選択

おすすめ記事を選択

おすすめ記事を選択

 

ここで入力する項目は、以下の3つです。

 

  1. 画像のURL:「メディア」から確認
  2. テキスト:好きなものでOK
  3. リンク先URL:「投稿」から確認

 

上記の3つの入力が終われば、下にスクロールし、「save」をクリックしてください。

そうすれば、トップページに、おすすめ記事が表示されているはずです。

 

その③:スライドショーを設置

その③:スライドショー

その③:スライドショーを設置

 

スライドショーでは、新着記事(新しく投稿した記事)を表示させることができます。

 

step
1
新着記事を見出し3で表示

新着記事を見出し3で表示

新着記事を見出し3で表示

 

先ほど、固定ページで新規作成を行ったトップページを開いてください。

 

そのページで「新着記事」と記載し、見出し3(h3)の設定を行えばOKです。

 

step
2
スライドショーのコードを入力

スライドショーのコードを入力

スライドショーのコードを入力

 

上記に表示されている「スライドショーのコード」を新着記事の下に入力してください。

※コードを打ち込んでしまうと、スライドショーが表示させられてしまいますので画像です。スイマセンm(._.)m

 

新着記事の下に入力

新着記事の下に入力

 

趣味ブログは楽しいです【稼げない理由+収益化のコツを解説】

Blog

2021/4/21

趣味ブログは楽しいです【稼げない理由+収益化のコツを解説】

  悩んでいる人趣味ブログって稼げるのかな?自分が好きなことを発信しつつ、稼げたら最高だなと思っているけれど、人生そんな甘くないよなぁ。(ちょっと期待している) こんな疑問を解決します。    記事の内容 ・趣味ブログは楽しい【稼げない理由は1つだけ】 ・趣味ブログで収益を稼ぐコツ ・趣味ブログのジャンルを7つ紹介 ・趣味ブログに関する「質問」に回答    記事の信頼性 カタクリ(@katakuri_29) この記事を書いている僕はブログ歴1年4ヶ月のブロガーです。今は趣味で ...

続きを読む

WordPressテーマ「Diver」のデメリット【評判+口コミあり】

Blog

2021/5/31

WordPressテーマ「Diver」のデメリット【評判+口コミあり】

  悩んでいる人WordPressテーマ「Diver」が気になっている。そこで、Diverのデメリットとメリットを知りたいな。また、評判や口コミなどもセットで見ておきたい。 こんな疑問を解決します。    記事の内容 ・WordPressテーマ「Diver」とは? ・Diverのデメリットを4つ紹介 ・Diverのメリットを9つ紹介 ・Diverを他のWordPressテーマと比較 ・Diverの「評判・口コミ」まとめ    記事の信頼性 カタクリ(@katakuri_29) ...

続きを読む

ブログでキーワード選定をするコツ【初心者向けマニュアル】

Blog SEO

2021/4/13

ブログでキーワード選定をするコツ【初心者向けマニュアル】

  悩んでいる人ブログのキーワード選定のやり方が知りたいな。というのも、10記事ほど書いてみたけれど、まったくアクセスがないんだよね…。また、ブログ初心者向けにキーワード選定のコツみたいなのがあれば、セットで教えて欲しいなぁ。 こんな疑問を解決します。    記事の内容 ・ブログでキーワード選定をする目的 ・キーワード選定を5ステップで解説 ・ブログでキーワード選定をするコツ ・キーワード選定の後に、初心者がやるべきこと ・キーワード選定に関する質問リスト    記事の信頼性 ...

続きを読む

「ブログ」vs「note」どっちが稼げる?【5つの違いを解説】

Blog

2021/4/1

「ブログ」vs「note」どっちが稼げる?【5つの違いを解説】

  悩んでいる人ブログかnoteでお金を稼ぎたい。でも、自分がどっちに向いているのかわからない。どっちにせよ、とにかくお金を稼ぎたいなぁ。 こんな疑問を解決します。    記事の内容 ・「ブログ」vs「note」どっちが稼げる? ・ブログとnoteの5つの違いを解説 ・ブログとnoteを掛け合わせつつ、稼ぐ手順    記事の信頼性 カタクリ(@katakuri_29) この記事を書いている僕はブログ歴1年3ヶ月のブロガーです。今はブログで月8万円ほどの収益を稼ぎつつ、一人暮ら ...

続きを読む

AFFINGER5(アフィンガー5)がSEOに強い7つの理由

AFFINGER5

2021/4/13

アフィンガー5の初期設定は「7つだけ」でOK【初心者でも簡単】

  悩んでいる人先日、アフィンガー5を導入しました。しかし、何から始められばいいのかわかりません。そこで、まずはAFFINGER5の初期設定のやり方を教えてください。 こんな疑問を解決します。    記事の内容 ・アフィンガー5の初期設定は「7つだけ」でOK ・アフィンガー5の初期設定とセットでやるべきこと    記事の信頼性 カタクリ(@katakuri_29) この記事を書いている僕はブログ歴1年3ヶ月のブロガーです。今は「AFFINGER5」を使いつつ、月に8万円ほどの ...

続きを読む

 

コードをうまく入力できれば、上記のようなスライドショーがトップページに表示されます。

また、それぞれのコードをいじることで、スライドショーに表示される記事が変わってきたりするので、AFFINGER5に慣れてきたら、自己流のスライドショーにしてみましょう。

 

その④:おすすめ記事を表示

その④:おすすめ記事を表示

その④:おすすめ記事を表示

 

アフィンガー5のトップページのデザインで最後のカスタマイズは、おすすめ記事の表示です。

おすすめ記事の表示では、カテゴリーごとに記事を表示させることができます。

 

step
1
おすすめ記事を見出し3で表示

おすすめ記事を見出し3で表示

おすすめ記事を見出し3で表示

 

先ほどの新着記事と同様に「おすすめ記事」と記載し、見出し3(h3)の設定をしてください。

※「おすすめ記事」ではなく、「人気記事」や「カテゴリー別記事」など、オリジナルの名前をつけてもOKです。

 

step
2
バナー風ボックスの作成

バナー風ボックスの作成

バナー風ボックスの作成

 

まずは、上記の赤枠で囲っている「バナー風ボックス」を作成しましょう。

 

左右50%ずつに分割

左右50%ずつに分割

 

「タグ」「レイアウト」→「PCとTab」「左右50%」を選択してください。

 

バナー風ボックスを選択

バナー風ボックスを選択

 

「タグ」「ボックスデザイン」「バナー風ボックス」「基本」を選択してください。

 

さまざまなコードが表示

さまざまなコードが表示

 

さまざまなコードが出てきましたが、入力することは以下の3点です。

 

  1. st-flexbox url=“リンク先のURL”
  2. title=“カテゴリー名”
  3. backgroud_image=”タイトルの背景画像”

 

ちなみに、当ブログのコードは以下のようになっています。

※URLなどは、人によって違ってくるので、以下は画像です。

 

当ブログのコード

当ブログのコード

 

step
3
おすすめ記事を表示

おすすめ記事を表示

おすすめ記事を表示

 

次は、カテゴリー別に「おすすめ記事」を表示させていきましょう。

 

ブログカードを表示

ブログカードを表示

 

「カード」をクリックすると「ブログカード」のコードが表示されます。

ここでも、さまざまなコードが表示されましたが、入力する項目は以下の2つのみ。

 

  • id=記事のID
  • readmore=“続きを読むのオン/オフ”

※記事のIDは「投稿」をクリックすると、それぞれの記事のIDが表示されます。

 

上記の2つの項目の入力が完了すれば、おすすめ記事が表示されるようになります。

 

step
4
おすすめ記事のタイトルのみを表示

おすすめ記事のタイトルのみを表示

おすすめ記事のタイトルのみを表示

 

先ほどの設定の場合、ブログカードに「タイトル」「本文」が記載されてしまいます。

※ブログカードに本文が表示されてしまうと、タイトルが強調されにくくなるため、クリック率が低くなる可能性があります。

 

「抜粋設定」にチェックマークを入れる

「抜粋設定」にチェックマークを入れる

 

「アフィンガー5管理」「デザイン」「抜粋設定」をクリックして下記の画像の項目にチェックマークを入れましょう。

 

「デフォルトじゃなくて、ブログカードをもっとデザインしたい!」という方はAFFINGER5(アフィンガー)でブログカードを作る方法【コツあり】にて詳しく解説しているので、そちらを参考にしてみてください。

 

余談:404エラーページもデザインしてみよう

余談:404エラーページもデザインしてみよう

 

1つ余談ですが、上記のような404エラーページもデザインしておくと、サイトの質がグッと高まりますよ。

 

なお、詳しいカスタマイズ方法は【余裕】アフィンガー5で404エラーページをアレンジする方法にて解説しているので、そちらをどうぞ。

 

以上で、AFFINGER5(アフィンガー5)のトップページのデザインが完了です。

 

どれも必須の項目ではないので、あなたのブログデザインに合わせて項目を消したり、追加したりしてもいいですね。
カタクリ

 

AFFINGER5のデザイン・カスタマイズ方法②:サイドバー

AFFINGER5(アフィンガー5)のデザイン方法②:サイドバー

AFFINGER5のデザイン・カスタマイズ方法②:サイドバー

 

AFFINGER5のサイドバーのデザインでは、以下の部分をカスタマイズします。

 

 サイドバーのデザイン

  1. 検索窓
  2. 管理者画面
  3. 人気記事

 

では、順に説明していきますね。

 

その①:検索窓

その①:検索窓

その①:検索窓

 

まずは、読者があなたのブログの記事を検索するために使用する、「検索窓」を設置しましょう。

 

検索を左から右にフリックする

検索を左から右にフリックする

 

「外観」「ウィジェット」をクリックし、左側にある「検索」というタブを左にフリックすればOKです。

 

検索窓の名前の変更

検索窓の名前の変更

 

また、タイトルを変更することで、トップページに表示される検索窓の名前が変わります。

 

その②:管理者画面

その②:管理者画面

その②:管理者画面

 

管理者画面とは、あなたの自己紹介のことです。

管理者画面を充実させておくことで、以下のようなメリットがあります。

 

  • お仕事の依頼
  • SNSへの流入
  • ブログのアクセス&収益の増加

 

上記のとおりです。

では、管理画面のデザインをしていきましょう。

 

step
1
管理者情報の入力

プロフィールの入力

管理者情報の入力

 

「ユーザー」「プロフィール情報」であなたの管理者情報を入力しましょう。

 

step
2
画像の設定

プロフィール画像の設定

画像の設定

 

「外観」「カスタマイズ」「オプションカラー」「サイト管理者紹介」をクリックしてください。

 

「アバター画像」の箇所に画像として表示したい画像をアップロードしましょう。

 

「プロフィールカードに変更」にチェックする

 

最後に、上の赤枠で囲った箇所にチェックマークを入れてください。

 

step
3
管理者画面を追加

管理者画面を追加

管理者画面を追加

 

「外観」「ウィジェット」をクリックし、「STTINGER管理者紹介」を先ほどの検索窓と同様に左側からフリックしてください。

以上で、管理者画面の設定は完了です。

 

なお、管理者紹介には色々なカスタマイズ方法がありまして、詳しくは【超簡単】アフィンガー5でプロフィールカードを作成する方法にて解説しています。アレンジしたい方はどうぞ。

 

その③:人気記事

その④:人気記事

その③:人気記事

 

AFFINGER5(アフィンガー5)のサイドバーデザインで最後の項目は、人気記事の表示です。

 

「おすすめ記事一覧の作成」へ進む

「おすすめ記事一覧の作成」へ進む

 

「アフィンガー5管理」「おすすめ記事一覧」「おすすめ記事一覧の作成」へと進んでください。

ここで入力する項目は、以下の2つです。

 

  • おすすめ記事一覧に表示する文字:好きなものでOK
  • 任意の人気記事の指定:記事のIDを入力

 

上記のとおりでして、記事のIDは、ブログカードを作成した時と同様に、投稿画面から確認できます。

 

以上で、AFFINGER5(アフィンガー5)のサイドバーのデザインが完了です。

 

AFFINGER5のデザイン・カスタマイズ方法③:フォント

AFFINGER5のデザイン・カスタマイズ方法③:フォント

AFFINGER5のデザイン・カスタマイズ方法③:フォント

 

AFFINGER5(アフィンガー5)のフォントのデザインでは、以下の箇所をカスタマイズします。

 

 フォントのデザイン

  1. 見出し(h2とh3)
  2. フォントの種類
  3. フォントのサイズ
  4. 記事の行間

 

では、順に説明していきます。

 

その①:見出し(h2とh3)

その①:見出し(h2とh3)

その①:見出し(h2とh3)

 

本記事で紹介する、見出しのデザインの完成形は上記の画像のとおりです。

 

「各テキストとhタグ」をクリック

「各テキストとhタグ」をクリック

 

「外観」「カスタマイズ」「各テキストとhタグ」をクリックしてください。

まずは、「h2タグ」から編集していきます。

 

h2タグの編集①

h2タグの編集②

h2タグの編集

 

結論、以下の5つの項目を設定すればOKです。

 

  1. 文字色=#3f3f3f
  2. ボーダー色=#4865b2
  3. 左ラインデザインに変更=オン
  4. 背景画像の横位置=左
  5. 背景画像の縦位置=真ん中

 

また、①と②の「#〇〇〇〇〇〇」といった英数字の列は、カラーコードと呼ばれておりまして、英数字を変更することで、見出しの色を変えることができます。

どの色がどの英数字なのか、といったところはカラーコード一覧表を参考にしてみてください。

 

その②:フォントの種類

その②:フォントの種類

その②:フォントの種類

 

「アフィンガー5管理」「デザイン」「フォントの種類」をクリックしてください。

当ブログのフォントの種類は、以下のとおりです。

 

font-family:Noto, "Hiragino Sans", Helvetica, Arial, sans-serif;

 

さまざまなフォントがありますので、あなたのブログに合ったフォントを見つけられるといいですね。

 

その③:フォントのサイズ

その③:フォントのサイズ

その③:フォントのサイズ

 

「アフィンガー5管理」「デザイン」「フォントのサイズ」をクリックしてください。

フォントのサイズで変更する点は、以下の4つです。

 

  1. 基本=16
  2. 記事タイトル=18
  3. h2タグ=18
  4. h3タグ=18

※変更後に、あなたの好きなサイズにしてもOKです。

 

その④:文字の行間

その④:記事の行間

その④:文字の行間

 

最後に、文字の行間の設定をご紹介します。

先ほど設定した「フォントのサイズ」と同じ画面で設定できまして、文字の行間で設定する点は4つです。

 

  1. 基本=30
  2. 記事タイトル=36
  3. h2タグ=30
  4. h3タグ=36

※変更後にご自身の好きなサイズにしてもOKです。

 

以上で、AFFINGER5(アフィンガー5)のフォントのデザインが完了です。

 

AFFINGER5のデザイン・カスタマイズ方法④:アイキャッチ画像

AFFINGER5のデザイン・カスタマイズ方法④:アイキャッチ画像

AFFINGER5のデザイン・カスタマイズ方法④:アイキャッチ画像

 

AFFINGER5(アフィンガー5)のアイキャッチのデザインでは、以下の2点をカスタマイズします。

 

 アイキャッチのデザイン

  1. アイキャッチ画像の位置
  2. アイキャッチ画像の種類

 

では、順に説明していきます。

 

その①:アイキャッチ画像の位置

 

AFFINGER5(アフィンガー5)を購入したデフォルトの状態だと、アイキャッチ画像が「タイトルの上」に表示される可能性が大です。

 

とはいえ、「別にアイキャッチ画像がタイトルの上に表示されても問題なし!」という方は、「その②:アイキャッチ画像のサイズ」に進んでいただいてOKです。

 

では、アイキャッチ画像を「タイトルの下」に配置する方法を解説していきますね。

 

「アイキャッチ設定」をクリック

「アイキャッチ設定」をクリック

 

「アフィンガー5管理」「投稿・固定記事」「アイキャッチ設定」とクリックしてください。

 

「アイキャッチ画像をタイトル下表示に変更する」の項目にチェックマークを入れればOKです。

 

その②:アイキャッチ画像の種類

 

次に、アフィンガー5で表示されるアイキャッチ画像の種類を変更する方法です。

AFFINGER5では、アイキャッチ画像を以下の3種類に変更することが可能です。

 

  1. 何もしない←当ブログも使用
  2. ワイド化:画面全体に広げる
  3. ポラロイド化:画像の周りを線で囲む

 

こんな感じです。

 

アイキャッチ画像の種類の変更

アイキャッチ画像の種類の変更

 

変更方法は、先ほどと同様に、「アフィンガー5管理」「投稿・固定記事」「アイキャッチ設定」と進むだけです。

 

とはいえ、アイキャッチ画像の種類に関しては、かなり個人によって好きor嫌いがわかれてくると思うので、変更してみて決めるといいかもです。

 

「そもそもアイキャッチ画像は、どうやって作ればいいの...?」という方はブログのアイキャッチの作り方を5つの手順で解説【初心者でも簡単】にて初心者の方でもサクッと作れる方法を解説しているので、そちらを読んでみてください。

 

以上で、アフィンガー5のデザインをカスタマイズする4つの方法が完了です。

 

長い時間でしたが、おつかれさまでした。
カタクリ

 

AFFINGER5のデザインテンプレート【デザイン済みデータ一覧】

AFFINGER5(アフィンガー5)のデザインテンプレート

AFFINGER5のデザインテンプレート【デザイン済みデータ一覧】

 

AFFINGER5(アフィンガー5)のデザインテンプレートはすべてで6つあります。

 

 アフィンガー5のデザインテンプレート

  1. Note
  2. Lupine
  3. PINKY
  4. Happy Diary
  5. YouTube1
  6. YouTube2

 

では、順に説明していきます。

 

※「もっと詳しく1つずつ知りたい!」という方は、「AFFINGER5公式サイト」からデザインテンプレートをチェックすることができますので、そちらをどうぞ。

 

デザインテンプレート①:Note

デザインテンプレート①:Note

デザインテンプレート①:Note

 

Noteは、シンプルなデザインが特徴のテンプレートです。

 

あまりデザインにこだわるのではなく、ブログを淡々と描き続ける方向けです。

 

また、シンプルなデザインのブログは、万人に愛されているので、デザインテンプレートに迷っているのであれば、これを選べば問題なしです。

 

デザインテンプレート②:Lupine

デザインテンプレート②:Lupine

デザインテンプレート②:Lupine

 

Lupineは、上記の写真からもわかるように、うつくしさを徹底的に追求しているデザインテンプレートです。

 

風景画像ではなく、人物画像を多用するブログなどであれば、かなり最適なブログデザインですね。

 

また、アフィリエイトのボタンなどが写真とマッチして自然に配置できるので、美容系のブログには最適かもです。

 

デザインテンプレート③:PINKY

デザインテンプレート③:PINKY

デザインテンプレート③:PINKY

 

PINKYを一言で表すなら「かわいい」を追求したデザインテンプレートです。

 

ヘッダー画像でインパクトのある写真で読者を魅了し、さらにスライドショーなどを利用すれば、読者はメロメロになってしまいます。

 

また、インスタなどと併用してブログを運営すれば、ブログが「バエル」でしょう。

 

デザインテンプレート④:Happy Diary

デザインテンプレート④:Happy Diary

デザインテンプレート④:Happy Diary

 

Happy Diaryは、一言で言えば写真でブログを彩り「やわらかい」印象を与えるデザインテンプレートです。

 

元々アフィンガー5では、シンプルなデザインが多く男性向けのテーマであると言われているますが、その中でもHappy Diaryのデザインテンプレートは、かなり「やわらかい」テンプレートです。

 

そのため、ブログ全体のデザインに「やわらかさ」を出したいのであれば最適のデザインテンプレートです。

 

デザインテンプレート⑤:YouTube1

デザインテンプレート⑤:YouTube1

デザインテンプレート⑤:YouTube1

 

YouTube1では、YouTubeのアイコンの「赤色」をモチーフにしたデザインテンプレートです。

 

そのため、ブログ運用をYouTubeと掛け合わせて行うのであれば、掛け算が最大化されるデザインテンプレートです。

 

また、YouTubeのアイコンを意識したブログデザインはあまり使用されていないため、他のブロガーとの差別化ができます。

 

デザインテンプレート⑥:YouTube2

デザインテンプレート⑥:YouTube2

デザインテンプレート⑥:YouTube2

 

YouTube2もYouTubeを意識したデザインテンプレートですが、YouTube1に比べて、そこまでYouTubeの色はないです。

 

そのため、YouTubeをやりつつ、ブログに取り組む方向けですね。

 

結果、読者の圧迫感などが取り除かれ、気軽にあなたのブログを読んでくれます。

 

AFFINGER5でおすすめのデザインテンプレートを決める方法

 

上記では、6つのアフィンガー5のデザインテンプレートをご紹介しました。

とはいえ、「結局、どのデザインテンプレートがいいのかわからない...」といった方もいるはず。

 

ザックリとですが、個人的に「どのデザインテンプレートが、どんな方に向いているのか」といったところは以下のとおり。

 

 アフィンガー5のデザインテンプレート

  1. Note:シンプルなデザインが好きな方向け
  2. Lupine:美容系のブログを運営する方向け
  3. PINKY:かわいらしいデザインが好きな方向け
  4. Happy Diary:やわらかく、読みやすいブログを運営する方向け
  5. YouTube1:YouTubeをメインで、サブにブログを運営する方向け
  6. YouTube2:ブログをメインで、サブにYouTubeを運営する方向け

 

こんな感じですね。

では、次の章では、アフィンガー5のデザインテンプレートを設定する手順について解説していきます。

 

AFFINGER5のデザインテンプレートを設定する手順【デザイン済みデータを導入】

AFFINGER5のデザインテンプレートを設定する手順【デザイン済みデータを導入】

AFFINGER5のデザインテンプレートを設定する手順【デザイン済みデータを導入】

 

デザインテンプレートを設定する手順は、以下のとおりです。

 

 デザインテンプレートを設定する手順

  1. プラグインをインストール
  2. アフィンガー5のサイトからZipファイルをインストール
  3. 2つのファイルをインポート

 

では、順に説明していきます。

 

手順①:プラグインをインストール

 

まずは、デザインテンプレートを設定するために、AFFINGER5(アフィンガー5)にプラグインをインストールしましょう。

 

Customizer export/import

Customizer export/import

 

Widget importer/ exporter

Widget importer/ exporter

 

  • Customizer export/import
  • Widget importer/ exporter

 

アフィンガー5にデザインテンプレートを設定するときに、必要なプラグインは上記の2つです。

それぞれをインストールしてください。

 

有効化を忘れずに行ってくださいね。
カタクリ

 

手順②:アフィンガー5のサイトからZipファイルをインストール

 

プラグインのインストールが完了したら、アフィンガー5のサイトからZipファイルをインストールしましょう。

 

そのため、まずは、AFFINGER5のデザインテンプレート配布ページへと移動しましょう。

>>AFFINGER5のデザインテンプレート配布ページへ移動

 

Zipファイルをインストールする

Zipファイルをインストールする

 

Zipファイルをインストールできたら、以下のファイルがあるかどうかを確認しましょう。

 

  • ウィジェット用
  • カスタマイザー用
  • データ管理用
  • ご利用前に必ずお読みください

※デザインテンプレートによって「ウィジェット用」がない場合があります。

 

アフィンガー5にデザインテンプレートを設定するときに必要なファイルは、以下の2つです。

 

  1. ウィジェット用
  2. カスタマイザー用

 

まずは、これらのファイルを開いてください。

 

ファイルを開くと、それぞれのデータが保存されます。

 

ファイルを開く

ファイルを開く

 

  • wing-up.com-sample21-widgets.wie(ウィジェット用)
  • affinger5-export.dat(カスタマイザー用)

 

手順③:2つのファイルをインポート

 

最後に、2つのファイルをインポートしていきます。

 

「外観」「カスタマイズ」「エクスポート/インポート」で2つのファイルをインポートするのみです。

 

以上が、AFFINGER5(アフィンガー5)のデザインテンプレートを設定する手順でした。

 

AFFINGER5(アフィンガー5)のデザインテンプレートが反映されないときの対処法

AFFINGER5(アフィンガー5)のデザインテンプレートが反映されないときの対処法

AFFINGER5(アフィンガー5)のデザインテンプレートが反映されないときの対処法

 

AFFINGER5(アフィンガー5)のデザインテンプレートが反映されないときの対処法は2つあります。

 

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

  1. デザインをリセットする
  2. カスタマイザーをリセットする

 

では、順に説明していきます。

 

対処法①:デザインをリセットする

 

デザインテンプレートがうまく反映されないときは、まずはデザインをリセットしてください。

 

デザインをリセット

デザインをリセット

 

「アフィンガー5」「デザイン」「サイト全体の設定」でデザインのリセットができます。

 

 

対処法②:カスタマイザーをリセットする

 

うまくデザインテンプレートが反映されないときは、カスタマイザーをリセットしてください。

 

カスタマイザーをリセット

カスタマイザーをリセット

 

「外観」「カスタマイズ」「全体カラー設定」でリセットができます。

 

上記の2つの対処法でも解決しない場合は、お問い合わせを利用してもいいですね。
カタクリ

 

AFFINGER5のデザイン・カスタマイズ方法のまとめ

AFFINGER5のデザイン・カスタマイズ方法のまとめ

AFFINGER5のデザイン・カスタマイズ方法のまとめ

 

今回は、AFFINGER5のデザイン・カスタマイズ方法について解説しました。

アフィンガー5は優秀なWordPressテーマですが、その魅力を上げるも下げるも、あなた次第です。

 

そのため、AFFINGER5(アフィンガー 5)のデザインは、本記事でご紹介したものを参考にし、後からあなたの色に染めていってもいいかもですね。

 

また、AFFINGER5の使い方についてはAFFINGER5(アフィンガー5)の使い方を1から10まで徹底解説するにて詳しく解説しているので、そちらを読んでみてください。

 

AFFINGER5のデザインを楽しみながら、最高のブログライフをどうぞ。

今回は以上です。

 

人気記事AFFINGER5(アフィンガー5)がSEOに強い7つの理由

人気記事【厳選】ブログ集客におすすめのツール10選【収益化に必須です】

 

-AFFINGER5

© 2021 Katakuri Blog