AFFINGER5

AFFINGER5(アフィンガー5)のデザイン方法を4つ紹介する

2020年6月1日

【辛口】AFFINGER5の感想をレビューする【デメリットも暴露】

 

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

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

 

 記事の内容

・AFFINGER5(アフィンガー5)のデザインをする前にやること
・AFFINGER5(アフィンガー5)のおすすめデザイン方法
・AFFINGER5(アフィンガー5)のデザインテンプレート
・AFFINGER5(アフィンガー5)のデザインテンプレートを設定する手順

 

 記事の信頼性

Katakuri Blog

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

 

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

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

 

そこで本記事では、当ブログのデザインをベースにして、AFFINGER5(アフィンガー5)のデザイン方法を5つ紹介していきます。

 

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

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

 

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

 

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

AFFINGER5のメリットやデメリット、評判などは【辛口】AFFINGER5の感想をレビューする【デメリットも暴露】にて詳しく解説しているので、まだアフィンガー5を導入していない方は読んでみてください。

 

Contents

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

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

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

 

AFFINGER5(アフィンガー5)のデザインをする前にやることは、以下の3つです。

 

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

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

 

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

 

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

 

関連記事
【辛口】AFFINGER5の感想をレビューする【デメリットも暴露】
【辛口】AFFINGER5の感想をレビューする【デメリットも暴露】

 

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

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

 

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

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

 

AFFINGER5(アフィンガー5)のデザイン方法①:トップページ

AFFINGER5(アフィンガー5)のデザイン方法①:トップページ

AFFINGER5(アフィンガー5)のデザイン方法①:トップページ

 

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

 

新着記事の下に入力

新着記事の下に入力

 

【解決】Webライターはタブレットで仕事が可能【3つのコツあり】

Webライター

2021/1/28

【解決】Webライターはタブレットで仕事が可能【3つのコツあり】

  悩んでいる人自宅にタブレットがあるので、Webライターを始めようかなと思っています。しかし、ネット上の記事では、「タブレットで作業はできない。」といった声が多かったです。実際のところ、作業はできるのでしょうか? こんな疑問を解決します。    記事の内容 ・Webライターはタブレットで仕事が可能です ・Webライターがタブレットで仕事をする時の3つのコツ    記事の信頼性 カタクリ(@katakuri_29) この記事を書いている僕はWebライター歴1年と5ヶ月です。月 ...

続きを読む

WebライターにWord(ワード)は必要なのか?【結論:不要です】-min

Webライター

2021/1/27

WebライターにWord(ワード)は必要なのか?【結論:不要です】

  悩んでいる人WebライターにWordは必要ですか?正直、パソコンも買ってしまったので、あまりお金をかけられません。もし、ワード以外で使えるツールなどがあれば、教えて欲しいです。 こんな疑問を解決します。    記事の内容 ・WebライターにWord(ワード)は必要?【不要です】 ・WebライターがWordの代わりにドキュメントで使う機能    記事の信頼性 カタクリ(@katakuri_29) この記事を書いている僕はWebライター歴1年5ヶ月ほどです。今までに500記事 ...

続きを読む

Webライターが1日に必要な文字数とは?【増やす方法あり】

Webライター

2021/1/26

Webライターが1日に必要な文字数とは?【増やす方法あり】

  悩んでいる人Webライターが1日に書くべき文字数は、どれくらいですか?また、稼ぎたいので、1日に書ける文字数を増やす方法も知りたいです。 こんな疑問を解決します。    記事の内容 ・Webライターが1日に必要な文字数とは? ・Webライターが1日に書ける文字数を増やす方法【3つだけ】    記事の信頼性 カタクリ(@katakuri_29) この記事を書いている僕はWebライター歴1年5ヶ月です。過去に5万円ほどWebライターで収入を得ていました。   本記事 ...

続きを読む

【悲報】Webライターは専業で生計を立てられるのか?【ムリです】

Webライター

2021/1/25

【悲報】Webライターは専業で生計を立てられるのか?【ムリです】

  悩んでいる人会社で働くのに疲れてしまいました。そこで、Webライターで生計を立てようかと思っています。ぶっちゃけ、Webライターを専業でやって、生活ができますか? こんな疑問を解決します。    記事の内容 ・Webライターは専業で生計を立てられるのか?【厳しいです】 ・Webライターを専業にシフトまでに行動する手順    記事の信頼性 カタクリ(@katakuri_29) この記事を書いている僕はWebライター歴1年5ヶ月ほどです。Webライターとして、月に5万円ほど稼 ...

