AFFINGER5のトップページカスタマイズ法を解説【YusakuBlog風にアレンジ】

先日、アフィンガーを購入したのですが、トップページのカスタマイズに苦戦しています。YusakuBlog風のトップページはどうやって作っているのか教えて下さい！

悩んでいる人

こんな悩みを解決します。

この記事を書いている人

_{Twitter（@you_blog2912）を運営中}

今回は、アフィンガーを使ったトップページのカスタマイズ法を紹介します。

実際に僕も、アフィンガーを購入して1ヶ月くらいはどうすればいい感じのトップページになるか試行錯誤していました。

この記事では、初心者でもYusakublog風のトップページを作れるよう詳しく手順を紹介していきます。

初心者の人も同じ手順でできるので、画面を見ながらやってみてくださいね！

ゆーさく

ちなみに、まだAFFINGER5の購入を迷っている人は【限定特典付き】AFFINGER5（アフィンガー5）の評判・口コミを徹底解説の記事を参考にしてみてください。

AFFINGER5トップページの完成形

今回は、上のようなデザインのトップページを作成していきます。

一気にカスタマイズするのは大変なので、以下の3つに分けて説明していきますね。

それではさっそく見ていきましょう。

AFFINGER5カスタマイズ：ヘッダーエリア編

ヘッダーエリア編では、以下の3つを設定していきます。

順番に設定していきましょう。

その①：インフォメーションバー

インフォメーションバーは、当ブログのトップページ上にあるテキストのことです。

_{インフォーメーションバー}

インフォーメーションバーを設定しておくことで、以下のようなことに使うことができます。

3分ほどあれば、インフォーメーションバーを設定できるのでやってみてください。

具体的なやり方はAFFINGER5（アフィンガー5）ヘッダー上インフォメーションバーの作り方で解説しているので参考にしてみてください。

その②：ヘッダーメニュー

次に、ブログのヘッダーメニューを作成していきます。

手順は以下の3つです。

順番に見ていきましょう。

step
1カテゴリーを作る

まずは『投稿』→『カテゴリー』をクリックします。

すると、下のような画面になるので、カテゴリー名とスラッグを入力してください。

カテゴリー名とスラッグを入力

スラッグとはURLのことで、当ブログの『AFFINGER5』のカテゴリーは以下のようになっています。

入力できたら『保存』しておきましょう。

step
2ヘッダーメニューを設定

次に、PCにヘッダーメニューを表示させていきます。

まずは『外観』→『メニュー』をクリックし、『メニュー名』と『メニュー設定』をします。

上のように入力したら『メニューを保存』してください。

これで、PCのヘッダー部分にメニューが表示されます。

step
3メニューをセンター寄せにする

まず『AFFINGER5管理』→『AFFINGER5管理』→『ヘッダー』をクリックしてください。

『AFFINGER5管理』→『AFFINGER5管理』→『ヘッダー』

次に『ヘッダーを分割しない』→『ヘッダーエリアをセンタリング』にチェックを入れます。

『ヘッダーを分割しない』→『ヘッダーエリアをセンタリング』にチェック

次に、『外観』→『カスタマイズ』をクリックして『メニューのカラー設定』→『PCヘッダーメニュー』→『メニューをセンター寄せにする』にチェックを入れます。

『メニューのカラー設定』→『PCヘッダーメニュー』→『メニューをセンター寄せにする』

これで、ヘッダーメニューとタイトルがセンターに表示されました。

その③：ヘッダーカード

次に、ヘッダーカードを設定します。

ヘッダーカードを表示

この部分には、見てもらいたい記事や収益記事を設置してみましょう。

ヘッダーカードの設定方法は【AFFINGER5】ヘッダーにカード型リンクを設置する方法を参考にしてみてください。

AFFINGER5カスタマイズ：トップページコンテンツエリア編

次に、トップページのコンテンツエリア部分です。

コンテンツエリアは、固定ページで作成していきます。

step
1固定ページを作成する

まずは『固定ページ』→『新規追加』を押してタイトルを入力します。

_{『固定ページ』→『新規追加』を押してタイトルを入力}

固定ページの名前は、あなたのブログ名でOKです。

step
2固定ページをトップページに設定する

次に、この固定ページを自分のブログのトッページになるように設定します。

