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

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

2020年4月23日

 

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

 

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

 

本記事の内容

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

 

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

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

 

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

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

 

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

 

  • この記事を書いた人

kazuki

【実績】最高月15,000PV&収益34万円 | 当サイトでは超初心者向けのブログ情報や、僕も使っている厳選したおすすめのブログツールを紹介します。"ブログで稼ぎたい"と考えている人に最適な情報を届けます。

 

※当サイト経由でAFFINGER6を購入すると、限定特典として7点を無料プレゼントします。尚、特典は期間限定なので、予告なく終了する可能性があります。あらかじめご了承ください。

購入者特典

  1. 2021年でも月30万稼ぎ続けるキーワードを10個暴露
  2. 月30万稼ぐサイトのプラグインを公開
  3. レビュー記事の書き方[テンプレート配布]
  4. 比較記事の書き方[テンプレート配布]
  5. ランキング記事の書き方[テンプレート配布]
  6. 質問し放題[無期限]
  7. 限定プラグイン[「SUGOI MOKUJI [LITE]」]

\購入ページはこちら/

7つの限定特典付き

実際に利用している人の評価や特典詳細は、こちらの【特典付きレビュー】AFFINGER6(アフィンガー)の口コミ・評判まとめをどうぞ。

購入手順はこちらの[購入特典あり]AFFINGER6(アフィンガー)の購入&導入手順をどうぞ。

 

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

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

 

今回作成するトップページは下記の通り。以前当サイトで使っていたトップページであり、Tsuzuki Blogを参考にしたものです。

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

イメージで大丈夫なので、まずは上記の画像をご覧ください。次の項から作り方を具体的に解説していきます。

また、コピーしてもOKですよ。

 

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

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

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

トップページ作成手順は上記の通り。多いように見えますが、それぞれ簡単な作業ばかりなのですぐに終わります。

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

 

①ヘッダーの作り方

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

ヘッダーとは上記、赤枠の部分。画像を使わず、タイトルとサイト紹介、メニューバーのみで作成しています。

 

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

ワードプレスの一般設定

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

 

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

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

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

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

 

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

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

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

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

 

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

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

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

 

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

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

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

 

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

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

 

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

 

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

 

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

 

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

 

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

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

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

 

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

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

 

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

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

 

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

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

ショートコード

 

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

 

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

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

 

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

ショートコード

 

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

 

【2022年5月】格安SIMってどこを使えばいい?厳選3社を徹底比較

2022/5/4

【2022年5月】格安SIMってどこを使えばいい?厳選3社を徹底比較

格安SIMを使いたいけど、多すぎてどこを使えばいいかわからないですよね。いきなり結論を言うと、格安SIMはY!mobile、楽天モバイル、UQモバイルのどれかを使っておけば間違いありません。本記事では、3つの格安SIMの特徴や詳細情報を比較していきます。

続きを読む

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

2021/11/20

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

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

続きを読む

2021/11/20

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

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

続きを読む

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

2021/11/20

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

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

続きを読む

2022/1/14

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

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

続きを読む

 

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

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

 

④おすすめ記事の作り方

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

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

 

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

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

 

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

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

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

 

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

バナー風ボックスの出力

 

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

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

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

 

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

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

 

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

 

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

 

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

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

 

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

かずきの武器庫のカード

 

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

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

 

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

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

 

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

ちなみにブログカードは多くても良くないので最大でも4枚までにしときましょう。また、このブログカードは記事中でも内部リンクとして表示することができます。

 

さらに詳しく知りたい人は、こちらのアフィンガー6のブログカードの作り方。2秒で作れます。をどうぞ。作り方や使う際の注意点など、ブログカードについて網羅的にまとめています。

 

⑤ランキング機能の作り方

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

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

 

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

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

 

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

 

Y!mobile

ポイント

  • ワイモバ親子割で15GBが月々990円(税込み)~
  • 全国どこでも大手キャリアと同じで速度が安定
  • 余ったデータ容量は次月へ繰り越し!
  • 他社からの乗り換えで最大1万円キャッシュバック

 

こんな感じにね。

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

 

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

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

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

 

まずはWordPress管理画面から「外観」→「ウィジェット」をクリックしてください。その中の、「11̠STINGERサイト管理者紹介」を「サイドバーウィジェット」に追加。画像で見ると下記の通りです。

WordPressのウィジェット画面

 

次に、WordPress管理画面から「ユーザー」→「プロフィール」の順にクリックしていただき、下にスクロール。すると、下記画像のように「ニックネーム」を設定できる欄があります。

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

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

 

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

WordPressのプロフィール編集欄

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

 

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

WordPressのカスタマイズ画面

 

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

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

 

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

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

 

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

サイト管理者紹介の設定

 

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

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

 

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

 

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

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

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

 

WordPress管理画面から「AFFINGER6管理」→「おすすめ記事一覧」をクリック。その中の、「おすすめ記事一覧の作成」で設定することができます。画像で見ると下記の通りです。

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

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

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

 

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

 

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

 

⑧フッターの作り方

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

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

 

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

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

 

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

フッター画像の編集画面

 

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

 

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

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

 

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

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

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

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

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

 

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

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

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

 

まずはタイトルとキャッチフレーズのフォントカスタマイズから。WordPress管理画面から「外観」→「カスタマイズ」をクリックしてください。

WordPressのカスタマイズ画面

 

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

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

 

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

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

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

 

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

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

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

 

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

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

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

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

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

 

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

 

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

 

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

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

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

 

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

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

 

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

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

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

 

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

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

 

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

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

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

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

 

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

 

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

 

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

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

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

 

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

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

 

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

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

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

 

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

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

 

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

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

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

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

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

 

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

 

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

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

 

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

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

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

 

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

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

 

②各テキストと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(アフィンガー)の口コミ・評判まとめ

続きを見る

【アフィンガー6 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