カスタマイズ

【AFFINGER6】トップページにおすすめ記事を設置する方法【ブロよび。風カスタマイズ】

AFFINGER6カスタマイズ:人気記事を設置する方法

この記事は
【AFFINGER6】サイトデザイン完全マニュアル【ブロよび。風】
おすすめ記事編になります。

全ての工程を順番に進めることで「ブロよび。風」のデザインが完全再現できるようになっています。

前回の作業が済んでいない方は、こちらの記事に戻って順番に作業を進めてくださいね。
参考
>>ヘッダー下にスライドショーを設置する方法【ブロよび。風カスタマイズ】

こんな人におすすめ

  • AFFINGER6でブログを運営している
  • シンプルでおしゃれなデザインにしたい
  • あれこれ考えるよりも手順通りに操作して完成を目指したい

それでは早速、トップページにおすすめ記事(よく読まれている記事)を設置する方法を一緒にみていきましょう。

完成イメージは以下の通りです。

AFFINGER6おすすめ記事完成イメージ
おすすめ記事:完成イメージ

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

編集長F

「稼ぐ」に特化したおすすめテーマ
ACTION / AFFINGER6

\当ブログも愛用してます/

AFFINGER6の詳細はこちら

/いますぐゲットする\

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

人気

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

AFFINGER6おすすめ記事の設定方法


流れは以下の通りです。

  • 表示させたいテキストを決める(人気記事よく読まれている記事、など)
  • 表示させたい記事を選ぶ
  • 表示させたい場所を決める

それではひとつずつみていきましょう。

表示させたいテキストを決めよう

AFFINGER6おすすめ記事カスタマイズ方法

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

AFFINGER管理

AFFINGER6おすすめ記事作成

手順

  • WordPress管理画面」→「AFFINGER管理」→「ヘッダー下/おすすめ」→「おすすめ記事一覧
  • おすすめ記事一覧に表示する文字」に「よく読まれている記事」と入力

参考
入力する文字は「人気記事」や「おすすめ記事」などでもOKです。

表示させたい記事を選ぼう

続いておすすめ記事に表示する記事を選んでいきます。表示する記事を指定するには記事IDが必要になります。

記事IDの調べ方

記事IDの調べ方

手順

  • WordPress管理画面」→「投稿」→「投稿一覧
  • 表示させたい記事の「ID」を確認する

IDをメモしておくと作業がしやすいです


AFFINGER管理画面にもどり、今ほど確認した記事IDを入力します。

AFFINGER6おすすめ記事作成

手順

  • AFFINGER管理」→「ヘッダー下/おすすめ」→「おすすめ記事一覧
  • 任意の人気記事を指定」に記事IDを入力する

注意
複数指定したいときは「,(半角カンマ)」で区切ってください

これで指定した記事がおすすめ記事に表示されるようになります。

表示させたい場所を決めよう

最後に表示する場所を決めます。

AFFINGER6おすすめ記事作成

手順

  • 投稿の記事下に表示する」にチェック
  • トップの最上部表示にする」にチェック

これで記事下とトップページの最上部におすすめ記事が表示されたはずです。

色をカスタマイズしよう

カスタマイズ

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

カスタマイズ方法

AFFINGER6おすすめ記事カスタマイズ方法
AFFINGER6おすすめ記事カスタマイズ方法
AFFINGER6おすすめ記事カスタマイズ方法

手順

  • WordPress管理画面」→「外観」→「カスタマイズ
  • オプション(その他)」→「おすすめ記事」→「色を選択」→カラーコードを入力

参考

  • 見出しの文字色:#FFFFFF
  • 見出し背景色:#222222
  • コンテンツ背景色:#EBEBEC
  • 文字色:#FFFFFF
  • ナンバー色:#FFFFFF
  • ナンバー背景色:#222222

実際のデザインを確認してみよう

デザイン

最後に出来上がったデザインを確認してみましょう。

下図のようになっていればOKです。

AFFINGER6おすすめ記事完成イメージ
おすすめ記事:完成イメージ

お疲れ様でした!

編集長F

まとめ

この記事ではトップページにおすすめ記事を設置する方法を解説しました。

次章では新着記事のカスタマイズ方法について解説していきます。

新着記事完成イメージ
新着記事:完成イメージ

それではまた次回、【AFFINGER6:新着記事のカスタマイズ方法(ブロよび。風)】でお会いしましょう!

前回の作業が済んでいない方はこちらから戻れます。

<<前回の記事に戻る

>>次の作業に進む

「稼ぐ」に特化したおすすめテーマ
ACTION / AFFINGER6

\当ブログも愛用してます/

AFFINGER6の詳細はこちら

/いますぐゲットする\

よく読まれている記事

アイキャッチ 1

副業に興味のある方は多いと思います。 月に5万円でも稼げれば生活はかなり楽になりますよね。副業候補の代表格でもあるアフィリエイト。 一度は耳にしたことがあるのではないでしょうか? そんな疑問に答えます ...

アイキャッチ 2

それでは本題に入りましょう! 目次 SEOとは?SEOの本質を知ろうGoogleのビジネスモデルを理解しようユーザー満足度を理解しよう検索エンジンの仕組みSEO対策の目的SEO対策の具体例①検索意図に ...

アイキャッチ 3

本記事ではエックスサーバーを使ったワードプレスブログの始め方を解説しています。 画像付き解説ですので手順に従って作業すれば、10分程度で完了します。 目次 はじめにブログ開設に必要なものサーバーとはワ ...

-カスタマイズ