[コピーOK]AFFINGER6でトップページをカスタマイズする手順

[コピーOK]AFFINGER6でトップページをカスタマイズする手順

2020年4月23日

 

AFFINGER6のトップページをカスタマイズしたいんだけど、どうやったらいいの?カスタマイズ方法を教えて!

 

このような疑問にお答えします。

 

本記事の内容

  • AFFINGER6でトップページをカスタマイズする手順

 

AFFINGER6は簡単にトップページをカスタマイズできる点が非常に優秀で、数々のブロガーに愛されてきました。

しかし、実はブログ初心者にとっては少しカスタマイズが難しいです。。。

 

ということで今回は、初心者でも簡単にカスタマイズできるよう、当サイトのトップページを基に解説しますね。

一度当サイトを真似することで、カスタマイズ方法を理解することが狙いです。

 

そのまま使ってもいいですし、そこからさらにアレンジしてもOKですよ。
kazuki

 

✔本記事の執筆者

本記事の執筆者

Twitter:(@k03mind)

 

※当サイト経由でAFFINGER6を購入すると、限定特典として9点を無料プレゼントします。

 

購入者特典

  1. 【購入前特典】アフィンガー初期設定方法を解説
  2. 【購入前特典】アフィンガーを使ったサイトカスタマイズ公開
  3. 【購入前特典】収益を上げるアフィンガーの機能を公開
  4. 限定プラグイン[「SUGOI MOKUJI [LITE]」]
  5. 開始3ヶ月でSEOで月1万稼ぐサイトのプラグインを公開
  6. レビュー記事の書き方[テンプレート配布]
  7. 比較記事の書き方[テンプレート配布]
  8. ランキング記事の書き方[テンプレート配布]
  9. 質問し放題[無期限]

\購入ページはこちら/

9つの限定特典付き

 

当サイト限定特典の詳細は、こちらの[購入特典あり]AFFINGER6(アフィンガー)の購入&導入手順をどうぞ。

実際に利用している人の評価は、こちらの稼げるテーマ!AFFINGER6(アフィンガー)の口コミ・評判まとめをどうぞ。

 

 

AFFINGER6(アフィンガー)トップページのイメージ

AFFINGER6(アフィンガー)トップページのイメージ

 

まずは当サイトのトップページをご覧ください。

 

かずきの武器庫のトップページ

 

