カスタマイズ

【AFFINGER6】新着記事のカスタマイズ方法【ブロよび。風】

AFFINGER6カスタマイズ:新着記事

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

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

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

こんな人におすすめ

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

それでは早速、新着記事のカスタマイズ方法を一緒にみていきましょう。

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

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

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

編集長F

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

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

AFFINGER6の詳細はこちら

/いますぐゲットする\

トップページに新着記事を設置してみよう

AFIINGER6カスタマイズ:新着記事の設置方法

新着記事の設置方法は2つあります。

  • AFFINGER管理機能を使う
  • ウィジェット機能を使う

ブロよび。風カスタマイズではAFFINGER管理の機能を使って新着記事を表示させています。
ウィジェット機能についても解説しますが、
ブロよび。風のサイトデザインにするにはAFFINGER機能を使ってください。

それではひとつずつ見ていきます。

AFFINGER管理機能で新着記事を設置しよう

手順は以下の通りです。

AFFINGER管理

新着記事カスタマイズ方法

手順

  • WordPress管理画面」→「AFFINGER管理
  • トップページ」→「記事一覧

新着記事カスタマイズ方法

手順

  • 表示する見出しを入力
  • 非表示設定にチェックを入れる

上図のように設定すればOKです。

※見えづらい場合は拡大してください。

参考

  • 見出し:新着記事と入力(好みでOK)
  • トップページのコンテンツ内の新着記事一覧を非表示にする:チェックしない
  • トップページのサイドバーの新着記事一覧を非表示にする:チェック
  • 下層ページのサイドバーの新着記事一覧を非表示にする:チェック

最後に新着記事を何件表示するか決めます。
こちらはWordPressの管理画面から設定が可能です。

新着記事カスタマイズ方法

手順

  • WordPress管理画面」→「設定」→「表示設定
  • 1ページに表示する最大投稿数」を入力
  • RSS/Atomフィードで表示する最新の投稿数」を入力
  • 変更を保存

何件表示するかはお好みで設定してください。
ちなみに当ブログは5件に設定しています。

ウィジェット機能で新着記事を設置する方法

ここまでAFFINGER管理を使って新着記事を表示させる方法をみてきました。
補足として、ウィジェット機能で新着記事を設置する方法も解説しておきます。

※AFFINGER管理を使う人は読み飛ばしてOKです。

新着記事カスタマイズ方法

新着記事カスタマイズ方法

手順

  • WordPress管理画面」→「外観」→「ウィジェット
  • STINGER最新の投稿」を「トップページ中部ウィジェット」にドラッグ&ドロップ
  • タイトル」に新着記事と入力
  • 保存」→「完了

デザインをカスタマイズしよう

カスタマイズ

次にデザインを整えていきます。
やることは以下の2つです。

  • 見出しのカスタマイズ
  • カテゴリータグのカスタマイズ

順番に見てみましょう。

見出しをカスタマイズしよう

まずは見出しのカスタマイズ方法から解説します。
見出しは下図の赤い四角で囲まれた部分になります。

新着記事カスタマイズ方法
作業イメージ

カスタマイズ方法

新着記事カスタマイズ方法
新着記事カスタマイズ方法
新着記事カスタマイズ方法

手順

  • WordPress管理画面」→「外観」→「カスタマイズ
  • 見出しタグ(hx)/テキスト」→「NEW ENTRY &関連記事」→「色を選択
  • カラーコードを入力
  • デザインパターンにチェック

参考

  • 背景色:#222222
  • ボーダー色:#FFFFFF
  • 文字色:#FFFFFF
  • デザインパターン:ノーマル

これで見出しのカスタマイズは完了です。

カテゴリータグをカスタマイズしよう

続いてカテゴリータグのカスタマイズ方法をみていきます。
カテゴリータグは、下図の赤い四角で囲んだ部分になります。

新着記事カスタマイズ方法
作業イメージ

カスタマイズ方法

新着記事カスタマイズ方法
新着記事カスタマイズ方法

手順

  • WordPress管理画面」→「外観」→「カスタマイズ
  • カテゴリ」→「色を選択
  • カラーコードを入力
  • 角を丸くする」にチェック

参考

  • 背景色:#222222
  • 文字色:#FFFFFF

※「角を丸くする」にチェックしないと、四角のタグになります。

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

デザイン

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

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

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

お疲れ様でした!

編集長F

まとめ(次章の内容)

この記事では新着記事のカスタマイズ方法を解説しました。

次章ではプロフィールカードの設置方法を解説していきます。

プロフィールカード完成イメージ
プロフィールカード:完成イメージ

それではまた次回、【AFFINGER6:プロフィールカードを設置する方法(ブロよび。風カスタマイズ)】でお会いしましょう!

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

<<前回の記事に戻る

>>次の作業に進む

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

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

AFFINGER6の詳細はこちら

/いますぐゲットする\

よく読まれている記事

アイキャッチ 1

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

アイキャッチ 2

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

アイキャッチ 3

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

-カスタマイズ