![](https://yanblog3.com/wp-content/uploads/2021/07/2579438.png)
Swellのピックアップバナーに特定カテゴリーの記事一覧に
設置したいけど、どうやればいいんだろう
そんなお悩みをお持ちの方に向けて、特定のカテゴリーの記事一覧をピックアップバナーに設置する方法を解説します。
ピックアップバナーに特定カテゴリーの記事一覧を設置する方法が分かるようになる!
ピックアップバナーとは?
![](https://yanblog3.com/wp-content/uploads/2021/09/はてな-1024x576.png)
![](https://yanblog3.com/wp-content/uploads/2021/09/はてな-1024x576.png)
まずはピックアップバナーとは何かについて説明します。
ピックアップバナーとは、トップページに表示できる画像バナー形式のナビゲーションメニューのことです。
例示すると、下の画像の上部赤枠内のナビゲーションメニューのことです。
下部に新着記事一覧が表示されていますが、ここには様々なカテゴリーの記事が一覧で表示されています。
これに対して、ピックアップバナーの画像をクリックすると、特定カテゴリーの記事一覧が表示されるようにする方法を
本記事では解説します。
![](https://yanblog3.com/wp-content/uploads/2021/09/image-25-949x1024.png)
![](https://yanblog3.com/wp-content/uploads/2021/09/image-25-949x1024.png)
カテゴリーの設定方法
![](https://yanblog3.com/wp-content/uploads/2021/09/ひらめき-1-1024x576.png)
![](https://yanblog3.com/wp-content/uploads/2021/09/ひらめき-1-1024x576.png)
カテゴリーを設定されていない方のために、カテゴリーの設定方法について解説します。
まず「投稿」の「カテゴリー」をクリックします
![](https://yanblog3.com/wp-content/uploads/2021/09/image-26-1024x684.png)
![](https://yanblog3.com/wp-content/uploads/2021/09/image-26-1024x684.png)
次に「新規カテゴリーを追加」の「名前」に作りたいカテゴリー名を入力して「新規カテゴリーを追加」をクリック
今回は試しに「a」というカテゴリーを作ってみました。これでカテゴリーの作成は完了です。
![](https://yanblog3.com/wp-content/uploads/2021/09/image-28-933x1024.png)
![](https://yanblog3.com/wp-content/uploads/2021/09/image-28-933x1024.png)
ピックアップバナーの設置方法
![](https://yanblog3.com/wp-content/uploads/2021/09/男性・パソコン-1024x576.png)
![](https://yanblog3.com/wp-content/uploads/2021/09/男性・パソコン-1024x576.png)
ピックアップバナーの設置方法を解説します。
「外観」→「メニュー」→「新しいメニューを作成」→「メニュー名」にピックアップバナーと入力
「メニュー設定」の「ピックアップバナー」の横のチェックを入れる → メニューを作成
![](https://yanblog3.com/wp-content/uploads/2021/09/image-29-1024x491.png)
![](https://yanblog3.com/wp-content/uploads/2021/09/image-29-1024x491.png)
ピックアップバナーに特定カテゴリーの記事一覧を設置する方法
![](https://yanblog3.com/wp-content/uploads/2021/09/PC会社員-1024x576.png)
![](https://yanblog3.com/wp-content/uploads/2021/09/PC会社員-1024x576.png)
続いて、作成したカテゴリーをピックアップバナーに設置していきます。
「外観」→「メニュー」→「カテゴリー」→ピックアップバナーに追加したい「カテゴリー」にチェック
「メニューに追加」→(メニューが追加される)→「メニューを保存」で完了
![](https://yanblog3.com/wp-content/uploads/2021/09/image-31-1024x634.png)
![](https://yanblog3.com/wp-content/uploads/2021/09/image-31-1024x634.png)
ピックアップバナーに画像を設置したい場合
各カテゴリーの「説明」の欄に画像のURLを入力して「メニューを保存」をクリックします
※画像URLは自サイトの「メディア」内の画像のURL
![](https://yanblog3.com/wp-content/uploads/2021/09/image-32-1024x570.png)
![](https://yanblog3.com/wp-content/uploads/2021/09/image-32-1024x570.png)
バナーのレイアウトを変更したい場合
「外観」→「カスタマイズ」をクリック
![](https://yanblog3.com/wp-content/uploads/2021/09/image-33-1024x498.png)
![](https://yanblog3.com/wp-content/uploads/2021/09/image-33-1024x498.png)
「トップページ」をクリック
![](https://yanblog3.com/wp-content/uploads/2021/09/image-34-1024x680.png)
![](https://yanblog3.com/wp-content/uploads/2021/09/image-34-1024x680.png)
「ピックアップバナー」をクリック
![](https://yanblog3.com/wp-content/uploads/2021/09/image-35.png)
![](https://yanblog3.com/wp-content/uploads/2021/09/image-35.png)
「バナーレイアウト」を好みのものに変更する。私は以下の画像の設定にしています。
![](https://yanblog3.com/wp-content/uploads/2021/09/image-36.png)
![](https://yanblog3.com/wp-content/uploads/2021/09/image-36.png)
以上が、特定のカテゴリーの記事一覧をピックアップバナーに設置する方法でした。
![](https://yanblog3.com/wp-content/uploads/2022/09/ee94caf08fb58619dc7548f6cac25265-150x150.png)
![](https://yanblog3.com/wp-content/uploads/2022/09/ee94caf08fb58619dc7548f6cac25265-150x150.png)
![](https://yanblog3.com/wp-content/uploads/2022/09/ee94caf08fb58619dc7548f6cac25265-150x150.png)
最後までご覧いただきありがとうございました!