上記は画像ですが、リアルを見たい人はトップページをクリックしてください。(※2021年1月にトップページを変更しました

今回はこのトップページの作り方を解説していきますね。

 

AFFINGER6(アフィンガー)トップページのカスタマイズ手順

AFFINGER6(アフィンガー)トップページのカスタマイズ手順

 

当サイトを作るためには、下記8つの手順を行う必要があります。

 

  1. ヘッダーの作り方
  2. ヘッダーのカード型リンクの作り方
  3. 新着記事(スライドショー)の作り方
  4. おすすめ記事の作り方
  5. ランキング機能の作り方
  6. サイト管理者紹介の作り方
  7. よく読まれている記事の作り方
  8. フッターの作り方

 

多いように見えますが、それぞれ簡単な作業ばかりなのですぐに終わります。

それでは一つずつ解説していきますね。

 

1.ヘッダーの作り方

 

ヘッダーとは下記、赤枠の部分。

 

かずきの武器庫のヘッダーエリア

 

当サイトでは画像を使わず、タイトルとサイト紹介、メニューバーのみで作成しています。

まずはタイトルとサイト紹介について。下記の通り、WordPress管理画面から「設定」→「一般」の順にクリックしてください。

 

ワードプレスの一般設定

 

こちらでサイトタイトルキャッチフレーズを編集できます。また、このままでは左側にタイトルとキャッチフレーズが表示されてしまうので、中央に寄せます。

下記の通り、WordPress管理画面から「AFFINGER6管理」→「ヘッダー」の順にクリックしていただき、「ヘッダー設定」を探してください。(※画像はAFFINGER5のものですが、内容は同じです

 

アフィンガー5のヘッダー設定

 

そこで下記2点にチェック。

 

  • ヘッダーを分割しない
  • ヘッダーエリアをセンタリング

 

これでタイトルとキャッチフレーズが中央に寄りました。

続いてはメニューバーの編集です。下記の通り、WordPress管理画面から「外観」→「メニュー」の順でクリックしてください。

 

かずきの武器庫のメニュー設定

 

こちらでヘッダーメニューを編集できます。

プロフィールを作成するのか?Twitterをリンクさせるのか?お好みでOKです。

 

2.ヘッダーのカード型リンクの作り方

 

ヘッダーのカード型リンクとは、下記画像の赤枠部分。

 

かずきの武器庫のヘッダーカード

 

まずは下記の通り、WordPress管理画面から「AFFINGER6管理」→「おすすめ記事一覧」の順にクリックしてください。(※画像はAFFINGER5のものですが、内容は同じです

 

かずきの武器庫のおすすめ記事一覧の設定

 

その中の「おすすめヘッダーカード」で、カード型リンクを作成します。下記の通り、「おすすめヘッダーカード」が出てくるまでスクロールしてください。

 

かずきの武器庫のヘッダーカード設定

 

ここでは下記3点を編集してください。

 

  • 画像のURL:表示したい画像のURLを入力
  • テキスト:表示したいテキストを入力
  • リンク先URL:飛ばしたいURLを入力

 

設定が終わりましたら最後に「SAVE」です。これでカード型のリンクが完成しました。

 

4枚じゃなく、2枚でも表示できます。お好みで設定しよう!
kazuki

 

3.新着記事(スライドショー)の作り方

 

新着記事(スライドショー)とは、下記画像の赤枠部分。

 

かずきの武器庫の新着記事

 

こちらは先ほどとは違い、固定ページで作ります。まずは下記の通り、WordPress管理画面から「固定ページ」へアクセスしてください。

 

かずきの武器庫の固定ページ一覧

 

そこで、タイトルを"トップページ"、見出しをh3で"新着記事"と入力してください。画像で見ると下記の通りです。

 

かずきの武器庫の新着記事

 

そこから、「タグ」→「記事一覧」→「カテゴリー一覧」の順にクリックしていただき、ショートコードを出力します。下記の赤枠をクリックすればショートコードが出力されます。

 

アフィンガー5の新着記事一覧の出力

ショートコード

 

ショートコードには下記のように一つ一つ意味があります。

 

  • st-catgroup cat="カテゴリID指定"
  • page="読み込み数"
  • orderby="id"
  • child="子カテゴリーの読み込み"
  • slide="スライドショーのオンオフ"
  • slide_to_show="列数の指定"
  • slide_more="続きを読む"
  • slide_center="off"

 

これは覚えなくてもOK。スクショでも取っておいたら後で見返せます。

ちなみに、出力したショートコードを、当サイトでは少しだけ編集しています。

 

ショートコード

 

すると、こんな感じで表示されます。

 

ブログを1年続けたら月6万稼げた話【方法も解説する】

2021/8/1

【収益公開】ブログを1年続けたら月6万稼げた話【方法も解説する】

ブログを1年続けると稼げるのか知りたくないですか?本記事では実際に僕が運営しているブログが1年経ちましたので、現在のPV数と収益を公開したいと思います。本記事を読めばブログ1年で稼げるのか知ることができますよ。

続きを読む

2021/7/17

Shutterstock(シャッターストック)を無料で使う方法【注意点も解説】

Shutterstockを無料で使う方法を知っていますか?結構有名な方法ですが知らないという方のために、無料で使う方法を画像付きで詳しく解説します。Shutterstockを無料で使う方法を知りたい方は必見です。

続きを読む

【unDrawの使い方】無料でおしゃれなイラスト画像サイトを徹底解説

2021/6/18

【unDrawの使い方】無料でおしゃれなイラスト画像サイトを徹底解説

undrawの使い方をご存知ですか?undrawは英語表記なので、英語ができない方は使い方がわからないですよね。ということで今回はundrawの使い方を徹底的に解説します。undrawの使い方がわからない方は必見です。

続きを読む

2021/7/18

【単価比較】ebookjapanのアフィリエイトができるASP【稼ぐコツも解説】

ebookjapanのアフィリエイトができるASPを知りたいとは思いませんか?本記事では報酬単価の高いASPやebookjapanのアフィリエイトで稼ぐコツについて解説します。ebookjapanのアフィリエイトを始めたい方は必見です。

続きを読む

【単価比較】hontoのアフィリエイトができるASP【稼ぐコツも解説】

2021/5/30

【単価比較】hontoのアフィリエイトができるASP【稼ぐコツも解説】

hontoのアフィリエイトができるASPを知りたいですか?本記事では高単価なhontoの広告と提携できるASPについてと、稼ぐコツについて解説します。hontoのアフィリエイトで稼ぎたい方は必見です。

続きを読む

 

また、スライドショーについては、こちらの【超おしゃれ】アフィンガー6のスライドショーの設定方法と使い方でもまとめています。

使い方の注意点などをまとめているので、スライドショーについてさらに詳しく知ることができますよ。

 

4.おすすめ記事の作り方

 

おすすめ記事とは下記、赤枠の部分。

 

かずきの武器庫のおすすめ記事

 

こちらも先ほどと同様に固定ページで作ります。まずはバナー風ボックスから。下記の赤枠の部分です。

 

かずきの武器庫のバナー風ボックス

 

新着記事(スライドショー)で使った固定ページで、見出しh3で「おすすめ記事」と入力してください。

そして、「タグ」→「レイアウト」→「PCとTab(959px以上)」→「左右50%」の順にクリック。画像で見ると下記の通りです。

 

バナー風ボックスの出力方法

 

すると、下記のように二つの列が作られます。

 

バナー風ボックスの出力

 

まずは左の黄色のボックスから編集します。

下記の通り、「タグ」→「ボックスデザイン」→「バナー風ボックス」→「基本」の順でクリック。

 

アフィンガー5のバナー風ボックスの出力手順

 

すると、次のようにコードが出力されます。

 

バナー風ボックスのショートコード

 

同じように右側の青色のボックスもコードを出力。そして下記3点のコードを修正します。

 

  • st-flexbox url="リンク先URL"
  • title="カテゴリーのタイトル"
  • background_image="タイトルの背景画像"

 

当サイトでは次のようになります。

 

かずきの武器庫のバナー風ボックスコード

 

これでバナー風ボックスの完成。続いては、カードリンクの作成です。下記赤枠の部分ですね。

 

かずきの武器庫のカード

 

次のように、「カード」をクリックしてショートコードを出力してください。

 

カード型のショートコード

 

そして、下記のようにコードを修正。

 

かずきの武器庫のカード型のショートコード

 

記事IDは自分がカード型にしたいものを入力してください。(WordPress管理画面から「投稿記事一覧」で確認できます)

ちなみに当サイトでは、ブログカードを3つずつ配置しています。多くても良くないので最大でも4枚までにしときましょう。

 

また、このブログカードは記事中でも内部リンクとして表示することができます。

さらに詳しく知りたい人は、こちらのアフィンガー6のブログカードの作り方。2秒で作れます。をどうぞ。

 

作り方や使う際の注意点など、ブログカードについて網羅的にまとめています。

 

5.ランキング機能の作り方

 

ランキング機能とは、下記画像の赤丸部分。

 

かずきの武器庫のランキング

 

こちらは下記の通り、WordPress管理画面から「ランキング管理」をクリックすると設定できます。

 

アフィンガー5のランキング管理

 

こちらの設定は少し複雑ですが、一度設定を終わらせてしまえばショートコードを入力するだけでランキングを出力することができます。

 

検索順位チェックツールGRC

ブログの有料ツールの中でも絶対に導入しなければならないツールで有名です。

もし導入していないのであれば成功への道は大きく遠ざかること間違いなし。

まずは下記の詳細ページをどうぞ。

 

こんな感じにね。

ランキングの作り方についてここで解説すると少し長くなるので、こちらのアフィンガー6のランキング作成手順を徹底解説をどうぞ。

 

作り方から使う際の注意点を詳しく解説しています。

 

6.サイト管理者紹介の作り方

 

サイト管理者紹介とは、下記の赤丸部分。

 

かずきの武器庫のサイト運営者プロフィール

 

まずはWordPress管理画面から「外観」→「ウィジェット」をクリックしてください。

その中の、「11̠STINGERサイト管理者紹介」を「サイドバーウィジェット」に追加。画像で見ると下記の通りです。

 

WordPressのウィジェット画面

 

また、当サイトのサイドバーは下記のように配置しています。

 

  • 検索
  • 11̠STINGERサイト管理者紹介
  • アーカイブ
  • category

 

順番はお好みで入れ替えてOK。ドラッグすれば簡単に入れ替えることができます。

次に、WordPress管理画面から「ユーザー」→「プロフィール」の順にクリックしていただき、下にスクロール。

 

すると、下記画像のように「ニックネーム」を設定できる欄があります。

 

WordPressのニックネーム編集画面

 

表示したい名前を入力しましょう。終わりましたらさらにスクロール。

すると、下記のようなプロフィール情報の編集欄があります。

 

WordPressのプロフィール編集欄

 

簡単な自己紹介を入力してください。終わりましたら、最後に「保存」をクリック。

さて、続いてはWordPress管理画面から「外観」→「カスタマイズ」をクリック。

 

WordPressのカスタマイズ画面

 

下記の通り、その中の「+オプションカラー」をクリックしてください。

 

オプションカラーの設定画面

 

下にスクロールしていただくと「サイト管理者紹介」が見つかります。

 

サイト管理者紹介の設定画面

 

そこで「プロフィールカードに変更」にチェックを入れ、「アバター画像」を挿入してください。

 

サイト管理者紹介の設定

 

他にもカスタマイズできますが、ひとまずはこれでOK。

最後に「公開」をクリックしてください。

 

kazuki
これでサイト管理者紹介の設定が完了です!

 

7.よく読まれている記事の作り方

 

よく読まれている記事とは、下記画像の赤枠部分。

 

かずきの武器庫のよく読まれている記事

 

WordPress管理画面から「AFFINGER6管理」→「おすすめ記事一覧」をクリック。

その中の、「おすすめ記事一覧の作成」で設定することができます。画像で見ると下記の通りです。

 

おすすめ記事一覧の編集画面

 

  • おすすめ記事一覧に表示する文字:表示したい文字を入力
  • 任意の人気記事を指定(投稿又は固定記事ID):表示したい記事IDを入力
  • サイドのスクロールに表示にする(抜粋非表示):チェックを入れる

記事IDはWordPress管理画面から「投稿一覧」で確認できます

 

これでよく読まれている記事の作成は完了です。

 

kazuki
記事は3~5つくらいに。多すぎると見栄えが悪いです!

 

8.フッターの作り方

 

フッターとは、下記画像の赤丸部分。

 

かずきの武器庫のフッター

 

ヘッダーの作り方と同じで、WordPress管理画面から「外観」→「メニュー」の順でクリックしてください。

 

かずきの武器庫のメニュー設定

 

編集するメニューをフッターに変更。

 

フッター画像の編集画面

 

何を表示させたいかはお好みでOKです。
kazuki

 

以上、AFFINGER6トップページのカスタマイズ手順でした。

ただ、これではまだデフォルトの青色のまま。続いてはフォントのカスタマイズ手順を解説しますね。

 

AFFINGER6(アフィンガー)トップページのカスタマイズ手順(フォント編)

AFFINGER5(アフィンガー)トップページのカスタマイズ手順(フォント編)

 

フォントのカスタマイズについては下記3点に分けて解説します。

 

  1. ヘッダーのフォントカスタマイズ
  2. サイドバーのフォントカスタマイズ
  3. フッターのフォントカスタマイズ

 

それでは1つずつ解説していきます。

 

1.ヘッダーのフォントカスタマイズ

 

まずは下記画像の赤枠部分、ヘッダーのフォントをカスタマイズします。

 

かずきの武器庫のヘッダーエリア

 

まずはタイトルとキャッチフレーズのフォントカスタマイズから。

WordPress管理画面から「外観」→「カスタマイズ」をクリックしてください。

 

WordPressのカスタマイズ画面

 

そこから「基本エリア設定」→「ヘッダーエリア」をクリック。

 

ヘッダーエリアのカスタマイズ

 

それぞれ下記のようにカスタマイズします。

 

ヘッダーエリアのカスタマイズ画面

  • サイト上部にライン:#ffffff
  • ラインの高さ(px):5px
  • 背景色:#ffffff
  • 背景色(グラデーション上部):#fffffff
  • サイトタイトルとキャッチフレーズの文字色:#333333

 

続いてはメニューバーのフォントカスタマイズ。

カスタマイズ画面から「メニューのカラー設定」→「PCヘッダーメニュー」をクリック。

 

PCヘッダーメニューのカスタマイズ

 

そこでメニューバーのフォントをカスタマイズします。

下記のようにカスタマイズしてください。

 

PCヘッダー画面のカスタマイズ設定①

PCヘッダー画像のカスタマイズ設定

  • 背景色:#333333
  • 背景色(グラデーション上部):#333333
  • ボーダー上下色:#ffffff
  • ボーダー左右色:#ffffff
  • ボーダー右色:#ffffff
  • 文字色:#ffffff
  • メニューをセンター寄せにする:チェックを入れる
  • メニューの横幅を100%にする:チェックを入れる
  • メニューの幅(px):160
  • メニューの上下に隙間を作る:設定しない
  • 下層ドロップダウンメニュー背景色:#333333

 

これでヘッダーのフォントカスタマイズが完了です。

 

kazuki
お疲れさまでした。続いてはサイドバーをカスタマイズしましょう!

 

2.サイドバーのフォントカスタマイズ

 

下記画像の赤枠部分をカスタマイズしていきます。

 

かずきの武器庫のサイドバー

 

まずはカスタマイズ画面から、「基本エリア設定」→「サイドバー」をクリック。

 

ヘッダーエリアのカスタマイズ

 

下記画像のようにカスタマイズしてください。

 

サイドバーのフォントカスタマイズ

  • サイドの文字色(一部カラーの強制変更):#333333
  • サイドバーウィジェットエリアの背景色:#ffffff

 

続いて、「各テキストとhタグ(見出し)」→「ウィジェットタイトル(サイドバー)」をクリック。

 

各テキストとhタグ(見出し)のカスタマイズ

 

下記画像のようにカスタマイズします。

 

各テキストのフォントカスタマイズ①

各テキストのフォントカスタマイズ②

  • 文字色:#333333
  • 背景色:#ffffff
  • 背景色(グラデーション上部):#ffffff
  • ボーダー色:#333333
  • ボーダー色(サブ):#333333
  • グラデーションアンダーラインに変更(※要ボーダー色):チェックを入れる

 

これで当サイトと同じサイドバーのフォントにカスタマイズできました。

 

お疲れ様です!次で最後なので頑張りましょう。
kazuki

 

3.フッターのフォントカスタマイズ

 

下記画像の赤枠部分をカスタマイズしていきます。

 

かずきの武器庫のフッターのフォントカスタマイズ

 

カスタマイズ画面から「基本エリア設定」→「フッターエリア」をクリック。

 

ヘッダーエリアのカスタマイズ

 

下記画像のようにカスタマイズしていきます。

 

フッターのカスタマイズ画面

  • フッター文字色:#333333
  • 背景色:#ffffff
  • 背景色(グラデーション上部):#ffffff

 

これで当サイトと同じフッターのフォントにカスタマイズできました。

 

以上でトップページカスタマイズの全工程が終了です。

このまま当サイトと同じトップページを使ってもいいですが、どこを触ればどのように変化するのか?すでに理解できているかと思います。

 

自分好みのトップページを作ることもできるはずですよ!
kazuki

 

さて、最後にトップページ以外のカスタマイズ手順を解説します。

 

AFFINGER6(アフィンガー)トップページ以外のカスタマイズ

AFFINGER6(アフィンガー)トップページ以外のカスタマイズ

 

トップページ以外のカスタマイズとしては下記2点。

 

  1. フォントサイズ・行間のカスタマイズ
  2. 各テキストとhタグのカスタマイズ

 

1つずつ解説していきますね。

 

1.フォントサイズ・行間のカスタマイズ

 

WordPress管理画面から「AFFINGER6管理」→「デザイン」をクリックし、「フォントのサイズ」を見つけて下さい。

 

アフィンガー5のデザインカスタマイズ

 

当サイトではそれぞれ、下記画像のようにカスタマイズしてます。

 

スマートフォン版のフォントカスタマイズ

PC版のフォントカスタマイズ

 

同じに設定してもOKですが、最後に「save」をクリックすることだけ忘れずに。

これでフォントサイズ・行間のカスタマイズが完了です。

 

2.各テキストとhタグのカスタマイズ

 

WordPress管理画面から「外観」→「カスタマイズ」→「+各テキストとhタグ(見出し)」をクリック。

 

各テキストとhタグのカスタマイズ

 

当サイトではそれぞれ、h2、h3をカスタマイズしています。

まずはh2から。下記画像のようにカスタマイズしてください。

 

h2のカスタマイズ①

h2のカスタマイズ②

h2のカスタマイズ③

  • 文字色:#333333
  • 背景色:#f7f7f7
  • 背景色(グラデーション上部):#f7f7f7
  • ボーダー色:#4865b2
  • ボーダー色(サブ):#4865b2
  • 左ラインデザインに変更(※要ボーダー色):チェックを入れる
  • 左の余白(px):40
  • 上下の余白(px):20

 

続いてはh3です。

 

h3のカスタマイズ①

h3のカスタマイズ②

h3のカスタマイズ③

  • 文字色:#333333
  • 背景色:#f7f7f7
  • 背景色(グラデーション上部):#f7f7f7
  • ボーダー色:#4865b2
  • ボーダー色(サブ):#4865b2
  • 左ラインデザインに変更(※要ボーダー色):チェックを入れる
  • 左の余白(px):20
  • 上下の余白(px):0

 

以上でトップページ以外のカスタマイズが完了です。お疲れさまでした。

 

kazuki
これでカスタマイズに関しては完璧です。次はじゃんじゃん記事を書いて収益化を目指しましょう!

 

まとめ:AFFINGER6(アフィンガー)トップページのカスタマイズ手順

まとめ:AFFINGER6(アフィンガー)トップページのカスタマイズ手順

 

本記事ではAFFINGER6を使ったトップページのカスタマイズ手順について解説しました。

当サイトをベースに解説しているので、解説した内容通り実行してただくと同じトップページが完成します。

 

このまま真似していただいてもいいですし、さらにアレンジしてもOK。

 

好きなようにカスタマイズしていきましょう!
kazuki

 

また、このようにAFFINGER6には便利な機能がたくさんあります。

他の機能も知りたい人や実際に利用している人の口コミ・評判を知りたい人は、個別でまとめた記事があるので参考にしてください。

 

②:WordPressテーマはAFFINGER6(テーマ最適化)
[購入特典あり]AFFINGER6(アフィンガー)の購入&導入手順

続きを見る

稼げるテーマ!AFFINGER6(アフィンガー)の口コミ・評判まとめ
稼げるテーマ!AFFINGER6(アフィンガー)の口コミ・評判まとめ

続きを見る

【アフィンガー5 JET】評価、導入・カスタマイズ方法【すべて語る】

続きを見る

【最短5分】AFFINGER6(アフィンガー)の初期設定を徹底解説
【最短5分】AFFINGER6(アフィンガー)の初期設定を徹底解説

続きを見る

AFFINGER6(アフィンガー)がSEOに強いと言われる5つの理由
AFFINGER6(アフィンガー)がSEOに強いと言われる5つの理由

続きを見る

【初心者向け】AFFINGER6の使い方【絶対に使う機能6選】
【初心者向け】AFFINGER6の使い方【絶対に使う機能6選】

続きを見る

【徹底解説】AFFINGER6で目次を作る方法3選
【徹底解説】AFFINGER6で目次を作る方法3選

続きを見る

【超おしゃれ】アフィンガー6のスライドショーの設定方法と使い方
【超おしゃれ】AFFINGER6のスライドショーの設定方法と使い方

続きを見る

AFFINGER6のランキング作成手順を徹底解説
AFFINGER6のランキング作成手順を徹底解説

続きを見る

AFFINGER6(アフィンガー)のブログカードの作り方。2秒で作れます。
AFFINGER6(アフィンガー)のブログカードの作り方。2秒で作れます。

続きを見る

【アフィンガー5】吹き出し機能の設定から使い方まで徹底解説
【AFFINGER6】吹き出し機能の設定から使い方まで徹底解説

続きを見る

 

気になるものがあれば読んでみてください。

それでは今日はこのへんで。グッバーイ

 


-affinger