続きを読む

【衝撃】Webライターに年齢は関係ある【歳をとっていた方が有利】

Webライター

2021/1/24

【衝撃】Webライターに年齢は関係ある【歳をとっていた方が有利】

  悩んでいる人40歳です。今からWebライターを始めるのは、年齢的に難しいですか?できれば、自宅でお金を稼げる仕事がしたいです。 こんな疑問を解決します。    記事の内容 ・Webライターに年齢が関係ある理由【歳をとっていると有利です】 ・年齢を重ねている人がWebライターをするメリット    記事の信頼性 カタクリ(@katakuri_29) この記事を書いている僕はWebライター歴1年5ヶ月です。過去に月5万円ほどWebライターで稼いでいました。   結論か ...

続きを読む

 

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

また、それぞれのコードをいじることで、スライドショーに表示される記事が変わってきたりするので、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(アフィンガー)でブログカードを作る方法【コツあり】にて詳しく解説しているので、そちらを参考にしてみてください。

 

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

 

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

 

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

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

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

 

AFFINGER5(アフィンガー5)のサイドバーのデザインでは、以下の部分をカスタマイズします。

 

 サイドバーのデザイン

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

 

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

 

その①:検索窓

その①:検索窓

その①:検索窓

 

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

 

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

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

 

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

 

検索窓の名前の変更

検索窓の名前の変更

 

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

 

その②:管理者画面

その②:管理者画面

その②:管理者画面

 

管理者画面とは、あなたのプロフィールのことです。

プロフィールを充実させておくことで、以下のようなメリットがあります。

 

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

 

上記のとおりです。

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

 

step
1
プロフィールの入力

プロフィールの入力

プロフィールの入力

 

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

 

step
2
プロフィール画像の設定

プロフィール画像の設定

プロフィール画像の設定

 

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

 

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

 

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

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

 

最後に、「プロフィールカードに変更」という項目にチェックマークを入れてください。

 

step
3
管理者画面を追加

管理者画面を追加

管理者画面を追加

 

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

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

 

その③:人気記事

その④:人気記事

その③:人気記事

 

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

 

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

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

 

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

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

 

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

 

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

 

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

 

AFFINGER5(アフィンガー5)のデザイン方法③:フォント

AFFINGER5(アフィンガー5)のデザイン方法③:フォント

AFFINGER5(アフィンガー5)のデザイン方法③:フォント

 

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(アフィンガー5)のデザイン方法④:アイキャッチ画像

AFFINGER5(アフィンガー5)のデザイン方法④:アイキャッチ画像

AFFINGER5(アフィンガー5)のデザイン方法④:アイキャッチ画像

 

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

 

 アイキャッチのデザイン

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

 

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

 

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

 

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

 

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

 

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

 

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

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

 

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

 

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

 

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

 

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

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

 

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

 

こんな感じです。

 

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

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

 

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

 

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

 

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

 

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

 

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

 

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

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

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

 

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(アフィンガー5)でおすすめのデザインテンプレートを決める方法

 

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

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

 

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

 

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

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

 

こんな感じですね。

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

 

AFFINGER5(アフィンガー5)のデザインテンプレートを設定する手順

AFFINGER5(アフィンガー5)のデザインテンプレートを設定する手順

AFFINGER5(アフィンガー5)のデザインテンプレートを設定する手順

 

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

 

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

  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(アフィンガー5)のデザインをあなた色に染めよう!

まとめ:AFFINGER5(アフィンガー5)のデザインをあなた色に染めよう!

まとめ:AFFINGER5(アフィンガー5)のデザインをあなた色に染めよう!

 

今回は、AFFINGER5(アフィンガー5)のデザイン方法を4つご紹介しました。

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

 

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

 

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

 

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

今回は以上です。

 

人気記事AFFINGER5(アフィンガー5)はSEOに強いのか?【結論:最強】

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

 

-AFFINGER5

Copyright © Katakuri Blog , All Rights Reserved.