この記事は「【AFFINGER6 デモサイト】おしゃれなブログを簡単に作る方法(固定ページだけでできる)「背景画像固定編」」という記事の続きにもなっている内容です。
そちらでは「背景画像を固定させ、横幅いっぱいに幅を広げる方法」を記載していますので、まだ見ていない方はそちらの記事も目を通して見てください。
この記事では「記事一覧編」となっており、トップページに表示させている記事一覧のカスタマイズについて説明しました。
PCで表示した場合のデザインとして紹介しています。
スマホではPCのように表示ができないためあらかじめご注意ください。
私はPCとスマホを分岐させる方法で別々のデザインを施しています。
分岐とスマホの表示に関しては別の記事へ記載しました。
☛AFFINGER6のトップページを簡単にデザイン(固定ページの編集サンプル)
PCトップページサンプル(AFFINGER6 デモサイト)
＼現在使用中のテーマ／
CSS(テーマファイルエディタ―)は一切触ることなく、固定ページでブロックエディターを使用するだけでできます。
完成すると下のようなイメージのトップページになります。
PCのTOPページサンプル動画
デモサイトとして紹介しているTOPページは、1カラムのデザインなのでサイドバーはありません。
AFFINGER6のデザインテンプレートもおしゃれですが、こちらも結構負けてないのではないでしょうか？
新着記事には自動スライドしてくれる横並びの新着記事を入れましたが、ここに関しては今回関係ないので説明は省きます。
トップページの記事一覧の表示について
下の画像は完成図です。
デモサイトの記事一覧はカテゴリーごとに表示させており、大きく目立たせたい記事と小さい記事一覧を表示させるようにしました。
一番大きく表示させている記事は、自動ではなく手動で表示させているため新しく更新した記事が表示させられるわけではありません。
本来は自動であればよかったのですが、固定ページでの編集ではできないようなので、単純に目立たせたい記事を表示させる形をとりました。
下の方の記事一覧は自動なので、更新する度に追加されていきます。
デモサイトのような記事一覧の作成方法
大きく表示させる記事の作り方
固定ページの編集画面で、表示させたい場所にブロックエディターを入れていきます。
☞固定ページ編集画面の任意の場所へ
- 左上の「＋」から「メディアとテキスト」を選択。
- メディアエリアに表示させたい記事のサムネイル画像を選ぶ。
- コンテンツエリアへ記事のタイトル(記事URL付きかは好みで)と説明文を記載。
- 「記事を見る」のボタンリンクは任意です。
設置ができたらサムネイル画像の大きさや「記事を見るボタン」のカスタマイズなど行います。
サムネイルサイズの変更
サムネイル画像の大きさは「クリック&ドラッグ」や「メディア幅」で設定可能です。
簡単に画像で紹介しておきます。
「記事を見る」ボタンのカスタマイズ
記事を見るボタンの設置は任意です。
ボタンの幅・角の丸み・中央寄せ・色など幅広く調整できるので、「記事を見る」というボタンを活用される場合は参考にしてみてください。
通常の記事一覧の載せ方
今回の場合は、大きく表示させた記事のすぐ下へカテゴリーごとの記事一覧を載せています。
AFFIGNER6の場合
☞固定ページ編集画面の任意の場所へ
- 左上の「＋」から「AFFINGER カテゴリ一覧」を選択。
- 右側の「全体設定」で表示させたいカテゴリIDを設定
- 右側の「全体設定」で表示させたいページの数を設定
個カテゴリを含むかどうかや、昇降順はお好みで決定してください。
カテゴリーIDの見つけ方
☞WordPress管理画面の「投稿」→「カテゴリ」
完成すると固定記事ページ内では下のような感じになっています。
クラシックを使用する方法(AFFINGER以外)
AFFINGER6以外の方法として、ブロックエディターの「クラシック」を使用するどのテーマでもできる方法を記載しておきます。
☞固定ページ編集画面の任意の場所で
- 左上の「＋」から「クラシック」を選択。
- 「タグ」→「記事一覧/カード」→「カテゴリー一覧」
- 表示されたクラシックバーを選択して「ブロックへ変換」
- 変換された「カテゴリー一覧」のブロックを選択し、全体設定でカテゴリIDとページを設定
固定ページをインデックスさせないようにする
固定ページを検索結果に出ないようにインデックスさせない設定をしておきます。
☞「固定ページ」→「新規追加」
- タイトルはわかりやすいものでOK
- 画像の①～③の手順で「indexの変更」から「noindex, nofollow」を選択しておく
トップページの表示を固定ページにする
固定ページを作成出来たらトップページに表示させます。
AFFINGER6の場合は「AFFINGER管理」からの設定できるので「方法①」を参考にしてみてください。
「方法①」の場合、WordPress管理画面の設定から行う「表示設定」は、最新投稿の方へチェックを入れておきましょう。
固定ページにする方法①
☞「AFFINGER管理」→「トップページ」
- 「トップページに固定記事を挿入」へ「記事ID」を入力
- 「トップページのレイアウト」で「1カラムにする」を選択
「記事ID」は「固定記事一覧ページ」にあります。
固定ページにする方法②
AFFINGER6以外の方は別の方法になると思いますが、テーマ関係なくWordPress自体で行える方法を記載しておきます。
☞「設定」→「表示設定」
- 「固定ページ」へチェック
- 「ホームページ」へTOPページ用に作成した固定ページを選択
以上がデモサイトのトップページのような記事一覧部分のカスタマイズ方法です。
理解できれば結構簡単にカスタマイズできるのですが、少々説明が長くなったためわかりにくいかもしれませんね。
一応参考用にもう一つ「固定ページ編集画面」を載せた記事もサンプル用として書いております。
イメージが良くわからない方は、一度見ていただくと雰囲気がつかみやすいかもしれないので参考になれば幸いです。
＼現在使用中のテーマ／