[コピーOK]アフィンガー5でトップページをカスタマイズする手順

2020年4月23日

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

 

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

 

✔本記事の執筆者

かずきの武器庫運営者

Twitter:かずき(@k03mind)

 

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

 

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

 

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

 

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

 

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

 

※本記事はすでにAFFINGER5を購入している人向けの記事です。もし、まだ購入されていないのであれば、下記の記事をどうぞ☟

購入特典

当サイト経由でAFFINGE5をご購入いただけますと、購入者限定特典として6つの特典をプレゼントします。

>>AFFINGER5購入特典についてはこちら

 

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

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

 

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

 

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

 

上記は画像ですが、リアルを見たい人はトップページをクリックしてください。

 

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

 

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

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

 

 

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

 

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

 

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

 

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

 

1.ヘッダーの作り方

 

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

 

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

 

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

 

まずはタイトルとサイト紹介について。

 

WordPress管理画面から「設定」→「一般」の順にクリックしてください☟

 

ワードプレスの一般設定

 

こちらでサイトタイトルキャッチフレーズを編集できます。

 

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

 

WordPress管理画面から「AFFINGER5管理」→「ヘッダー」の順にクリックしていただき、「ヘッダー設定」を探してください☟

 

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

 

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

 

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

 

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

 

kazuki
中央寄せの方が見栄えがいいですね!

 

続いてはメニューバーの編集です。

 

WordPress管理画面から「外観」→「メニュー」の順でクリックしてください☟

 

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

 

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

 

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

 

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

 

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

 

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

 

まずはWordPress管理画面から「AFFINGER5管理」→「おすすめ記事一覧」の順にクリックしてください☟

 

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

 

その中の「おすすめヘッダーカード」で、カード型リンクを作成します☟

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

そこで、タイトルを"トップページ"、見出しをh3で"新着記事"と入力してください☟

 

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

 

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

 

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

ショートコード

 

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

 

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

 

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

 

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

 

ショートコード

 

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

 

【初心者向け】アフィンガー5の使い方【絶対に使う機能6選】

2020/10/19

【初心者向け】アフィンガー5の使い方【絶対に使う機能6選】

アフィンガー5の使い方を詳しく知りたくないですか?本記事ではAFFINGER5で絶対に使う機能6つの使い方を解説します。また、その他にも便利な機能3つを解説するので、アフィンガー5の使い方がわからない人は本記事で解決できること間違いなしですよ。

続きを読む

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

2020/10/18

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

アフィンガー5のスライドショーの設定方法と使い方を知りたくないですか?本記事ではスライドショーの具体的な設定方法から使い方まで詳しく解説します。AFFINGER5の設定方法と使い方を知りたい人は必見です。

続きを読む

[初心者向け]ブログアフィリエイトにおすすめのツール8選。とりあえずこれだけでOK。

2020/6/5

[初心者向け]ブログアフィリエイトにおすすめのツール8選。とりあえずこれだけでOK。

ブログアフィリエイトにおすすめのツールが何か知りたいとは思いませんか?本記事では誰もが導入しているツールを8個、ご紹介します。ブログアフィリエイトにおすすめのツールを探している人は、本記事で紹介するツール8個を導入しておけばOKです。

続きを読む

[悲報]AFFINGER5(アフィンガー5)初心者は○○ができないと使えない

2020/5/29

[悲報]AFFINGER5(アフィンガー5)初心者は○○ができないと使えない

実はアフィンガー5は、○○ができないと使うことができないんですよ?本記事ではアフィンガー5初心者に必要な「あること」についてや、初心者におすすめである理由を解説します。アフィンガー5を購入しようか悩んでいる初心者ブロガーさんは必見です。

続きを読む

[最新版]アフィリエイト向きのWordPressテーマ3選~有名ブロガー使用~

2020/5/28

[最新版]アフィリエイト向きのWordPressテーマ3選~有名ブロガー使用~

アフィリエイト向きのWordPressテーマを知りたいとは思いませんか?結論から言うと、「稼いでいるブロガーが使っているテーマ」を選べばOKです。本記事では実際に稼いでいるブロガーさんが使っているテーマを3つご紹介します。

続きを読む

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

そして、「タグ」→「レイアウト」→「PCとTab(959px以上)」→「左右50%」の順にクリック☟

 

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

 

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

 

バナー風ボックスの出力

 

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

 

タグ」→「ボックスデザイン」→「バナー風ボックス」→「基本」の順でクリック☟

 

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

 

すると、コードが出力されます☟

 

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

 

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

 

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

 

当サイトではこのようになります☟

 

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

 

これでバナー風ボックスの完成。続いては、カードリンクの作成です☟

 

かずきの武器庫のカード

 

カード」をクリックしてショートコードを出力してください☟

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

こちらはWordPress管理画面から「ランキング管理」をクリックすると設定できます☟

 

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

 

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

 

AFFINGER5

AFFINGER5公式ページトップ画面

有名ブロガーが愛する最強のテーマ、AFFINGER5

カスタマイズが豊富で初心者でも簡単に使いこなせます。

今なら「詳細ページ」から購入いただけますと、当サイト限定の6つの特典が付いてきますよ。

 

こんな感じにね。

 

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

 

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

 

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

 

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

 

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

 

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

 

その中の、「11̠STINGERサイト管理者紹介」を「サイドバーウィジェット」に追加☟

 

WordPressのウィジェット画面

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

すると、プロフィール情報の編集欄があります☟

 

WordPressのプロフィール編集欄

 

簡単な自己紹介を入力してください。

 

終わりましたら、最後に「保存」をクリック。

 

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

 

WordPressのカスタマイズ画面

 

その中の「+オプションカラー」をクリックしてください☟

 

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

 

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

 

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

 

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

 

サイト管理者紹介の設定

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

その中の、「おすすめ記事一覧の作成」で設定することができます☟

 

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

 

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

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

 

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

 

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

 

8.フッターの作り方

 

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

 

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

 

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

 

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

 

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

 

フッター画像の編集画面

 

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

 

 

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

 

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

 

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

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

WordPressのカスタマイズ画面

 

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

 

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

 

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

 

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

  • サイト上部にライン:#ffffff
  • ラインの高さ(px):5px
  • 背景色:#333333
  • 背景色(グラデーション上部):#333333
  • サイトタイトルとキャッチフレーズの文字色:#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
自分好みのトップページを作ることもできるはずですよ!

 

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

 

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

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

 

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

 

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

 

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

 

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

 

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

 

アフィンガー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
これでカスタマイズに関しては完璧です。次はじゃんじゃん記事を書いて収益化を目指しましょう!

 

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

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

 

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

 

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

 

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

 

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

 

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

 

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

 

 

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

 

 


 

 

 

-affinger

© 2020 かずきの武器庫