『外観』→『カスタマイズ』→『ホームページ設定』をクリックしてください。

そして、以下のように設定しましょう。

固定ページにチェックを入れて作成したページを選択

変更を保存し、再度固定ページに戻ったときにタイトル横に『フロントページ』と表示されていればOKです。

トップページコンテンツを作成

以下の3つを設定して、トップページを作成していきましょう。

当ブログでは、スライドショーを使っていませんが使いたい！という人も多そうなのでおまけで紹介しますね。

それでは順番に解説していきます。

その①：スライドショーの設定

まずは、画像のように『見出し』を設定します。

見出しの設定

見出しの名前は「新着記事」などにしておけばOKです。

また、見出しのデザインは『外観』→『カスタマイズ』→『各テキストとhタグ』の部分で変更できます。

『外観』→『カスタマイズ』→『各テキストとhタグ』

次に、『タグ』→『記事一覧/カード』→『カテゴリー一覧（スライドショー）』をクリックしてください。

『タグ』→『記事一覧/カード』→『カテゴリー一覧（スライドショー）』をクリック

これでスライドショーの設置が完了しました。

ちなみに、スライドショーのコードで変更するのであれば以下になるかと思います。

※一番上はカテゴリーIDなので「投稿」→「カテゴリー」からIDを確認しましょう

デフォルトでも大丈夫なので、デザインや表示したい記事を変更したい場合は上の部分をいじってみてください。

その②：おすすめ記事の設定

次に、おすすめ記事の設定をしていきます。

おすすめ記事の設定

まず最初に、当ブログのようにカード型のデザインにしていきます。

『AFFINGER5管理』→『デザイン』→『サムネイル画像設定』の項目で、以下の部分にチェックを入れてください。

次に、さきほどの固定ページに移動して、カードを設定してきます。

まずは、人気記事の見出し下に『タグ』→『レイアウト』→『PCとTab（959px以上）』→『左右50％』をクリックしてトップページを二分割にしていきましょう。

『タグ』→『レイアウト』→『PCとTab（959px以上）』→『左右50％』

これで、PCでは2列スマホでは1列のトップページを作ることができます。

次に、『このテキストは最後に消して下さい（50%）』の下に『カード』をクリックしてコードを挿入してください。

『このテキストは最後に消して下さい（50%）』の下に『カード』をを挿入

そして、コードを以下のように変更します。

記事のIDは、投稿一覧の画像の部分から確認することができます。

表示したい記事IDを確認

また、カードの縦の長さは340くらいにしておきましょう。

そして、readmoreの部分はoffにしておいてください。

あとは同じ要領で、最初のカードの下にコードを挿入していきましょう。

同じ要領でコードを挿入

そして、同じように右列にもコードを挿入します。

右列にもコードを挿入

最後に『このテキストは最後に消して下さい（50%）』のテキストを消去して完了です。

「このテキストは最後に消して下さい（50%）」のテキストを消去

その③：各カテゴリーの新着記事

最後に、各カテゴリーの新着記事を設定していきます。

各カテゴリーの新着記事

ボタンで切り替えることができるのがちょっとおしゃれですよね。

まずは「各カテゴリーの新着記事」の見出し下に『タグ』→『レイアウト』→『タブ（切替ボタン）』→『4つ』を選択します。

すると、以下のように表示されます。

『タグ』→『レイアウト』→『タブ（切替ボタン）』→『4つ』

ここで、変更するコードについて解説しますね。

たとえば、当ブログの場合は以下のようになっています。

当ブログのコード

ボタンの色は、カラーコード一覧表から好きな色を選んで見てください。

次に、新規記事を表示させていきます。

_{『タグ』→『記事一覧/カード』→『カテゴリー一覧（スライドショー）』を挿入}

そして、以下のようにコードを変更します。

カテゴリーIDは『投稿』→『カテゴリー』で確認することができます。

同様にタブ2から4のコンテンツにも、上のコードを挿入してカテゴリーIDを設定しましょう。

タブ2から4のコンテンツにも上のコードを挿入

最後に、『タブ〇〇のコンテンツ』という記述を消去しておしまいです。

『タブ〇〇のコンテンツ』という記述を消去

最後に『固定ページを公開』すれば、トップページが今作成したものに変わるはずです。

