ブロガー必見！「アフィンガー」でおしゃれなサイトを作る方法

こんな悩みを抱えていませんか？

あなたのブログを強力にアピールし、読者を惹きつける、魅力的なブログサイトを手軽に作りたいですか？

そんな方に オススメのテーマが「AFFINGER（アフィンガー）」 です。

「AFFINGER」とは、SEO対策から、デザイン性、カスタマイズ性まで、すべてにバランスよく優れたワードプレスの有料テーマです。

稼いでいるほとんどのブロガーが「AFFINGER」を利用しており、ブログで結果を出したいならAFFINGERの導入を強くおすすめします。

そこで、本記事は、次のことをお伝えします。

 

AFFINGER（アフィンガー）をオススメする理由

これからブログを始めるなら、テーマは「AFFINGER6」がベストです。

なぜなら、SEO対策、カスタマイズ性、デザイン性の全てに優れています。

つまり、AFFINGER6を選べば、失敗がありません。

ブログを読んでほしい、ブログで稼ぎたいなら、検索の上位にこなければなかなか読んでもらえません。

もし、あなたが稼ぐブログを作りたいなら、初心者の時に初期投資することはとても大切なこ とです。

「AFFINGER」の特徴をまとめると次のとおり。

 

検索上位を目指せる

プログを運営していく上で対策をしていかなければいけないのがSEO対策です。

検索エンジ ンのことを考えてブログを最適に合わせていくということがSEO (Search Engine Optimizationの略) です。

AFFINGERは、プラグインなしでSEO対策ができる独自の機能や、表示速度や高速化機能も優れているWordPressテーマです。

 

自分の好きなデザインにカスタマイズできる

AFFIGERは、デザイン性が高く自分の好きなデザインにもカスタマイズしやすいです。

特に、文字の装飾やクリックボタン、吹き出し、ボックスなどのカスタマイズ性がバツグンです。

AFFINGERを設定できるようになれば、ブログデザインとカスタマイズのレベルが格段に上がります。

そして、ファンがつき読まれやすいブログになっていきます。

 

有名ブロガーも多数使用

稼いている有名ブロガーの方の多くが、AFFINGERのテーマを使っています。

プログでは内容も非常に大事ですが、文章や扱っている分野が同じ程度ならやはり最後の勝負はテ ーマの構造などになります。

また、デザインやカスタマイズでわからないことがあれば、すぐになんでも検索で出てきますので、初心者にこそ、おすすめです。

結果として、ブログに大切な「記事執筆」に集中でき稼ぐのが早くなります。

 

それでは、まず最初に、WordPressテーマ「AFFINGER（アフィンガー）」の導入方法をわかりやすく紹介するので、一緒に作業していきましょう！

 

AFFINGERの導入方法

WordPressテーマ「AFFINGER（アフィンガー）」の導入方法をお伝えします。

手順は簡単で、次の２ステップです。

 

テーマの購入方法とダウンロード

 

テーマの購入方法は、簡単で、まずはAFFINGERを公式サイトにアクセスします。

 

＞＞AFFINGERの公式サイトにアクセスする。

 

下にスクロールして、『今すぐ手に入れる』をクリックしましょう。

 

 

 

下記画面になるので『初めてインフォトップご利用の方はこちら』をクリックします。

そして「お客さま情報」と「お支払い方法」を入力して、『注文内容を確認』をクリックして案内にしたがえば、購入の完了です！

 

 

購入が完了したら「インフォトップ」にアクセスしてログインします。

＞＞「インフォトップ」にアクセスする。

 

ログイン時には、購入時に決めた「メールアドレス」と「パスワード」を入力します。

ログイン後、上部メニューの『注文履歴・ダウンロード』から『商品を見る、受け取る』に進み、２つのテーマをダウンロードして、PCに保管しておいてください。

 

 

テーマのインストール方法と子テーマの有効化

次のステップとして、テーマのインストール方法と子テーマの有効化について、解説していきます。

まずは、WordPressのダッシュボードを開いて、

 

今は、デフォルトでどれかのテーマに設定されているかと思います。

そして『新規追加』をクリックしてください。

 

続いて『テーマのアップロード』に進みましょう！

「テーマのアップロード」っていうところをクリックします。

