このような疑問にお答えします。
✔本記事の執筆者
Twitter：かずき(@k03mind)
AFFINGER5は簡単にトップページをカスタマイズできる点が非常に優秀で、数々のブロガーに愛されてきました。
しかし、実はブログ初心者にとっては少しカスタマイズが難しいです。。。
ということで今回は、初心者でも簡単にカスタマイズできるよう、当サイトのトップページを基に解説しますね。
一度当サイトを真似することで、カスタマイズ方法を理解することが狙いです。
※本記事はすでにAFFINGER5を購入している人向けの記事です。もし、まだ購入されていないのであれば、下記の記事をどうぞ☟
目次
AFFINGER5(アフィンガー)トップページのイメージ
まずは当サイトのトップページをご覧ください☟
上記は画像ですが、リアルを見たい人はトップページをクリックしてください。
今回はこのトップページの作り方を解説していきますね。
AFFINGER5(アフィンガー)トップページのカスタマイズ手順
当サイトを作るためには、下記8つの手順を行う必要があります。
- ヘッダーの作り方
- ヘッダーのカード型リンクの作り方
- 新着記事(スライドショー)の作り方
- おすすめ記事の作り方
- ランキング機能の作り方
- サイト管理者紹介の作り方
- よく読まれている記事の作り方
- フッターの作り方
多いように見えますが、それぞれ簡単な作業ばかりなのですぐに終わります。
それでは一つずつ解説していきますね。
１．ヘッダーの作り方
ヘッダーとは下記、赤枠の部分。
当サイトでは画像を使わず、タイトルとサイト紹介、メニューバーのみで作成しています。
まずはタイトルとサイト紹介について。
WordPress管理画面から「設定」→「一般」の順にクリックしてください☟
こちらでサイトタイトル、キャッチフレーズを編集できます。
また、このままでは左側にタイトルとキャッチフレーズが表示されてしまうので、中央に寄せます。
WordPress管理画面から「AFFINGER5管理」→「ヘッダー」の順にクリックしていただき、「ヘッダー設定」を探してください☟
そこで下記2点にチェック。
- ヘッダーを分割しない
- ヘッダーエリアをセンタリング
これでタイトルとキャッチフレーズが中央に寄りました。
続いてはメニューバーの編集です。
WordPress管理画面から「外観」→「メニュー」の順でクリックしてください☟
こちらでヘッダーメニューを編集できます。
プロフィールを作成するのか？Twitterをリンクさせるのか？お好みでOKです。
２．ヘッダーのカード型リンクの作り方
ヘッダーのカード型リンクとは、下記画像の赤枠部分。
まずはWordPress管理画面から「AFFINGER5管理」→「おすすめ記事一覧」の順にクリックしてください☟
その中の「おすすめヘッダーカード」で、カード型リンクを作成します☟
ここでは下記3点を編集してください☟
- 画像のURL：表示したい画像のURLを入力
- テキスト：表示したいテキストを入力
- リンク先URL：飛ばしたいURLを入力
設定が終わりましたら最後に「SAVE」です。これでカード型のリンクが完成しました。
３．新着記事(スライドショー)の作り方
新着記事(スライドショー)とは、下記画像の赤枠部分☟
こちらは先ほどとは違い、固定ページで作ります。まずはWordPress管理画面から「固定ページ」へアクセスしてください☟
そこで、タイトルを"トップページ"、見出しをh3で"新着記事"と入力してください☟
そこから、「タグ」→「記事一覧」→「カテゴリー一覧」の順にクリックしていただき、ショートコードを出力します☟
ショートコードには下記のように一つ一つ意味があります☟
- st-catgroup cat="カテゴリID指定"
- page="読み込み数"
- orderby="id"
- child="子カテゴリーの読み込み"
- slide="スライドショーのオンオフ"
- slide_to_show="列数の指定"
- slide_more="続きを読む"
- slide_center="off"
これは覚えなくてもOK。スクショでも取っておいたら後で見返せます。
出力したショートコードを、当サイトでは少しだけ編集しています☟
すると、こんな感じで表示されます☟
また、スライドショーについては、こちらの【超おしゃれ】アフィンガー5のスライドショーの設定方法と使い方でもまとめています。
使い方の注意点などをまとめているので、スライドショーについてさらに詳しく知ることができますよ。
４．おすすめ記事の作り方
おすすめ記事とは下記、赤枠の部分。
こちらも先ほどと同様に固定ページで作ります。まずはバナー風ボックスから☟
新着記事(スライドショー)で使った固定ページで、見出しh3で「おすすめ記事」と入力してください。
そして、「タグ」→「レイアウト」→「PCとTab（959px以上）」→「左右50％」の順にクリック☟
すると、下記のように二つの列が作られます☟
まずは左の黄色のボックスから編集します。
「タグ」→「ボックスデザイン」→「バナー風ボックス」→「基本」の順でクリック☟
すると、コードが出力されます☟
同じように右側の青色のボックスもコードを出力。そして下記3点のコードを修正します☟
- st-flexbox url="リンク先URL"
- title="カテゴリーのタイトル"
- background_image="タイトルの背景画像"
当サイトではこのようになります☟
これでバナー風ボックスの完成。続いては、カードリンクの作成です☟
「カード」をクリックしてショートコードを出力してください☟
そして、下記のようにコードを修正☟
記事IDは自分がカード型にしたいものを入力してください。(WordPress管理画面から「投稿記事一覧」で確認できます)
ちなみに当サイトでは、ブログカードを3つずつ配置しています。多くても良くないので最大でも4枚までにしときましょう。
また、このブログカードは記事中でも内部リンクとして表示することができます。
さらに詳しく知りたい人は、こちらのアフィンガー5のブログカードの作り方。2秒で作れます。をどうぞ。
作り方や使う際の注意点など、ブログカードについて網羅的にまとめています。
５．ランキング機能の作り方
ランキング機能とは、下記画像の赤丸部分☟
こちらはWordPress管理画面から「ランキング管理」をクリックすると設定できます☟
こちらの設定は少し複雑ですが、一度設定を終わらせてしまえばショートコードを入力するだけでランキングを出力することができます。
こんな感じにね。
ランキングの作り方についてここで解説すると少し長くなるので、こちらのアフィンガー5のランキング作成手順を徹底解説をどうぞ。
作り方から使う際の注意点を詳しく解説しています。
６．サイト管理者紹介の作り方
サイト管理者紹介とは、下記の赤丸部分☟
まずはWordPress管理画面から「外観」→「ウィジェット」をクリックしてください。
その中の、「11̠STINGERサイト管理者紹介」を「サイドバーウィジェット」に追加☟
また、当サイトのサイドバーはこのように配置しています☟
- 検索
- 11̠STINGERサイト管理者紹介
- アーカイブ
- category
順番はお好みで入れ替えてOK。ドラッグすれば簡単に入れ替えることができます。
次に、WordPress管理画面から「ユーザー」→「プロフィール」の順にクリックしていただき、下にスクロール。
すると、下記画像のように「ニックネーム」を設定できる欄があります☟
表示したい名前を入力しましょう。終わりましたらさらにスクロール。
すると、プロフィール情報の編集欄があります☟
簡単な自己紹介を入力してください。
終わりましたら、最後に「保存」をクリック。
さて、続いてはWordPress管理画面から「外観」→「カスタマイズ」をクリック☟
その中の「＋オプションカラー」をクリックしてください☟
下にスクロールしていただくと「サイト管理者紹介」が見つかります☟
そこで「プロフィールカードに変更」にチェックを入れ、「アバター画像」を挿入してください☟
他にもカスタマイズできますが、ひとまずはこれでOK。
最後に「公開」をクリックしてください。
７．よく読まれている記事の作り方
よく読まれている記事とは、下記画像の赤枠部分☟
WordPress管理画面から「AFFINGER5管理」→「おすすめ記事一覧」をクリック。
その中の、「おすすめ記事一覧の作成」で設定することができます☟
- おすすめ記事一覧に表示する文字：表示したい文字を入力
- 任意の人気記事を指定（投稿又は固定記事ID）：表示したい記事IDを入力
- サイドのスクロールに表示にする（抜粋非表示）：チェックを入れる
（記事IDはWordPress管理画面から「投稿一覧」で確認できます）
これでよく読まれている記事の作成は完了です。
８．フッターの作り方
フッターとは、下記画像の赤丸部分☟
ヘッダーの作り方と同じで、WordPress管理画面から「外観」→「メニュー」の順でクリックしてください☟
編集するメニューをフッターに変更☟
以上、AFFINGER5トップページのカスタマイズ手順でした。
ただ、これではまだデフォルトの青色のまま。続いてはフォントのカスタマイズ手順を解説しますね。
AFFINGER5(アフィンガー)トップページのカスタマイズ手順(フォント編)
フォントのカスタマイズについては下記3点に分けて解説します。
- ヘッダーのフォントカスタマイズ
- サイドバーのフォントカスタマイズ
- フッターのフォントカスタマイズ
それでは1つずつ解説していきます。
１．ヘッダーのフォントカスタマイズ
まずは下記画像の赤枠部分、ヘッダーのフォントをカスタマイズします☟
まずはタイトルとキャッチフレーズのフォントカスタマイズから。
WordPress管理画面から「外観」→「カスタマイズ」をクリックしてください☟
そこから「基本エリア設定」→「ヘッダーエリア」をクリック☟
それぞれ下記のようにカスタマイズします☟
- サイト上部にライン：#ffffff
- ラインの高さ（px）：5px
- 背景色：#333333
- 背景色（グラデーション上部）：#333333
- サイトタイトルとキャッチフレーズの文字色：#333333
続いてはメニューバーのフォントカスタマイズ。
カスタマイズ画面から「メニューのカラー設定」→「PCヘッダーメニュー」をクリック☟
そこでメニューバーのフォントをカスタマイズします。
下記のようにカスタマイズしてください☟
- 背景色：#333333
- 背景色（グラデーション上部）：#333333
- ボーダー上下色：#ffffff
- ボーダー左右色：#ffffff
- ボーダー右色：#ffffff
- 文字色：#ffffff
- メニューをセンター寄せにする：チェックを入れる
- メニューの横幅を100%にする：チェックを入れる
- メニューの幅（px）：160
- メニューの上下に隙間を作る：設定しない
- 下層ドロップダウンメニュー背景色：#333333
これでヘッダーのフォントカスタマイズが完了です。
２．サイドバーのフォントカスタマイズ
下記画像の赤枠部分をカスタマイズしていきます☟
まずはカスタマイズ画面から、「基本エリア設定」→「サイドバー」をクリック☟
下記画像のようにカスタマイズしてください☟
- サイドの文字色（一部カラーの強制変更）：#333333
- サイドバーウィジェットエリアの背景色：#ffffff
続いて、「各テキストとhタグ(見出し)」→「ウィジェットタイトル(サイドバー)」をクリック☟
下記画像のようにカスタマイズします☟
- 文字色：#333333
- 背景色：#ffffff
- 背景色（グラデーション上部）：#ffffff
- ボーダー色：#333333
- ボーダー色（サブ）：#333333
- グラデーションアンダーラインに変更（※要ボーダー色）：チェックを入れる
これで当サイトと同じサイドバーのフォントにカスタマイズできました。
３．フッターのフォントカスタマイズ
下記画像の赤枠部分をカスタマイズしていきます☟
カスタマイズ画面から「基本エリア設定」→「フッターエリア」をクリック☟
下記画像のようにカスタマイズしていきます☟
- フッター文字色：#333333
- 背景色：#ffffff
- 背景色（グラデーション上部）：#ffffff
これで当サイトと同じフッターのフォントにカスタマイズできました。
以上でトップページカスタマイズの全工程が終了です。
このまま当サイトと同じトップページを使ってもいいですが、どこを触ればどのように変化するのか？すでに理解できているかと思います。
さて、最後にトップページ以外のカスタマイズ手順を解説します。
AFFINGER5(アフィンガー)トップページ以外のカスタマイズ
トップページ以外のカスタマイズとしては下記2点☟
- フォントサイズ・行間のカスタマイズ
- 各テキストとhタグのカスタマイズ
1つずつ解説していきますね。
１．フォントサイズ・行間のカスタマイズ
WordPress管理画面から「AFFINGER5管理」→「デザイン」をクリックし、「フォントのサイズ」を見つけて下さい☟
当サイトではそれぞれ、下記画像のようにカスタマイズしてます☟
同じに設定してもOKですが、最後に「save」をクリックすることだけ忘れずに。
これでフォントサイズ・行間のカスタマイズが完了です。
２．各テキストとhタグのカスタマイズ
WordPress管理画面から「外観」→「カスタマイズ」→「＋各テキストとhタグ(見出し)」をクリック☟
当サイトではそれぞれ、h2、h3をカスタマイズしています。
まずはh2から。下記画像のようにカスタマイズしてください☟
- 文字色：#333333
- 背景色：#f7f7f7
- 背景色（グラデーション上部）：#f7f7f7
- ボーダー色：#4865b2
- ボーダー色（サブ）：#4865b2
- 左ラインデザインに変更（※要ボーダー色）：チェックを入れる
- 左の余白（px）：40
- 上下の余白（px）：20
続いてはh3です☟
- 文字色：#333333
- 背景色：#f7f7f7
- 背景色（グラデーション上部）：#f7f7f7
- ボーダー色：#4865b2
- ボーダー色（サブ）：#4865b2
- 左ラインデザインに変更（※要ボーダー色）：チェックを入れる
- 左の余白（px）：20
- 上下の余白（px）：0
以上でトップページ以外のカスタマイズが完了です。お疲れさまでした。
まとめ：AFFINGER5(アフィンガー)トップページのカスタマイズ手順
本記事ではAFFINGER5を使ったトップページのカスタマイズ手順について解説しました。
当サイトをベースに解説しているので、解説した内容通り実行してただくと同じトップページが完成します。
このまま真似していただいてもいいですし、さらにアレンジしてもOK。
また、このようにAFFINGER5には便利な機能がたくさんあります。
他の機能も知りたい人や実際に利用している人の口コミ・評判を知りたい人は、個別でまとめた記事があるので参考にしてください☟
✔アフィンガー5の口コミ・評判
>>稼げるテーマ！AFFINGER5(アフィンガー)の口コミ・評判まとめ
✓アフィンガー5の使い方
✓スライドショーの使い方
>>【超おしゃれ】アフィンガー5のスライドショーの設定方法と使い方
✓ブログカードの使い方
✓吹き出し機能の使い方
>>【アフィンガー5】吹き出し機能の設定から使い方まで徹底解説
✔ランキング機能の使い方
それでは今日はこのへんで。グッバーイ
