AFFINGER5でオシャレなトップページを作る方法

AFFINGER5（アフィンガー5）をご使用のみなさん、トップページのデザインを適当に済ませていませんか？

トップページはサイトの入口です。

AFFINGER5（アフィンガー5）の便利機能を使って、最高にオシャレなトップページを作っちゃいましょう！

記事のテーマ

AFFINGER5（アフィンガー5）を使った

おすすめヘッダーカードの作り方
カテゴリ一覧スライドショー(新着記事)の作り方
レイアウトを用いたバナー風ボックスの設置手順
トップページのカスタマイズ

当サイトではウェブサイトやブログに関する記事を毎日投稿しています。
他の記事も合わせて読んでいただけると嬉しいです。

＼今なら当サイト限定の豪華特典付き／

AFFINGER5の詳細を見る

AFFINGER5（アフィンガー5）でのトップページの完成形
- シンプルかつオシャレに
AFFINGER5（アフィンガー5）を使ってオシャレなトップページを作ろう
まとめ：AFFINGER5でトップページをカスタマイズ！

AFFINGER5（アフィンガー5）でのトップページの完成形

今回作成するトップページの完成形は以下のようなイメージです。

トップページの完成形

主な構成としては上から順に

おすすめヘッダーカード
カテゴリ一覧スライドショー
バナー風ボックス（ブログカード付き）

となっています。

右側には全ページ共通のサイドバーも設置してあります。

どれもAFFINGER5に標準で備わっているのでカンタンに設置できます。

シンプルかつオシャレに

トップページを制作する上で気をつけなければならないのは「見やすくて分かりやすい」ことです。

全部見てほしいからと言って情報を詰め込みすぎると、ユーザーは見る気を無くして離脱してしまいます。

ユーザーに「このトップページはオシャレでカッコいいな」と思ってもらうためには、必要な情報をシンプルなデザインで統一しましょう。

AFFINGER5（アフィンガー5）を使ってオシャレなトップページを作ろう

それではAFFINGER5を使ってトップページを作る手順をご紹介します！

0. 固定ページを作成

まず大前提としてトップページにする固定ページを作ります。

AFFINGERではデフォルトのトップページは親テーマのファイルにあるため編集できるように固定ページにセットする必要があります。

固定ページを新規作成して、トップページと分かるタイトルを設定しましょう。

次に、新しく作った固定ページをトップページに設定する必要があります。

トップページ設定

WordPress管理画面から「外観」→「カスタマイズ」→「ホームページ設定」に移動しましょう。

「ホームページ設定」に「ホームページ」という項目がありますので、メニューから先程追加したトップページ（固定ページ）のタイトルを選択して変更を保存しましょう。

この設定で、固定ページにトップページの項目が追加され、カンタンに編集できるようになります。

1. おすすめヘッダーカードの作成

おすすめヘッダーカード

まずはトップページ完成図の一番上の部分の「おすすめヘッダーカード」を作っていきます。

設置する前に、画像や文言の設定をします。

2. 記事一覧スライドショー(新着記事)の設置

スライドショー完成図

次にトップページ完成図の中央部分の記事一覧スライドショーを作っていきます。

記事一覧スライドショーは固定ページのエディタから、AFFINGER5のタグを使ってカンタンに設置できます。

記事一覧スライドショー(新着記事)の設置

「タグ」→「記事一覧/カード」→「カテゴリ一覧（スライドショー）」を選択します。

すると以下のようなコードが出力されます。

 カテゴリ一覧のコード
[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="カテゴリID"
page="表示する記事数"
orderby="id"
child="子カテゴリー表示のon,off"
slide="スライドショーのon,off"
slides_to_show="列数"
slide_more="「続きを読む」のon,off"

それぞれお好みに合わせて設定してみてください。

カテゴリIDが0の場合、新着記事が表示されますのでオススメです。

3. レイアウトを用いたバナー風ボックスの設置

バナー風ボックス完成図

3つ目はトップページ一番下部分の「レイアウトを用いたバナー風ボックス」を設置していきます。

まずはエディタ画面から、タグ機能を使って左右に二分割するコードを書きます。

二分割コード

「タグ」→「レイアウト」→「全サイズ」→「左右50%」を選択します。

二分割エディタ

これで左右に二分割するコードが反映されました。

この黄色い枠と青い枠それぞれに、タグ機能を使ってコードを書いていきます。

まずはバナー風ボックスを設置していきます。

バナー風ボックス設置上画像のように「ボックスデザイン」→「バナー風ボックス」→「基本」を選択します。

バナー風ボックスコード画面

すると上画面のように、バナー風ボックスのコードが入力されます。

 バナー風ボックスのコード
[st-flexbox url="" rel="nofollow" target="" fontawesome="" title="タイトル" width="" height="" color="#fff" fontsize="200" radius="0" shadow="#424242" bordercolor="#ccc" borderwidth="1" bgcolor="#ccc" backgroud_image="" blur="on" left="" margin_bottom="0"]
[/st-flexbox]

コードの説明は以下のようになります。

st-flexbox url="リンク先URL（設置しなくても大丈夫）"
title="タイトル"
backgroud_image="背景画像のURL"

画像のURLはライブラリから確認できます。

画像URL

ライブラリで写真を選択すると右側に詳細が表示されます。

詳細の下の方にある「リンクをコピー」に書かれている文字が画像URLです。

4. バナー風ボックス下のブログカード設置

バナー風ボックス完成図

次に、バナー風ボックスの下のブログカードを設置する手順をご説明します。

コード配置図

ちなみにコードを書く配置としてはこのようなイメージになります。

では図のように、バナー風ボックスのコードの下にブログカードのコードを書いていきます。

こちらもタグ機能を使います。

ブログカードコード

タグから「記事一覧/ショートコード」→「ブログカード」→「参考」を選択するとブログカードのコードが入力されます。

 html
[st-card myclass="st-no-shadow" id="" label="参考" pc_height="" name="" bgcolor="#cccccc" color="#ffffff" fontawesome="fa-file-text-o" readmore="on" thumbnail="on" type="text"]

コードの説明は以下の通りです。