ブログ

【AFFINGER6】オール画像で解説!サイト型トップページの作り方

2023年1月22日

ブログのトップページをサイト型にしたいのですが、どうすればよいでしょうか?

AFFINGERを使えばおしゃれなサイト型トップページが作れます。

でも簡単ではないので、詳しく解説しますね。

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

わかりやすさ最重視でオール画像付きです!しかもスマホで作ってみました!

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

〈スマホでの表示〉

〈PCでの表示〉

スマホでの作り方を軸に解説していますが、PCでも作業内容は同じです。

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

サイト型トップページは固定ページで作成します。

作った固定ページをトップページに設定することでサイト型トップページの完成です。

早速つくっていきましょう!

まずはカード型記事を2列に並べる(PC表示のみ)アウトラインの作成からです。

左から順に①②③の手順

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

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

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

左から順に④⑤⑥の手順

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

クラシックは、「テキスト」の欄にあります。

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

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

左から順に⑦⑧⑨の手順

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

PCの場合はマウスオーバーで良いですが、スマホの場合は長押しになります。

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

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

これでカード型記事を2列に並べられるようになりました。

カード型記事を設置する

続いて作ったアウトラインに記事を設置していきます。

まずは下画像の赤枠のような、カード型記事の上部に表示させるタイトルカードの設定です。

左から順に⑩⑪⑫の手順

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

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

黄色い背景にコードが生成されます。

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

今回の例では赤太字のみ編集すればOKです!

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の管理画面に移り、「外観」→「ウィジェット」の順にタップします。

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

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

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

左から順に㊲㊳㊴の手順

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

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

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

左から順に㊵㊶㊷の手順

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

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

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

左から順に㊸㊹㊺の手順

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

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

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

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

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

左から順に㊻㊼㊽の手順

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

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

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

記事のランキングはGoogleアナリティクスなどで確認して指定していきましょう!

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

ヘッダーカードを作る

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

「ヘッダーカード」と言います。

ヘッダーカードを作る作業は個別に記事にしているので、以下をご参照ください。

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

続きを見る

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

最後の作業です。

トップにする固定ページが出来上がったので、最後にこの固定ページをトップページとして設定します。

左から順に㊾㊿(51)の手順

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

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

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

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

お疲れさまでした!これであなたのブログもサイト型トップページにできました。

必要に応じて、掲載する記事を増やしましょう掲載する記事を増やしたいときは手順⑭を繰り返せば、その数だけカード型記事を増やせます。

  • この記事を書いた人

のば

配当金累計50万円突破|ブログは単年黒字化突入|外資系フルリモートワーカー|高配当株投資家|平成生まれが「株式」「配当」「ブログ」をキーワードにセミリタイア目指しています。

-ブログ