この記事は
【AFFINGER6】サイトデザイン完全マニュアル【ブロよび。風】
の新着記事編になります。
全ての工程を順番に進めることで「ブロよび。風」デザインが完全再現できるようになっています。
前回の作業が済んでいない方は、こちらの記事に戻って順番に作業を進めてくださいね。
参考
＞＞トップページにおすすめ記事を設置する方法【ブロよび。風カスタマイズ】
こんな人におすすめ
- AFFINGER6でブログを運営している
- シンプルでおしゃれなデザインにしたい
- あれこれ考えるよりも手順通りに操作して完成を目指したい
それでは早速、新着記事のカスタマイズ方法を一緒にみていきましょう。
完成イメージは以下の通りです。
こんなデザインにしたいという方は手順通りに進めてみてください。
トップページに新着記事を設置してみよう
新着記事の設置方法は2つあります。
- 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です。
お疲れ様でした！
まとめ（次章の内容）
この記事では新着記事のカスタマイズ方法を解説しました。
次章ではプロフィールカードの設置方法を解説していきます。
それではまた次回、【AFFINGER6：プロフィールカードを設置する方法（ブロよび。風カスタマイズ）】でお会いしましょう！
前回の作業が済んでいない方はこちらから戻れます。
＜＜前回の記事に戻る
＞＞次の作業に進む