そうすると、ZIP形式のテーマファイルを、こちらからアップロードしてインストールできます。

インストールするために、「ファイルを選択」をクリックしていきます。

 

テーマAffingerを購入された方は、２つのテーマをダウンロードできている状態になっているかと思います。

「Affinger.zip」「Affinger-child.zip」の2つのファイルがあるかと思います。

『ファイルを選択』から、先ほど確認した「affinger」と「affinger-child」を1つずつインストールしていきます。

今回は、まず、普通のChildではない親の方のファイルを先に入れていきます。

選択できたら、「今すぐインストール」をクリックします。

 

で、次は、Childの方のテーマを入れていきます。

再度、外観のテーマをクリックして、同じように、「新規追加」「テーマのアップロード」から、ファイルを選択して、子テーマの方を入れていきます。

Affinger-child.zipが選択されたら、「今すぐインストール」をクリックします。

 

 

 

インストールができたら「AFFINGER Child」のみを『有効化』すれば、導入完了です！

 

「有効化」をクリックしたら、外観のテーマを見ると、Affingerのテーマが有効になって、サイトを表示してもらうと、デフォルトの状態になっていると思います。

これでAFFINGERがWordPressにインストールされました。

次の章では、AFFINGERの設定方法を図解を使いながら丁寧に解説していきます。

その流れで作っていただくと、AFFINGERのテーマで素敵なホームページが開設できるようになります。

今回は、テーマのインストールと子テーマの有効化について解説しました。

それでは、AFFINGERの設定を行って、デザインを少しずつ整えていきましょう！

以上のようにAFFINGERは簡単に導入できますので、まだの方はこの機会に導入して、おしゃれなブログサイトを作っていきましょう！

 

＞＞「AFFINGERを公式サイト」から導入する。

 

AFFINGERの設定方法を図解を使いながら丁寧に解説

ではここから、本題であるAFFINGERのデザインの設定方法をお伝えしていきます。

私のブログデザインの作り方を参考に、AFFIGNERの設定方法を図解を使いながら、丁寧に解説していきたい思います。

 

具体的にお伝えするのは次の内容になります。

 

パーマリンクの設定

最初に、パーマリンクの設定について説明していきたいとおもいます。

 

パーマリンクの設定とは、独自ドメインをつなぐ部分が、パーマリンクになります。

どれを選択したらいいのか？なんですが、シンプルに「投稿名」を設定することをお勧めします。

選択したら、「変更を保存」をクリックします。

 

 

 

カスタマイズ基本設定（AFFINGER管理）

今回は、AFFINGERの基本のカスタマイズ設定になります。

細かい設定ではなく、全体的な設定をやっていきます。

色々疑問が出てくると思いますが、最初は、手順に沿って設定し、慣れてくれば自分なりにカスタマイズすることをおすすめします。

ダッシュボードを開いて、「Affingerの管理」をクリックします。

 

ここから、表示、非表示設定とか、サイト全体の軽い設定ができます。

順番に、設定方法を図解を使いながら、説明していきますね。

具体的にお伝えするのは次の内容になります。

 

 

はじめに

最初に、保存をクリック。

変更するところはありません。

 

全体設定

サイト全体の設定になります。

「カラーパターン」；カラーの設定ですが、テーマに合った色を選択してください。

「デザインパターン」；初心者の方は、「ブログ」が使いやすいと思います。

 

「カテゴリーリンク（サイドバー）」；色ですが、通常は黒か青に設定します。

「サイト全体のレイアウト」；最初は、初めの設定のままでＯＫ。

「サムネイル画像設定」；丸にするとか好みで選んでください。

「抜粋設定」；設定不要。

 

「フォントのサイズ」；基本は設定不要ですが、記事を書いていく中で、タイトルや見出しの文字サイズ、行間を広くしたい場合は設定可能です。

「 フォントの種類」；こだわりがなければデフォルトでＯＫ。

 

メニュー

メニューの表示・非表示の設定ができます。

「PCヘッダーメニュー」；基本的にはデフォルトで、「PCヘッダーメニューを上に表示する」に、✓を入れる。

「スマホスライドメニュー」；アイコンデザインの「ノーマル」に、✓を入れる。

「その他のスマホメニュー」；私の場合は、ミドルメニューで表示させています。

