この記事は
【AFFINGER6】サイトデザイン完全マニュアル【ブロよび。風】
のおすすめ記事編になります。
全ての工程を順番に進めることで「ブロよび。風」のデザインが完全再現できるようになっています。
前回の作業が済んでいない方は、こちらの記事に戻って順番に作業を進めてくださいね。
参考
>>ヘッダー下にスライドショーを設置する方法【ブロよび。風カスタマイズ】
こんな人におすすめ
- AFFINGER6でブログを運営している
- シンプルでおしゃれなデザインにしたい
- あれこれ考えるよりも手順通りに操作して完成を目指したい
それでは早速、トップページにおすすめ記事(よく読まれている記事)を設置する方法を一緒にみていきましょう。
完成イメージは以下の通りです。

こんなデザインにしたいな、と思ってくれた方は手順通りに進めてみてください。

トップページにおすすめ記事を設置してみよう

おすすめ記事は、AFFINGER管理の機能を使うと簡単に設置できます。

流れは以下の通りです。
- 表示させたいテキストを決める(人気記事、よく読まれている記事、など)
- 表示させたい記事を選ぶ
- 表示させたい場所を決める
それではひとつずつみていきましょう。
表示させたいテキストを決めよう

それではまずはAFFINGER管理の画面から作業を進めていきます。


手順
- 「WordPress管理画面」→「AFFINGER管理」→「ヘッダー下/おすすめ」→「おすすめ記事一覧」
- 「おすすめ記事一覧に表示する文字」に「よく読まれている記事」と入力
参考
入力する文字は「人気記事」や「おすすめ記事」などでもOKです。
表示させたい記事を選ぼう
続いておすすめ記事に表示する記事を選んでいきます。表示する記事を指定するには記事IDが必要になります。


手順
- 「WordPress管理画面」→「投稿」→「投稿一覧」
- 表示させたい記事の「ID」を確認する
IDをメモしておくと作業がしやすいです
AFFINGER管理画面にもどり、今ほど確認した記事IDを入力します。

手順
- 「AFFINGER管理」→「ヘッダー下/おすすめ」→「おすすめ記事一覧」
- 「任意の人気記事を指定」に記事IDを入力する
注意
複数指定したいときは「,(半角カンマ)」で区切ってください
これで指定した記事がおすすめ記事に表示されるようになります。
表示させたい場所を決めよう
最後に表示する場所を決めます。

手順
- 「投稿の記事下に表示する」にチェック
- 「トップの最上部表示にする」にチェック
これで記事下とトップページの最上部におすすめ記事が表示されたはずです。
色をカスタマイズしよう

おすすめ記事が表示できたら、次にデザインを整えていきます。
手順は以下の通りです。




手順
- 「WordPress管理画面」→「外観」→「カスタマイズ」
- 「オプション(その他)」→「おすすめ記事」→「色を選択」→カラーコードを入力
参考
- 見出しの文字色:#FFFFFF
- 見出し背景色:#222222
- コンテンツ背景色:#EBEBEC
- 文字色:#FFFFFF
- ナンバー色:#FFFFFF
- ナンバー背景色:#222222
実際のデザインを確認してみよう

最後に出来上がったデザインを確認してみましょう。
下図のようになっていればOKです。

お疲れ様でした!

まとめ
この記事ではトップページにおすすめ記事を設置する方法を解説しました。
次章では新着記事のカスタマイズ方法について解説していきます。

それではまた次回、【AFFINGER6:新着記事のカスタマイズ方法(ブロよび。風)】でお会いしましょう!
前回の作業が済んでいない方はこちらから戻れます。
<<前回の記事に戻る
>>次の作業に進む