アフィンガーでおしゃれなトップページを作る｜ブロックエディタでの作り方を解説

AFFINGER6（アフィンガー6）を購入したかたは、せっかくの有料テーマですので、それを生かした素敵なトップページをつくりたいと考えていると思います。

クラシックエディターを使った方法が上位表示されていますが、当ブログでは、ブロックエディターのみを用いたアフィンガーでのトップページの作り方をご紹介していきます。

現在のトップページは、すべてブロックエディターで作り上げました。ご参照ください。

前置きはそこそこに、早速作っていきましょう！

このブログは「AFFINGER」を使用しています

アフィンガーでトップページを作る　概要

• ヘッダーエリアを作る→こちらの記事でご紹介
• ヘッダーカードを作る→こちらの記事でご紹介
• おすすめ記事をスライドショーで表示させる→当記事
• おすすめ記事を一覧で表示させる→当記事

準備：トップページにする固定ページを作成する

固定ページを作成する

まずは、トップページで表示させる固定ページを作ります。

ダッシュボードの「固定ページ」＞「新規作成」

「タイトル」はトップページだと分かるもので任意で入力してください。「トップページ」などと入力したら分かりやすいかと思います。本文はまだ未記入のままで大丈夫です。

タイトル入力しましたら、右上の「公開」をクリックします。

固定ページをトップページに反映させる

作成した固定ページを、トップページに反映できるように設定していきます。

ダッシュボードの「外観」＞「カスタマイズ」＞「ホームページ設定」を開きます。

• 「ホームページの表示」を「固定ページ」にチェックを入れる。
• 「ホームページ」では、先ほど作った固定ページを選択します。

設定しましたら、「公開」を忘れずにクリックして保存しましょう。

以上で準備は完了です。

おすすめ記事をスライドショーで表示させる

ここからは作成したトップページ用の固定ページの本文にて、作業していきます。すべてブロックエディターでの作業となります。

完成形は以下のようになります。

まずは見出しを入力しましょう。「最新記事」「生活」など、表示させるカテゴリーに合ったタイトルをつけます。

ここの見出しはh３で作成していきます。

次に見出しの下に段落(カーソル)を置き、固定ページの左上の＋ボタン「ブロック挿入ツール」を開き「STINGER カテゴリー一覧」をクリックしてください。

STINGER カテゴリー一覧が挿入されます。

右側のツールで、スライドショーをONにしてください。
続けて、表示させるカテゴリーIDや、表示させるページ数を変更していきます。

カテゴリーID「０」の場合は、最新記事が表示されます。

カテゴリーIDは、ダッシュボードの「投稿」＞「カテゴリー」で確認できます。

この見出しとスライドショーは、いくつ置いても大丈夫です。複数入れたい方は、作業を繰り返してください。

ここまで完了しましたら、プレビューで確認してみてください。

おすすめ記事を一覧で表示させる

次に、一覧として記事を２カラムに分けて表示させる方法をお伝えします。

以下が完成形です。

ブロック挿入ツールより、「カラム」を選択し「50:50」をクリックしてください。

まずはこの中に、バーナー風ボックスを置いていきます。

ブロック挿入ツールより「STINGER　バーナー風ボックス」を選択します。

右のツールでタイトルやアイコンを任意のものに設定します。タイトルは「おすすめ記事」「人気記事」「旅行」などとすると分かりやすいですね。

背景の画像は、右のツールの「画像設定」から行います。「画像URL」で背景にしたい画像を指定します。

画像URLは、ダッシュボードの「メディア」＞「ライブラリ」のアップロードした画像から確認ができます。

画像をぼかしたり、暗くしたり、また文字色変更もできますので、プレビューで確認しながらお好みで設定をしてみてください。

ボックス風バーナーが完成しましたら、ブロック(段落)を挿入してください。ここからは投稿記事を設定していきます。

ブロック挿入ツールより「STINGER 記事一覧(ID)」を選択してください。

右のツールから、置きたい投稿記事のIDを設定してください。

投稿記事IDはダッシュボードの「投稿」＞「投稿一覧」から確認できます。

置きたい記事は任意ですので、いくつ置いても大丈夫です。お好きなだけ追加してください。

最後はプレビューで確認してから、大丈夫でしたら公開をしてください。

アフィンガーでトップページを作る　まとめ

クラシックエディターでは、コード入力がややこしくて面倒ですが、今はブロックエディターのみで感覚的におしゃれなトップページを作ることができます。

今回紹介したのはごく一部の機能ですので、もっといい感じのトップページができるよという方は、是非教えてください！