AFFINGER5

AFFINGER5で新着記事・関連記事エリアをカスタマイズする方法

AFFINGER5で新着記事・関連記事エリアをカスタマイズする方法

AFFINGER5(アフィンガー5)をご使用のみなさん「新着記事」と「関連記事」の設定は行ってますか?

「新着記事」と「関連記事」はユーザビリティを向上させるためにも重要な項目です。

今回はそんな新着記事と関連記事のエリアをカンタンにカスタマイズする方法をご紹介します。

今回のテーマ

AFFINGER5(アフィンガー5)を使って

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

当サイトではウェブサイトやブログに関する記事を毎日投稿しています。
他の記事も合わせて読んでいただけると嬉しいです。

\今なら当サイト限定の豪華特典付き/

AFFINGER5の詳細を見る

AFFINGER5(アフィンガー5)で新着記事エリアをカスタマイズ

AFFINGER5で新着記事エリアをカスタマイズする方法は2つあります。

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

  • AFFINGER5の標準機能からカスタマイズ
  • WordPressに元からある機能からカスタマイズ

それぞれ順番にご紹介します。

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

まずは新着記事エリアのカスタマイズ方法をご紹介します。

▼完成形はこんな感じです▼

新着記事完成形

それではカスタマイズ方法をご紹介します。

AFFINGER5管理

まずはWordPress管理画面から「AFFINGER5管理」→「トップページ」に移動します。

新着記事設定

「トップページ」の真ん中あたりに「記事一覧」という段落、少し下に「新着記事」という項目があります。

新着記事エリアのカスタマイズはここから出来ます。

順番に概要を見てみましょう。

  • 新着記事一覧に表示する見出し
    →新着記事エリアの見出しを指定できます。
  • 新着記事に表示する件数
    →エリアに表示する記事数を指定できます。
  • トップページのコンテンツ内の新着記事一覧を非表示にする
  • トップページのサイドバーの新着記事一覧を非表示にする
  • 下層ページのサイドバーの新着記事一覧を非表示にする

そもそも新着記事エリアを表示させたくない方は3つのチェックボックスにチェックを入れましょう。

一番下の「固定ページ指定のフロントにも新着記事一覧の表示」では固定ページに新着記事エリアを表示する設定ができます。

お好みに合わせて設定してみてください。

設定が完了したら「save」ボタンを押して設定を更新しましょう。

これらの機能はすべてAFFINGER5にしか備わっていませんので重宝しましょう笑

WordPress共通の新着記事エリア設定

実は新着記事エリアを表示させる方法はもう一つあります。

こちらの方法はAFFINGER5に限らずWordPressに標準で備わっている機能です。

▼完成形はこんな感じです▼

最近の投稿

「新着記事のスペースは小さめでいい」
「シンプルなデザインのほうが良い」
そんな方におすすめです。

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

ウィジェット画面

ウィジェット画面では左側がウィジェット一覧右側が設置場所になっています。

ウィジェット一覧の下の方に「最近の投稿」というボックスがあるので、これをサイドバーにドラッグアンドドロップしてあげましょう。

新着記事ウィジェット

詳細を開くと簡単な設定画面が展開されます。

お好みに合わせて設定してみてください。

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

次に新着記事エリアの色をカスタマイズする方法をご紹介します。

WordPress管理画面から
→  外観
→  カスタマイズ
→[+]各テキストとhタグ(見出し)
→  ウィジェットタイトル(サイドバー)
に移動しましょう。

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

するとこのように文字色、背景色、ボーダーカラーを設定できます。

こちらに関してもお好みに合わせて設定してみてください。

注意ポイント

すでにAFFINGER5のカラー設定でメインカラーをオリジナルで決めてしまった方は、こちらの画面では変更できません。追加CSSから設定しましょう。

AFFINGER5(アフィンガー5)で関連記事エリアをカスタマイズ

次に関連記事エリアのカスタマイズ方法をご紹介します。

こちらの方法はAFFINGER5にしか備わっていない便利機能です!

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

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

まずはWordPress管理画面から「AFFINGER5管理」→「投稿・固定記事」に移動します。

関連記事一覧

下の方にスクロールすると「関連記事一覧」という項目があります。

関連記事一覧は見出し設定と件数設定だけで設定が完了します!

というのも何の記事を関連記事と判断するかはAFFINGER5が自動で行ってくれます

めちゃめちゃ便利ですね!

見出しや件数はお好みに合わせて設定してみてください。

また、関連記事一覧を表示させたくない時は、画像のように「投稿の関連記事を非表示にする」にチェックを入れましょう

設定が完了したら「save」ボタンを押して設定を更新しましょう。

関連記事一覧完成形

こんな風に表示されていたら完成です!

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

次に関連記事エリアの色をカスタマイズする方法をご紹介します。

WordPress管理画面から
→  外観
→  カスタマイズ
→[+]各テキストとhタグ(見出し)
→  NEW ENTRY & 関連記事
に移動しましょう。

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

するとこのように背景色、ボーダーカラー、文字色、デザインパターンを設定できます。

こちらに関してもお好みに合わせて設定してみてください。

注意ポイント

すでにAFFINGER5(アフィンガー5)のカラー設定でメインカラーをオリジナルで決めてしまった方は、こちらの画面では変更できません。追加CSSから設定しましょう。

まとめ:AFFINGER5の新着・関連記事エリアを活用しよう!

まとめ

まとめ

  • AFFINGER5では簡単に新着記事・関連記事エリアの設定ができる
  • 各エリアのカラー設定は外観→カスタマイズからできる

今回はAFFINGER5(アフィンガー5)での新着記事・関連記事エリアのカスタマイズ方法について解説しました。

これからサイトを立ち上げたい!ブログを始めたい!といった方の助けになれたらなと思います。

わからない部分がある方はお問合せフォームで質問して貰えばすぐに返信します。

今サイトではこれからもウェブサイト運営に関する有益な情報をたくさん発信していきたいと思っていますので応援よろしくお願いします!

AFFINGER5のカスタマイズ方法のまとめはこちら

AFFINGER5(アフィンガー5)のカスタマイズ方法まとめ
AFFINGER5(アフィンガー5)のカスタマイズ方法まとめ

続きを見る

\今なら当サイト限定の豪華特典付き/

AFFINGER5の詳細を見る

AFFINGER5関連の記事はこちら

All in One SEO Packの導入手順
AFFINGER5を使ってみた感想【良かった点と悪かった点】

続きを見る

AFFINGER5(アフィンガー5)でオシャレな目次を作成する方法
AFFINGER5(アフィンガー5)でオシャレな目次を作成する方法

続きを見る

AFFINGER5(アフィンガー5)でお問い合わせフォームを簡単に設置する方法
AFFINGER5(アフィンガー5)でお問い合わせフォームを設置する簡単な方法

続きを見る

AFFINGER5で内部・外部リンクのブログカードを作る方法
AFFINGER5で内部・外部リンクのブログカードを作る方法

続きを見る

AFFINGER5(アフィンガー5)に関する記事一覧はこちら→

▼最新映画や漫画が無料で見れちゃう▼
▼最新ドラマや漫画が無料で見れちゃう▼

-AFFINGER5

Copyright © wagtechblog All Rights Reserved.