【AFFINGER6】オール画像で解説！サイト型トップページへのカスタマイズ方法

今回の記事ではAFFINGERでサイト型トップページを作る手順を解説しています。

この記事を読めば、あなたのブログも次のようなサイト型のトップページにできます。

〈スマホでの表示〉

〈PCでの表示〉

カード型記事のアウトラインを作る

①WordPressの管理画面にアクセスし、「固定ページ」→「新規追加」の順にタップします。

②固定ページの作成画面に移ったら、右の「＋」ボタンをタップします。

③ブロック追加の画面に遷移するので、「すべて表示」をタップします。

④「クラシック」のアイコンを探してタップします。

⑤クラシックブロックが表示されるので、上の画像中央で赤枠に囲われたアイコンをタップします。

⑥選択項目が増えるので、その中から「タブ」をタップします。

⑦「タブ」の配下の選択肢が出てくるので、「レイアウト」を長押しします。

⑧さらに配下の選択肢が出るので、「PCとTab（959px以上）」を長押しして、表示される選択肢から「左右50%」をタップします。

⑨黄色の背景と水色の背景が１つずつ表示されるので、どちらもデフォルトで入力されている文字を削除します。

カード型記事を設置する

⑩黄色い背景を選択した状態で「タブ」をタップして、配下に表示される「ボックスデザイン」を長押しします。

⑪さらに増える選択肢の中から「バナー風ボックス」をタップします。

⑫右側（水色背景）でも同じ作業をして、コードを生成します。生成したコードにはそれぞれ、次の内容を記載します。

url	タップしたときの遷移（リンク）先URLを入力します 今回の例ではカテゴリページへ遷移するよう設定しています。
rel	今回の例ではデフォルトの「nofollow」とします。
target	今回の例ではデフォルトの空欄とします。
webicon	今回の例ではデフォルトの空欄とします。
title	表示させるタイトルを入力します。 今回の例では「ブログ運営」「お勧めプラグイン」と入力しています。
width	タイトルカードの幅を指定します。 今回の例ではデフォルトの空欄とします。
height	タイトルカードの高さを指定します。 今回の例では「60」としています。
color	タイトルの文字色を指定します。 今回の例ではデフォルトの白（#fff）としています。
fontsize	タイトルの文字サイズを指定します。 今回の例では「150」としています。
radius	タイトルカードの角を丸くしたい場合に指定します。 今回の例ではデフォルトの「0」としています。
shadow	タイトルカードの文字の影を指定します。 今回の例ではデフォルトの「#424242」としています。
bordercolor	タイトルカードの枠線の色を指定します。 今回の例ではデフォルトのグレー（#ccc）と入力しています。
borderwidth	タイトルカードの枠線の幅を指定します。 今回の例ではデフォルトの「1」としています。
backgroud_image	カード型記事の背景画像を指定します。 背景画像のURLを入力します。背景画像のURLの取得方法はこちら。
blur	背景画像をぼかすかどうかを指定します。 ぼかす場合は「on」と入力します。今回の例ではデフォルトの「on」のままとします。
left	タイトルの位置を指定します。 今回の例では中央揃えにしたいのでデフォルトの空欄にします。
margin_bottom	タイトルカードの下にどれだけ空間を入れるかを指定します。 今回の例ではデフォルトの「0」とします。
myclass	アニメーションクラスを指定します。 今回の例ではデフォルトの空欄とします。

⑬先ほど生成したコードの下にカーソルを移動させた状態で、上画像左の赤枠で囲われた「カード」をタップします。

⑭カードのコードが生成されます。その中の「id」にトップページで表示したい記事の記事IDを記載します。

水色の背景でも同じようにカードを選択してコードを作成し、IDを設定をします。

⑮トップページに遷移して、カード型の記事が表示されていることを確認します。

カード型記事のレイアウトを整える

PCでトップページを表示すると、カードに記事内容の抜粋が表示されているのがわかります（下画像左参照）。

⑯PCで記事を見ると、記事の抜粋が表示されています。今回はこれを消します。

⑰まずAFFINGER管理画面に移り、上中央の画像の赤枠で囲われたアイコンをタップします。

⑱「抜粋設定」の項目にある『PC閲覧時の「ブログカード」及びコンテンツ内の「おすすめ記事」の抜粋を非表示にする』にチェックを入れて保存します。

次にカード型記事一覧に見出しをつけて整理します。

⑲PC閲覧時の抜粋が消えたことを確認します。

⑳編集画面に戻り、バナー風ボックスの上に見出しを追加します。

㉑見出しが表示されているのを確認します。

新着記事（スライドショー）を作成する

次に数秒ごとに自動的にスライドしていく新着記事のスライドショーを作成します。

㉒新着記事一覧の見出しを作成します。