「スマホ用ミドルメニューを表示する」、「ヘッダー画像より上に表示」に、✓を入れます。

 

メニューの作成及び設定については、「外観」→「メニュー」にて、行っていきます。

後の（３）章で、詳しく説明していきたいと思います。

 

ヘッダー

今は、設定不要。

外観のカスタマイズでヘッダーの設定ができるので、そこで設定していきたいとおもいます。

 

ヘッダー下／おすすめ

ヘッダー下におすすめ記事を設定する方法です。

「おすすめヘッダーバナー」は、AFFINGERテーマの特徴で、私も採用しているんですが、画像に、文字を入れてリンクを張るというものです。

 

 

 

設定方法は、とても簡単で、

上記のカードを4つ作れば、バランスの良いヘッダーになります。

カテゴリーが増えていったら、そのカテゴリーごとで「ヘッダーバナー」を設定することで、ユーザーに分かりやすいブログ構成になっていくかと思います。

 

トップページ

「挿入コンテンツ」；ヘッダー画像と最新記事の間に表示される部分です。

記事がない場合、特にコンテンツがあまりないのでここに表示するものはないかと思います。

今後、コンテンツが増えてきたら、カテゴリ分けして記載することができます。

「トップページのレイアウト」；今は、変えるところはありません。

 

「記事一覧」；「新着記事一覧に表示する見出し」を例えば ”最新記事一覧”と記載し、「サイドバーに表示する記事する数」を「＊＊（５）」と指定することができます

サイドバーに最新記事を表示することはないと思いますので、「トップページのサイドバーの新着記事一覧を非表示にする」に、✓を入れます。

 

「NEWS(お知らせ)の表示」；お知らせをTopページの一番上に表示するに、✓を入れるとお知らせの表示がされますが、ブログ運営の場合は不要です。

「YouTube背景」；　特に設定する必要はありません。

 

投稿・固定記事

投稿・固定記事に関して、表示・非表示を選ぶところになります。

「カテゴリー・タグ」；「記事一覧・関連記事一覧などにカテゴリーを表示する」に、✓を入れる。

パンクズを非表示にするはおすすめできません。

「コメント」；コメントを表示・非表示を選ぶところになります。基本はなしで大丈夫ですので、「コメント欄・コメントフォームを非表示にする」に、✓を入れる。

「アイキャッチ設定」；
タイトル下にある画像のことで、「アイキャッチ画像＝eye catch画像」、つまり「目を惹く画像」になります。

「アイキャッチ画像の表示を全ての記事で有効化する」に、✓を入れます。

「アイキャッチ画像をタイトル下表示に変更する」に、✓を入れます。

 

「この記事を書いた人」；サイドバーのプロフィールになります。ここでは、設定不要。

「関連記事一覧」；関連記事一覧は、表示しておいた方がいいです。
見出しは、“関連記事一覧”にして、表示する件数ですが、５記事程度でいいと思います。

「管理画面」；「投稿一覧（管理画面）にサムネイル・文字数を表示」に、✓を入れます。

 

SNS／OGP設定

「SNS設定」；「SNSボタンをシンプルにする」に、✓を入れています。

「OGP設定」；　特に、設定していません。

 

SEO

次は、SEO関連設定になります。

「トップタイトル」；例えば、「ヤスログ（やすのブログ）」と入力。31文字以下。

「トップ用のメタキーワード」；副業,SEO対策,アフィリエイト．．．など、どんなブログなのかのキーワードを入力。３つぐらいが適切。

「トップ用のメタディスクリプション」；どんなブログなのかを簡単な説明文を入れておく。120文字以内で、キーワードを入れておく。

「パンくずの「HOME」を書き換え」の欄に、”HOME”と記入してください。

 

 

 

Google・広告／AMP

「Google連携に関する設定」；アナリティクスとサーチコンソールの設定になりますが、ブログのアクセス解析ができます。

SEO対策、記事の作成にとても役に立ちますので、最初のうちから導入することを強くおすすめします。

 

「インフィード広告の設定」；今は必要がないので、設定不要。

「見出し前に広告挿入」；例えば、ブログの見出しの上に広告を載せたい時は、この欄に入力していきます。

例えば、 Googleアドセンス広告を行っている場合は、ここにコードを入れておけば、広告を表示させることができます。

