AFFINGER トップページカスタマイズ

【AFFINGER6】新着記事・関連記事エリアのカスタマイズ方法を解説

2022年5月3日

当サイトのコンテンツには、広告を記載している場合があります。＜景品表示法に基づく記載＞

 

自分のブログの新着記事や関連記事をもっと伝える方法は無いのかな？？

 

今回の記事はこんな疑問を解決していきます。新着記事や関連記事はユーザビリティを向上させる大切なコンテンツの一つです。

 

AFFINGER6をご使用されているユーザーの方は、設定画面から簡単にカスタマイズが行えるので、紹介していきます。

 

設定はものすごく簡単にできますので、ぜひ参考にして見て下さい！

 

本記事の内容

新着記事エリアのカスタマイズする方法

関連記事エリアのカスタマイズする方法

 

この記事を書いた人

 

＼ 当ブログ使用テーマ ／

  • 誰でも簡単オシャレなデザイン！
  • インフォトップ月間総合第１位！
  • SEO対策と収益UPを標準で搭載！

有名ブロガーに愛用されているSEO最強WordPressテーマ。本ブログも使用中のカスタマイズ性が抜群のテーマです！

AFFINGER6の購入はこちら

 

AFFINGER6で新着記事エリアをカスタマイズする方法

イラスト

 

AFFINGER6で新着記事エリアをカスタマイズする方法について紹介していきます。設定方法は２パターンあります。

 

新着記事エリアをカスタマイズする方法

  • AFFINGER6の設定画面よりカスタマイズ
  • WordPressのデフォルトからカスタマイズ

 

AFFINGERをご使用のユーザーの方は、ぜひ 、AFFINGERの設定からのカスタマイズをおすすめします。

 

完成形のイメージはこちら

 

 

 

AFFINGERの設定画面から新着記事エリアを設定する方法

まずはWordPress管理画面に移動して、順番に設定を行っていきます。

 

step
1AFFINGERの管理画面に移動

「AFFINGER6管理」→「トップページ」を選択しましょう。

 

 

step
2記事一覧の項目設定

「記事一覧」の段落に「新着記事」の設定項目があります。新着記事エリアのカスタマイズはここから可能になっています。

 

 

step
3トップページのコンテンツ設定

新着記事の一覧をトップページに表示する設定を行います。以下の赤枠のチェックマークを外すことで表示設定が完了できます。

 

 

step
4トップページのサイドバー設定

新着記事の一覧をサイドバーに表示する設定を行います。以下の赤枠のチェックマークを外すことで表示設定が完了できます。

 

 

 

サイドバーへの設定ができたら、表示する件数も指定しておきましょう。

 

 

step
5新着記事の見出しの設定

新着記事一覧に表示する見出しの設定を行います。お好みのワードを「新着記事一覧に表示する見出し」の項目に入力しましょう。

 

 

お好みに合わせた設定が完了したら、最後に「save」ボタンを押して設定を更新しましょう。

 

WordPressのデフォルトからカスタマイズする方法

それでは、もう一つ新着記事一覧を表示させる方法を紹介していきます。

 

こちらの方法はAFFINGER6だけでなく、WordPressのデフォルトの機能で備わっている機能を活用していきます。

 

完成形のイメージはこちら

 

こちらは、新着記事をシンプルに表示させていという方におすすめの表示方法になっています。

 

step
1ウィジェットへ移動

WordPress管理画面から「外観」→「ウィジェット」に移動しましょう。

 

 

step
2ウィジェットの追加

ウィジェット項目に「最近の投稿」を選択して、追加したい場所に追加しましょう。

 

今回はサイドバーについてしていきます。

 

 

step
3表示設定を行う

「表示する投稿数」や「投稿日の表示のON /OFFの切り替え」を設定しましょう。

 

設定が完了したら「保存」を選択しましょう。

 

 

 

新着記事エリアの色をカスタマイズ

新着記事の設定が完了したら、配色のカスタマイズをしていきましょう。

 

WordPress管理画面から、「外観」→「カスタマイズ」に移動しましょう。

 

「各テキストとhタグ（見出し）」→「ウィジェットタイトル（サイドバー）」にて、文字色や背景色、ボーダーカラーなどの設定が行えますので、お好みに合わせて設定しましょう。

 

 

ポイント

AFFINGER6のカラー設定でメインカラーをオリジナルで決めてしまった方は、追加CSSから直接CSSコードにて編集・設定しましょう。

 

今すぐ使えるかんたんEx　HTML&CSS 逆引き事典 [ 大藤幹 ]
created by Rinker
¥2,398 (2024/04/19 20:29:41時点 楽天市場調べ-詳細)

 

AFFINGER6（アフィンガー6）で関連記事エリアをカスタマイズする方法

 

次は関連記事エリアのカスタマイズ方法について紹介していきます。

 

AFFINGER設定画面にて、簡単に設定が行えますので、こちらも設定も活用できるようにしておきましょう。

 

関連記事エリアをカスタマイズ

WordPress管理画面から「AFFINGER6管理」→「投稿・固定記事」を選択して下さい。

 

 

記事の下の方までスクロールすると「関連記事一覧」項目が表示されます。

 

 

読者のユーザーが読んでいる記事の関連したものをAFFINGER6が自動で表示してくれます。

 

すごく便利っ！

 

見出しのテキストや表示件数はお好みに合わせて設定してみてください。設定が完了したら「save」にて設定の保存をしておきましょう。

 

こんな感じで表示されます

 

 

関連記事エリアの色をカスタマイズする方法

関連記事の設定が完了したら、配色のカスタマイズをしていきましょう。

 

WordPress管理画面から、「外観」→「カスタマイズ」に移動しましょう。

 

「各テキストとhタグ（見出し）」→「NEW ENTRY & 関連記事」にて同様に、文字色や背景色、ボーダーカラーなどの設定が行えますので、お好みに合わせて設定しましょう。

 

 

 

まとめ：AFFINGER6で新着記事・関連記事エリアをカスタマイズする方法を解説

イラスト

 

以上、AFFINGER6における新着記事・関連記事エリアのカスタマイズ方法の解説でした。

 

実今回のポイントは以下の通り

  • 新着記事エリアのカスタマイズする方法

  • 関連記事エリアのカスタマイズする方法

 

新着記事や関連記事を表示されることで、読者の注目を集めることができユーザビリティの向上にもつながります。

 

また、読んでもらった記事の関連情報を表示することで、ブログの滞在時間も伸びるので、ぜひ活用してみて下さい。

参考トップページのカスタマイズに関する記事かこちら

 

参考アップデートやインストール・プラグインに関する記事はこちら

 

参考投稿記事のカスタマイズも関する記事はこちら

 

参考Gogleアドセンス×AFFINGERのカスタマイズについての記事はこちら

 

 

  • この記事を書いた人

せなお

ブログ月間1.6万PV｜YouTubeチャンネル登録者数1000達成！｜最新のITスキルとAIに関する情報発信｜ガジェットレビュー｜Webデザイン｜ 動画編集スキル｜X, Instagramでも情報発信｜本業の3倍稼ぐことのが目標

-AFFINGER, トップページカスタマイズ
-