㉓「手順④」のようにクラシックブロックを作成し、「タブ」をタップします。

㉔タブ配下の選択肢が表示されるので「記事一覧/カード」を長押しします。

㉕さらに配下の選択肢が表示されるので「カテゴリ一覧（スライドショー）」をタップします。

㉖コードが生成されるのを確認します。

㉗生成されたコードを、下表を参考に編集します。

cat	カテゴリIDを指定します。 今回の例ではカテゴリを指定したくないので「0」にしています。
page	スライドショーに入れる記事数を指定します。 今回の例では「5」にしています。
order	記事の並び順を指定します。 今回の例では降順にするので「desc」にしています。昇順なら「asc」です。
orderby	記事を何を基準に並べるかを指定します。 今回は記事の更新日を基準にするので「modified」にしています。
child	子カテゴリの表示有無を指定します。 今回の例では「on」にしています。
slide	スライドショーにするかどうかを指定します。 今回の例ではスライドショーにするので「on」にしています。
slide_to_show	画面サイズごとに一画面に表示させる記事数を指定します。 今回の例では「3,3,1」にしています。
slide_date	投稿日をスライドショーに表示するかを指定します。 今回の例では空欄にしています。
slide_more	「続きを見る」ボタンを表示するかを指定します。 今回の例ではデフォルトのまま「ReadMore」としていますが、スライドショーの場合は表示されませんので空欄でも構いません。
slide_center	スマホ表示で次のスライドの一部を見えるようにするかを指定します。 今回の例では「on」にしています。
fullsyze_type	スライドショーに記事のタイトルを表示するかを指定します。 今回の例ではタイトルを表示させたいので「text」にしています。

㉘プレビューで新着記事一覧が表示されているのを確認します。

㉙PCでの表示も確認しておきます。

㉚次にページ下部にある「更新日」を削除します。

㉛AFFINGER管理画面に移り、上画像左の赤枠で囲われたアイコンをタップします。

㉜「固定ページ」の欄にある『固定ページに「投稿日」「更新日」を表示しない』にチェックを入れて設定を保存します。

㉝先ほどのプレビュー画面に戻り、更新日が消えたことを確認します。

サイドバーを整える

次はPC表示で右側に表示されるサイドバーを整えていきます。

㉞WordPressの管理画面に移り、「外観」→「ウィジェット」の順にタップします。

㉟ウィジェットの編集ページに移るので、下にスクロールしていき、「サイドバートップ」を見つけます。

そこに「ブロック」と表示されているものが３つあるので、それぞれタップして、「削除する」をタップします。

㊱さらにその下の「サイドバーウィジェット」でも「ブロック」が２つあるので同様に削除します。

㊲同じウィジェット編集ページで上にスクロールして「検索」を見つけ、タップします。

㊳選択肢が表示されるので「サイドバーウィジェット」を選択し、「ウィジェットを追加」をタップします。

㊴同じくウィジェットの編集ページにある「11_プロフィールカード」をタップします。

㊵「手順㊳」と同様にサイドバーウィジェットに追加します。

㊶プレビューを表示して、PC表示で検索窓とプロフィールカードが作成されたことを確認します。

㊷次に検索窓の上に表示されている記事一覧を削除していきます。

㊸AFFINGER管理画面に移って、上画像左の赤枠で囲われたアイコンをタップします。

㊹「記事一覧」の項目にある「下層ページのサイドバーの新着記事一覧を非表示にする」にチェックを入れて保存します。

㊺トップページで記事一覧が削除されたことを確認します。

よく読まれている記事ランキングを作成する

PC表示のサイドバーを整理したことで少し寂しくなったので、よく読まれている記事ランキングを作成します。

㊻AFFINGER管理画面に移り、上画像左の赤枠で囲われたアイコンをタップします。

㊼「おすすめ記事一覧」の項目にある、次の３つをそれぞれ編集します。

おすすめ記事一覧に表示する文字	「よく読まれている記事」と入力します。
任意の人気記事を指定（投稿又は固定記事ID）	ランキングに表示したい記事のIDを入力します。
サイドのスクロールに表示にする（抜粋非表示）	チェックを入れます。

㊽トップページに「よく読まれている記事」がランキング表示されているのを確認します。

ヘッダーカードを作る

次は下の画像赤枠で囲われた部分の作成です。

【AFFINGER6】スマホでできる！ヘッダーカードの作り方

続きを見る

作成した固定ページをトップページに設定する

最後の作業です。

㊾AFFINGER管理画面で「外観」→「カスタマイズ」の順にタップします。

㊿ホームページ設定をタップします。

(51)「ホームページの表示」の欄は「固定ページ」を選択し、「ホームページ」で先ほど作った固定ページを選んで右上の「公開」をタップします。

あなたのブログのトップページが下の画像のようなサイト型になれば完成です。