また、見出しの2番目の上に表示させたい場合、2番目の見出しの上に広告を表示させる設定ができます。

「Google自動広告の設定」；今は必要がないので、設定不要。

 

会話アイコン

「会話アイコン設定」；会話風アイコン画像を設定していきます。

キャラクターの画像をアップロードして、アイコンの名前を設定することができます。

会話風アイコンは8個設定することができます。

 

 

このような記事中の吹き出しの作り方を紹介します。

作り方はかんたんで、

 

 

吹き出しにしたいアイコン画像をアップロードして、名前をつけるだけ。

画像をどれにしたらいいかわからない方は「いらすとや」で無料でかわいいアイコンがGETできますよ。

記事に表示させるのは「タグ」→「会話吹き出し」→「会話」をクリックすればOK。

 

「その他」や「PLUGINS」の設定では、必要なものを設定するようにしてください。

PLUGINSは、購入する項目になるので、今は、設定不要です。

以上、AFFINGER管理の設定から、基本的な機能項目の表示・非表示設定とか、簡単なサイト全体の設定をすることができます。

色々疑問が出てくると思いますが、最初は、手順に沿って設定し、慣れてくれば自分なりにカスタマイズすることをおすすめします。

次の章では、さらに細かく、見出しのカラーを変えたり、デザインを変えたり、ヘッダーの設定をさらに細かく設定していく方法を解説していきます。

 

カスタマイズ設定（更に細かく）

今回は、さらに細かくカスタマイズ設定の方法を説明していきます。

前回の（２）章では、サイト全体のカラーの設定、各項目の表示・非表示の設定が主な設定でした。

（３）章では、見出しの設定、デザインを変えたり、カラーを変えたり、メニューの設定とか細かな設定を行っていきます。

具体的にお伝えするのは次の内容になります。

ダッシュボードを開いて、外観の中のカスタマイズをクリックします。

それぞれの項目を設定していきたいと思います。

 

全体カラー設定

前章AFFINGER管理で設定したカラーになっています。

自分のカラーの色を設定してください。

 

サイト基本情報

サイト基本情報の設定です。

サイトタイトルとキャッチフレーズを設定してください。

キャッチフレーズは、簡単に、このブログがどういうブログなのかの説明文を入れておきます。

 

サイトアイコンとは、ブラウザのタブに表示される画像アイコンのこと。

サイトアイコンを設定すると、ブログの個性やブランディングになるので、設定しましょう！

「画像を変更」から好きな画像をアップロードすればOKです。

画像は「512×512」の正方形がベスト。

 

背景／ロゴ画像設定

ここに背景画像を入れることもできますが、設定不要で、基本は白でいいと思います。

ロゴ画像の設定ですが、フッターにロゴ画像を入れたい場合は、ロゴ画像を入れてください。

フッターロゴも同じ画像を使う場合は、✓を入れてください。

また、必要な場合は、モバイル用ロゴ画像を入れてください。

私のサイトは、ロゴ画像を設定していません。

 

メニューの設定

まず、パソコンから見えるヘッダーメニューを作る方法を解説していきます。

 

WordPressのダッシュボードを開いて、

 

 

最初は、何も入っていない状態になっているので、まずメニューの作成をしていきます。

「新しいメニューを作成しましょう。」をクリック。

「メニュー設定」の「ヘッダー用メニュー」にチェックを入れ、「メニューを作成」をクリックしましょう。

 

 

メニューの編集画面になるので、わかりやすく区別するために「メニュー名」を任意で設定してください。

次は、メニューを追加していきます。横に、「メニュー項目を追加」で、固定ページ、投稿、カスタムリンク、カテゴリーを追加していきます。

例えば、プロフィール、お問い合わせ、サービス一覧などをあらかじめ、メインメニューに載せたい固定ページを作っておいて、固定ページが表示されるので、選んで、「メニューに追加」ボタンで追加していきます。

 

その他に、例えば、サイトをメニューに入れたい場合、カスタムリンクのところに、URLを貼って、リンク文字列に、"HOME" といった好きな名前をつけて、メニューに追加することができます。

▼になっているところを開くと、「ナビゲーションラベル」で名前を変えることができます。

順番はクリック&ドラッグで自由に変えてください。

