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

AFFINGER5

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

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

悩んでいる人

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

この記事を書いている人

Twitter(@you_blog2912)を運営中

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

正直、アフィンガーは設定項目が多く、最初のうちは自分が思ったようにカスタマイズできないことが多いです。

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

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

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

ゆーさく

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

\ 当サイトで使用中WordPressテーマ /
yusakublog限定特典付きアフィンガー5(AFFINGER5)5,000円相当プラグイン&当サイト限定特典付き

関連記事【限定特典5つ】AFFINGER5の評判を徹底解説【押さえておくポイント3つ】

AFFINGER5トップページの完成形

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

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

AFFINGER5のカスタマイズ

  1. ヘッダーエリア編
  2. トップページコンテンツエリア編
  3. サイドバー編

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

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

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

ヘッダーエリアの設定
その①:インフォメーションバー
その②:ヘッダーメニュー
その③:ヘッダーカード

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

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

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

アフィンガー5(AFFINGER5)でヘッダー上にインフォメーションバーを作る方法

インフォーメーションバー

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

  • 収益記事への誘導
  • noteやインスタなどに誘導
  • 商品購入画面に誘導

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

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

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

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

手順は以下の3つです。

ヘッダーメニューを作る手順

  1. カテゴリーを作る
  2. ヘッダーメニューを設定
  3. メニューをセンター寄せにする

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

step
1
カテゴリーを作る

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

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

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

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

・カテゴリー名:AFFINGER5
・スラッグ名:affinger5

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

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

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

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

メニュー名とメニュー設定
  • メニュー名:なんでもOK
  • メニュー設定:ヘッダー用メニューと横列,サイド用メニュー3つにチェック

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

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

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

このままだと、タイトルとメニューが左によった状態になっているので2つをセンターに寄せます。

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

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

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

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

このとき、1度保存ボタンを押してからではないと『ヘッダーエリアをセンタリング』にチェックできないので注意してください。

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

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

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

その③:ヘッダーカード

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

ヘッダーカードを表示

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

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

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

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

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

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

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

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

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

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

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

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

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

設定項目
  • ホームページの表示:固定ページ
  • ホームページ:いま作成したページを選択

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

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

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

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

コンテンツエリアの作成
その①:スライドショー
その②:おすすめ記事
その③:新着記事

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

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

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

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

見出しの設定

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

今回は「おすすめ記事」「各カテゴリーの新着記事」も設定するので、先に見出しを作っておきましょう。

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

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

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

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

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

画面右上のプレビューで見てみると、しっかりスライドショーが表示されているかと思います。

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

スライドショーのコード設定
  • st-catgroup cat="カテゴリID指定"
  • page="表示する記事数"
  • slide="スライドショーのon,off"
  • slides_to_show="列数の指定"
  • slide_more="続きを読む" 

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

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

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

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

おすすめ記事の設定

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

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

  • フルサイズにする*
  • サムネイル画像を大きくする(タブレット以上は1.5倍)
  • スマホ(599px以下)でもサムネイル画像を大きくする

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

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

『タグ』→『レイアウト』→『PCとTab(959px以上)』→『左右50%』

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

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

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

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

  • id="ここに記事IDを入力"
  • pc_height="カードの縦の長さ"
  • readmore="続きを見るの表示の有無"

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

表示したい記事IDを確認

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

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

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

同じ要領でコードを挿入

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

右列にもコードを挿入

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

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

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

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

各カテゴリーの新着記事

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

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

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

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

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

変更するコードと意味
  • text="ボタンの名前"
  • bgcolor="ボタンの色"
  • bordercolor="枠線の色"
  • color="文字の色"

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

当ブログのコード

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

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

「タブ1のコンテンツ」下に、『タグ』→『記事一覧/カード』→『カテゴリー一覧(スライドショー)』を挿入してください。

『タグ』→『記事一覧/カード』→『カテゴリー一覧(スライドショー)』を挿入

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

コードを変更する場所
  • cat="表示したいカテゴリーID"
  • page="表示したい記事数"
  • slide="off"にする

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

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

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

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

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

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

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

ゆーさく

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

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

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

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

サイドバーエリアのカスタマイズ

  1. 検索バー
  2. サイト管理者情報
  3. サイドバーのカテゴリー
  4. おすすめ記事

順番に解説しますね。

その①:検索バーの設置

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

検索窓を設置する

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

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

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

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

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

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

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

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

step
1
プロフィールの入力

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

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

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

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

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

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

設定する項目
  • プロフィールカードに変更:チェック
  • アバター画像:アイコン画像を設定

こんな感じですね。

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

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

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

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

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

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

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

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

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

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

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

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

①の「メニューの設定」で『サイドバーメニュー』の部分にチェックを入れてあるので、すでにサイドバーにカテゴリーが表示されているはずです。


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

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

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

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

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

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

おすすめ記事の設定

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

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

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

2つの項目を入力
その①:おすすめ記事一覧に表示する文字:何でもOK
その②:任意の人気記事の指定:記事のIDを入力

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

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

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

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

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

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

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

AFFINGER5でできる細かい設定

  1. パーマリンク設定
  2. 一般設定
  3. Classic Editorのインストール
  4. テーマ管理の保存
  5. サイトカラー設定
  6. デザイン設定
  7. 投稿・固定記事設定
  8. SNS設定
  9. Google設定
  10. 会話アイコン設定
  11. メニュー設定
  12. 見出し設定
  13. ヘッダー画像設定

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

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

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

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

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

手順やカスタマイズする項目が多いので、少し時間がかかるかもしれませんが、サイトのトップページはブログの顔になる部分なのでしっかり整えておきましょう。

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

今回は以上です。

関連記事
【限定特典5つ】AFFINGER5の評判を徹底解説【後悔しないために押さえておくポイント3つ】

-AFFINGER5