最後にサイドバーエリアを設定して完成です！

ゆーさく

AFFINGER5カスタマイズ：サイドバーエリア編

最後にサイドバーコンテンツを作成していきます。

_{サイドバーを作成していく}

ここで作成していくのは以下の4つです。

順番に解説しますね。

その①：検索バーの設置

まずは、読者がサイト内で検索できるように検索窓を設置しましょう。

_{検索窓を設置する}

『外観』→『ウィジェット』をクリックして、左側にある『検索』を『サイドバートップ』にドラッグ＆ドロップすればOKです。

『検索』を『サイドバートップ』にドラッグ＆ドロップ

『タイトル』の部分を設定することで、検索窓の名前をつけることができます。

『タイトル』の部分を設定

最後に『完了』を押して設定完了です。

その②：サイト管理者情報

次に、サイトの管理者情報を設定していきます。

サイトの管理者情報を設定

step
1プロフィールの入力

まず『ユーザー』→『プロフィール』をクリックしてプロフィールを入力してください。

_{『ユーザー』→『プロフィール』をクリックしてプロフィールを入力}

step
2プロフィール画像の設定

『外観』→『カスタマイズ』→『オプションカラー』→『サイト管理者紹介』をクリックしてください。

_{『外観』→『カスタマイズ』→『オプションカラー』→『サイト管理者紹介』}

そして以下の項目を設定してみましょう。

こんな感じですね。

ボタンなどの設定もこの部分からできるので、プレビューを見ながらやってみてください。

最後に『公開』を押して保存しておきます。

step
3サイドバーに追加する

『外観』→『ウィジェット』をクリックし、『STTINGER管理者紹介』を先ほどの検索窓と同様に左から右にドラッグ＆ドロップしてください

_{『STTINGER管理者紹介』を左から右にドラッグ＆ドロップ}

以上で、サイト管理者情報の設置は完了です。

その③：サイドバーのカテゴリー設定

次に、サイドバーにカテゴリー一覧を表示させていきます。

_{サイドバーにカテゴリー一覧を表示}

まず『外観』→『ウィジェット』をクリックします。

そして『01_STINGERサイドバーメニュー』をクリックして、『サイドバートップ』にドラッグ＆ドロップしてください。

『01_STINGERサイドバーメニュー』をクリックして『サイドバートップ』にドロップ

次に『外観』→『カスタマイズ』→『メニューのカラー設定』→『サイドメニューウィジェット』をクリックします。

『メニューのカラー設定』→『サイドメニューウィジェット』

この部分で、カテゴリーメニューの色を変えることができます。

変更が終わったら、最後に『公開』を押して完了です。

その④：おすすめ記事の設定

最後に、おすすめ記事の設定方法を紹介します。

_{おすすめ記事の設定}

この部分には、トップページコンテンツに表示できなかった記事を表示しておきましょう。

まずは、『アフィンガー5管理』→『おすすめ記事一覧』→『おすすめ記事一覧の作成』をクリックします。

ここで以下の2つの項目を入力しましょう。

①はたとえば、『おすすめ記事』や『当ブログの人気記事』などにしておけばOKです。

②の記事IDは『投稿』→『記事一覧』の部分から確認することができます。

詳しい設定方法は以下の記事でも紹介しているので、参考にしてみてください。

関連記事【AFFINGER5】ヘッダーにカード型リンクを設置する方法【おすすめ記事の設定あり】

【おまけ】文字のフォントや細かい部分のカスタマイズ

ここまで、当ブログのトップページのカスタマイズ方法について解説しました。

AFFINGER5では、他にも細かい設定をすることができます。

上の項目は、当ブログでアフィンガーの初期設定として紹介している項目です。

実際に使用しているフォントやフォントのサイズについても解説しているので、細かい設定まで知りたい方は以下の記事を参考にしてみてください。

関連記事【最速で完了】AFFINGER5購入後の初期設定のやり方と手順【初心者でも簡単です】

まとめ：アフィンガーをカスタマイズして自分の好きなブログを作ろう！

今回は、YusakuBlog風のトップページを作る方法を解説しました。

また、当ブログのようなブログを作りたいと思った人は以下の記事も参考にしてみてください。

今回は以上です。