またメニューの削除は、メニュー項目の右側にある「▼」をクリックして「削除」を押すとできます。

完成したら、「メニューを保存」をクリックします。

 

次は、スマホメニューを作っていきます。

 

「新しいメニューを作成しましょう」から作っていきます。

まず、メニュー名“スマホミドルメニュー”を入力し、メニュー設定で、「スマートフォン用ミドルメニュー」に、✓を入れてください。

PCメニュー表と同様に、メニュー項目を選んで、「メニューに追加」ボタンで追加していきます。

最大8個設置できるんですが、4個設置するのが適切です。

 

さらにヘッダーメニューの背景色や文字色、ボーダー色は

 

に進み、好きな色を選べば自由に変えられます！

 

さらにスマホミドルメニューの背景色や文字色、ボーダー色は

に進み、好きな色を選べば自由に変えられます！

 

ヘッダー画像

ヘッダー画像を入れたい場合は、新規画像の追加を押して、ヘッダー画像を入れてください。

また、ヘッダー画像のサイズも設定することができます。

 

見出しタグ／テキスト

各テキストと見出しの設定です。

見出しの設定方法も簡単で、

記事タイトルの文字色は、普通に黒、背景色は白でいいと思います。

次に、見出しですが、私の見出しは、こんな感じです。参考まで。

 

H2タグの見出し２ですが、基本スタイルを色々変えることができます。

次は、H3タグの見出し３ですが、基本見出し２が、一番大きな見出しになるので、H3、H4で徐々に小さくなるイメージで、設定する必要があります。

そして色はサイトの色と統一するのがおすすめです。

 

サイドバーのプロフィール設定

 

プロフィールの設定をする前にプロフィールの中身を作っていきたいとおもいます。

「ニックネーム」「ブログ上の表示名」「メール」「サイト」

「Twitter」、「インスタ」等あれば、URL入れていってください。

そして、「プロフィール情報」を入れていきます。

 

最後に「プロフィールを更新」をクリックすればプロフィール情報入力は完了。

プロフィールの更新ができたら、次はサイドバーに表示させる設定をしていきます。

 

次に、サイドバーのウィジェットのところにプロフィールを設置します。

 

「11_STINGERサイト管理者紹介」をクリックして、タイトルに”プロフィール”と記入。

 

 

ウィジエット（サイドバー）の設定

サイドバーとは、ブログ右側のメニュー欄のことです。

私は、サイドバーに次の項目を表示させています。

プロフィールはすでに解説済みですね。

まず、「検索窓」「カテゴリー」の表示方法です。

 

そうすると、一覧がいっぱい出てきます。

基本は、利用できるウィジエットを右に動かして作っていきます。

 

画面左の「利用できるウィジェット」にある「検索」「カテゴリー」を、画面右の「サイドバー（中部）」にクリック&ドラッグするのみ。

上記の画像のように、それぞれの項目が入ればそれだけで表示されます。

 

次は、「よく読まれる記事」を設定する方法です。

 

「よく読まれる記事」は、読者の目に止まりやすいので、読んでほしい記事を紹介しやすい場所になります。

設定はとても簡単で、

 

に進み、「おすすめ記事一覧に表示させる文字」に、”よく読まれる記事”を入力。

そして、表示させたい記事のIDを「,」でつなぎながら最大5つまで記載すればOKです。

表示させたい記事のIDは「投稿一覧」から確認できます。

表示させたい場所として、
「サイドのスクロールに表示する」に、✓を入れてください。

 

まとめ

以上、本記事ではWordPressテーマ「AFFINGER（アフィンガー）」の設定方法を図解を使いながら、完全解説してきました。

最初は、難しく感じるかもしれませんが、実際にやってみるとカンタンに作れることを実感していただけると思います。

「業者に頼むと高額なので、自分でブログサイトを作りたい」
「ブログを始めたけど、アクセス数が増えず、稼げない」

と迷っている方は、ぜひAFFIGNER６を使ってみてください。

 

以下のボタンからダウンロードできます。

 

専用プラグインもセットなら、AFFINGETRを通常価格より安く購入することができます。

 

 

きっと、お気に入りのおしゃれなブログサイトを作れるようになりますので、ぜひ、トライしてみてくださいね。