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に移行した直後に変わっていたこと【テーマ】
