この記事は
【AFFINGER6】サイトデザイン完全マニュアル【ブロよび。風】
のおすすめ記事編になります。
全ての工程を順番に進めることで「ブロよび。風」のデザインが完全再現できるようになっています。
前回の作業が済んでいない方は、こちらの記事に戻って順番に作業を進めてくださいね。
参考
＞＞ヘッダー下にスライドショーを設置する方法【ブロよび。風カスタマイズ】
こんな人におすすめ
- AFFINGER6でブログを運営している
- シンプルでおしゃれなデザインにしたい
- あれこれ考えるよりも手順通りに操作して完成を目指したい
それでは早速、トップページにおすすめ記事（よく読まれている記事）を設置する方法を一緒にみていきましょう。
完成イメージは以下の通りです。
こんなデザインにしたいな、と思ってくれた方は手順通りに進めてみてください。
トップページにおすすめ記事を設置してみよう
おすすめ記事は、AFFINGER管理の機能を使うと簡単に設置できます。
流れは以下の通りです。
- 表示させたいテキストを決める（人気記事、よく読まれている記事、など）
- 表示させたい記事を選ぶ
- 表示させたい場所を決める
それではひとつずつみていきましょう。
表示させたいテキストを決めよう
それではまずはAFFINGER管理の画面から作業を進めていきます。
手順
- 「WordPress管理画面」→「AFFINGER管理」→「ヘッダー下/おすすめ」→「おすすめ記事一覧」
- 「おすすめ記事一覧に表示する文字」に「よく読まれている記事」と入力
参考
入力する文字は「人気記事」や「おすすめ記事」などでもOKです。
表示させたい記事を選ぼう
続いておすすめ記事に表示する記事を選んでいきます。表示する記事を指定するには記事IDが必要になります。
手順
- 「WordPress管理画面」→「投稿」→「投稿一覧」
- 表示させたい記事の「ID」を確認する
IDをメモしておくと作業がしやすいです
AFFINGER管理画面にもどり、今ほど確認した記事IDを入力します。
手順
- 「AFFINGER管理」→「ヘッダー下/おすすめ」→「おすすめ記事一覧」
- 「任意の人気記事を指定」に記事IDを入力する
注意
複数指定したいときは「,(半角カンマ)」で区切ってください
これで指定した記事がおすすめ記事に表示されるようになります。
表示させたい場所を決めよう
最後に表示する場所を決めます。
手順
- 「投稿の記事下に表示する」にチェック
- 「トップの最上部表示にする」にチェック
これで記事下とトップページの最上部におすすめ記事が表示されたはずです。
色をカスタマイズしよう
おすすめ記事が表示できたら、次にデザインを整えていきます。
手順は以下の通りです。
手順
- 「WordPress管理画面」→「外観」→「カスタマイズ」
- 「オプション（その他）」→「おすすめ記事」→「色を選択」→カラーコードを入力
参考
- 見出しの文字色：#FFFFFF
- 見出し背景色：#222222
- コンテンツ背景色：#EBEBEC
- 文字色：#FFFFFF
- ナンバー色：#FFFFFF
- ナンバー背景色：#222222
実際のデザインを確認してみよう
最後に出来上がったデザインを確認してみましょう。
下図のようになっていればOKです。
お疲れ様でした！
まとめ
この記事ではトップページにおすすめ記事を設置する方法を解説しました。
次章では新着記事のカスタマイズ方法について解説していきます。
それではまた次回、【AFFINGER6：新着記事のカスタマイズ方法（ブロよび。風）】でお会いしましょう！
前回の作業が済んでいない方はこちらから戻れます。
＜＜前回の記事に戻る
＞＞次の作業に進む
