Affinger5でオシャレなトップページを作りたいけど、もっと簡単にかっこよくできないの？

アフィンガー5は、それほど気を使わなくても簡単にサイトの見た目をオシャレにできます。

通常の形式では、書いた記事が新たにページ上部に追加されていきます。しかし、ページに記事が追加されるだけでは、サイトに来てくれた方に対して効果的に情報を提供することができません。そこで、効果的な情報提供ができるようにトップページを作ってみたいと思います。

トップページの例

まずは、トップページを作成してみましょう。一度、以下のようなページが作成できるようになれば、あとは個人でどんどんカスタマイズし、満足度の高いサイトにしていけるかと思います。

トップページの作成手順

アフィンガー5でトップページを作成するのは、非常に簡単です。以下に手順を示します。

トップページ作成手順

トップページ用として固定ページを新規作成する。
AFFINGER5管理のトップページ設定に移動し、固定ページのIDを指定場所に入力する。

１．トップページ用として固定ページを新規作成する。

「WordPressサイドメニュー」＞「固定ページ」＞「新規追加」

固定ページを「下書き保存」あるいは「公開」し、記事IDを取得する

タイトルは、任意で「HOME」や「TOP」などにします。そして「下書き保存」あるいは「公開」をクリックすると、記事IDを取得することができます。

記事IDは、「固定ページ一覧」をクリックすると確認できます。上の写真でいうと、右側の「ID」の項目になります。後ほど、作成した固定ページのID番号が必要になりますので、メモしておきます。

２．AFFINGER5管理のトップページ設定に移動し、固定ページのIDを指定場所に入力する。

「WordPressサイドメニュー」＞「AFFINGER5 管理」＞「トップページ」

上の写真の赤枠内に、先ほど取得した固定ページのIDの番号を入力します。そして、「トップページの設定」下部にある「save」をクリックして終了になります。

トップページのカスタマイズ

上の写真のようなトップページは簡単にカスタマイズできます。どのようにカスタマイズするかは個人のセンスですが、サイトに来てくれたユーザーが利用しやすいように作りこむのがベストです。

トップページのカスタマイズ

おすすめ記事（ヘッダーカード）の作成
人気の記事を設置
記事のスライドショーの設置

※数字は上の写真内の番号に合わせています。

記事のスライドショーの設置

「タグ」＞「記事一覧／カード」＞「カテゴリ一覧（スライドショー）」

スライドショーのコード

st-catgroup cat="0" page="5" order="desc" orderby="id" child="on" slide="on" slides_to_show="3,3,1" slide_date="" slide_more="ReadMore" slide_center="on" fullsize_type=""

: 民法編

失踪宣告、不在者財産管理人

: 民法編

成年被後見人、被保佐人、被補助人

: 民法編

未成年者

: 会社法

組織再編

: 会社法

社債

スライドショーの設定

st-catgroup cat="0"

デフォルトの数字は「0」になっていて、ランダムに記事が表示されます。カテゴリーを指定したい場合は、カテゴリーIDの数字を入力します。カテゴリーIDは、「WordPressサイドメニュー」＞「投稿」＞「カテゴリー」で見ることができます。

page="5"

デフォルトは「5」ですが、ページ数を増やすこともできます。

slide="on"

デフォルトはスライドが「on」になっています。スライドをさせたくなければ「off」にします。

slides_to_show="3,3,1"

デフォルトは表示されるスライドの枚数が3枚です。5枚にしたい場合は、「5,3,1」にします。

slide_more="ReadMore"

デフォルトは「ReadMore」になっています。「もっと詳しく」など日本語表示も可能。

まとめ

サイトをオシャレにかっこよくするのは、自分の満足のためでもありますが、SEO対策的にもユーザビリティの向上につながります。いろいろ試行錯誤して、良いサイトを作っていける手掛かりになれば幸いです。

Affinger5でオシャレなトップページを作りたいけど、もっと簡単にかっこよくできないの？