Affinger5を使っています。トップページのカテゴリ別記事をシンプルにカスタマイズしたいんだけど、どんな感じで作業していけばいいか知りたいです。
僕が作成したトップページはどうかな？結構シンプルにしてみたよ。
Affinger5を使っている人がたくさんいる中で、それぞれトップページをおしゃれにカスタマイズしていたり、個性のあるページに作り込まれていてすごく見た目がよかったりします。
トップページを見やすくすることによって、読者満足度も上がります。
僕みたいなカテゴリ別の記事にカスタマイズしたいと思った人は、画像付きで分かりやすく解説していくので参考にしてみて下さい。
出来上がりのイメージは下図の通りです。（Fujisanblogのトップページ）
こんな感じで、番号順に作っていきます。
なお、コードはこんな感じです。（後で詳しく説明します。）
本記事の内容
①：タブのカスタマイズ
②：カテゴリーID別のカスタマイズ
③：記事一覧ボタンのカスタマイズ
それでは、いきましょう。
目次
トップページのカテゴリ別記事をシンプルに魅せるカスタマイズ
僕のサイトのカテゴリは「wordpress・Affiliate・life・blog」の4つをカテゴリにしてます。
なので、タブを4つ作っているけど、タブは2つでも3つでも応用できるので、自分のカテゴリの数を選びましょう。
①：タブのカスタマイズ
トップページは固定ページでつくっていきます。
先に、『固定ページ』 → 『新規追加』で新しい固定ページを開いておきましょう。
「カテゴリ別記事」の文字のところは、見出しの3か4あたりをお好みで選んで作成できます。
ちなみに僕は見出し4を使ってますが、ここは自分の好きな見た目になるかんじでOKです。
step
1タブを4つ作る
『タグ』 → 『レイアウト』 → 『タブ（切替ボタン）』→ 『4つ』と選択して作ります。
カテゴリが２つの人は2つ、３つある人は３つを選んでください。
できあがりのコードがこちらです。
step
2自分好みにカスタマイズしよう
カテゴリ名や背景色、文字の色を変えたい場合は赤い文字のところを変更してください。
[st-input-tab fontawesome="" text="カテゴリ名" bgcolor="背景色" bordercolor="枠線の色" color="文字の色" fontweight="" checked="checked"]
カテゴリ名は、ご自身のブログで書いているカテゴリ名を入力してみましょう。
タブ１の編集が終わったら残りのタブも同様に、自分好みに変更してみてください。
色の決め方がわからない場合は原色大辞典さんを参考にしてみるといいですよ。
②：カテゴリーID別のカスタマイズ
続いては、カテゴリ別の記事を配置していきます。
step
1カテゴリIDを控えよう
カテゴリを配置するために必要なカテゴリのIDを控えます。
カテゴリIDの調べ方は次の通り。
『ダッシュボード』 → 『投稿』 → 『カテゴリー』
カテゴリ名の横の数字がIDなので、トップページに使うカテゴリIDを、紙などに控えておきましょう。
step
2カテゴリのショートコードを配置しよう
①で作ったコードの中にある「タブ１のコンテンツ」の文字をを削除して、そこに次の手順でショートコードを入れていきます。
『タグ』 → 『記事一覧』 → 『カテゴリ一覧』
できあがりのコードがこちらです。
step
3カテゴリIDと表示したいページ数を入力しよう
さきほど控えておいたカテゴリIDと表示したいページ数を入力しましょう。
[st-catgroup cat="カテゴリID" page="表示したいページ数" order="desc" orderby="id" child="on" slide="off" slides_to_show="3,3,2" slide_date="" slide_more="ReadMore" slide_center="off"]
上のコードが長いと感じた方は、下のコードのように短く編集しても問題なく表示されます。
[st-catgroup cat="カテゴリID" page="表示したいページ数"]
後は、同じように「タブ2のコンテンツ、タブ3・・・、タブ4・・・」を削除しながらショートコードを入れていきます。
随時プレビューで確認しながら作業をしていくと、間違えることなく編集できますよ。
③：記事一覧ボタンのカスタマイズ
表示ページの一番下に「記事一覧」のボタンをいれていきます。
これを入れることにより、記事が多くても全部表示されるようになるので、読者さんの回遊率が上がりそうですね。
step
1ボタンのショートコードを入力しよう
②で作ったカテゴリのショートコードの下に、次の手順でボタンを配置していきます。
『タグ』 → 『カスタムボタン』 → 『ノーマル』 → 『基本』
挿入後のコードは次のとおり。
step
2ボタンをカスタマイズしてみよう
ボタンはデフォルトのままでもいいのですが、なんかしっくりこなかったので、ちょこっとだけカスタマイズしています。
[st-mybutton class="" url="カテゴリのURL" title="ボタンに表示する名前" rel="" fontawesome="" target="" color="文字の色" bgcolor="背景色" bgcolor_top="" bordercolor="#CCC" borderwidth="3" borderradius="ボタンの丸みの調節" fontsize="文字の大きさ" fontweight="" width="ボタンの横幅" fontawesome_after="" shadow="" ref=""]
「カテゴリのURL」の確認方法は、ご自身のブログのホーム画面にいき、カテゴリをクリックすると検索バーに表示されます。
次のとおりです。
表示されたURLをコピーして、ショートコードの中の「カテゴリのURL」のところに貼り付ければOKです。
step
3作成した固定ページを、トップページに設定しよう
作成した固定ページをトップページに設定する手順は以下の通りです。
『ダッシュボード』 → 『外観』 → 『カスタマイズ』 → 『ホームページ設定』
①『ホームページ表示』の所を「固定ページ」を選択します。
②『ホームページ』の所にさきほど作った固定ページを選択して、最後に「公開」を押して完了です。
以上が、ぼくがカスタマイズしたシンプルなトップページの作り方です。背景色などは、自分好みの色を選択してみるのもありですね。
おまけ：記事の説明文をなくして、タイトル表示だけにする方法
トップページの記事の説明文の見た目がごちゃごちゃしていて、スッキリしたい場合は、タイトルだけの見た目にすることもできます。
こんな感じです。
説明文がなくなって、見た目がスッキリしていますね。
『ダッシュボード』 → 『AFFINGER5管理』 → 『デザイン』 → 『抜粋設定』と進んで行きます。
『PC閲覧時も記事一覧（トップ・アーカイブ・関連記事）の抜粋を非表示にする』の箇所にチェックをして、最後に『SAVE』を押して完了です。
見た目をスッキリさせたい場合は、このように設定してみてもいいですね。
まとめ：アフィンガーのトップページをシンプルに魅せるカスタマイズ
アフィンガー5のトップページを、シンプルに魅せるカスタマイズの方法を解説してきました。
アフィンガー5を使っている人も多く、みんなオリジナルのトップページを作っていて個性豊かなサイトが多いですよね。
本記事のタブのカスタマイズは、シンプル・かつおしゃれな感じがして見た目もいい感じになってます。
これからトップページをカスタマイズしようとしていてどんな感じにしようか考えている人は、参考にしてみてはどうでしょうか？
最後までお読みくださりありがとうございます。
関連記事：CocoonからAffinger5に移行した直後に変わっていたこと【テーマ】
