![](https://pins-with.com/wp-content/uploads/2020/02/question_head_boy.png)
ピックアップバナーを作ってお洒落にしたい!
![](https://pins-with.com/wp-content/uploads/2020/10/96d0325efe32b15cd3852ff508e77910.png)
5分ですぐできますよ♪
この記事ではWordPressの有料テーマである「SWELL」で
ピックアップバナーをつくる方法を
画像を豊富に使って解説します。
![](https://pins-with.com/wp-content/uploads/2020/12/swell2_pr_banner.jpg)
ピックアップバナーって何?
![](https://pins-with.com/wp-content/uploads/2020/06/3184048_s-e1591709002448.jpg)
ピックアップバナーとは、
読んで欲しい記事をアピールすることのできるもの。
因みに、このブログでは下の画像のように
3つのカテゴリーをピックアップバナーにしています。
![ピックアップバナー](https://pins-with.com/wp-content/uploads/2021/01/ed29df9cc2ae1576eb1b3da604eba0ef.jpg)
ピックアップバナーをつくるメリット
- 見てほしい記事をアピール
- クリック率情報が期待
- ブログがお洒落に♪
では、ピックアップバナーを作成していきましょう♪
ピックアップバナーの作り方
![](https://pins-with.com/wp-content/uploads/2020/05/3159979_s-e1592832149387.jpg)
SWELLでは、ボタンをポチポチしていくだけで簡単にピックアップバナーができます♪
作り方は簡単3ステップ!
- 画像を用意する
- ピックアップバナーのメニューを作成
- デザインをカスタマイズ
では、1つずつやっていきましょう!
画像を用意する
ここでいう「画像」とは、ピックアップバナーに使用するものです。
アイキャッチ画像に使っている画像でもOKですが、
折角一番目につく場所ですから
そのカテゴリーに合ったものに。
投稿ページや固定ページなどの場合は、
基本的にアイキャッチ画像が選択されます。
設定しない場合とアイキャッチ画像がない場合は
NO IMAGEとなり灰色一色
になるのでできれば設定しましょう。
画像を選んだら、「メディア」にアップロードしておきます。
![](https://pins-with.com/wp-content/uploads/2020/10/035b8e36d7e43c50f2104819b9c04589.png)
因みに、一番最後に画像を用意してもOKですよ♪
ピックアップバナーのメニューを作成
次にピックアップバナーを設定していきます。
- 外観→メニューを選択
- 新しいメニューを作成
- 分かりやすく名前を付けて、保存
- バナーに設定したいカテゴリーetcを設定
- 画像の設定
![](https://pins-with.com/wp-content/uploads/2021/01/1a04c71909d992a04ba6bafdddb6dbc4.jpg)
①「外観」の「メニュー」をクリック。
![ピックアップバナー②](https://pins-with.com/wp-content/uploads/2021/01/18fe9d1da5f2318d80d09b5e7a7d0137.jpg)
②新しいメニューを作成をクリック。
![ピックアップバナー③](https://pins-with.com/wp-content/uploads/2021/01/d6b68917926066cc21c417f6c89552dd.jpg)
③メニュー名をわかりやすく「ピックアップバナー」と付けます。
メニュー設定で「ピックアップバナー」に
チェックを付けてメニューを作成を押しましょう!
![](https://pins-with.com/wp-content/uploads/2021/01/6ef319a3fafe44398fed9a3bc30a467a.jpg)
④編集するメニューから先ほど作成した
「ピックアップバナー」を選択します。
カテゴリーや投稿記事から、
バナーにしたいものを選択して「メニューに追加」をクリック!
![](https://pins-with.com/wp-content/uploads/2021/01/33cab7cf6feb895509406655d92401c5.jpg)
⑤追加したものの右にある▲をクリックすると、設定がでてきます。
「説明」の欄に画像のURLを貼り付けます。
※デフォルトでは「説明」は表示されていません。
画面右上の表示オプションで
「説明」にチェックをいれましょう!
![ピックアップバナー⑥](https://pins-with.com/wp-content/uploads/2021/01/478d5bde038c6426f6193e4cd737ba3d.jpg)
画像URLは、メディアから各画像を表示するところにでてきます。
「URLをクリップボードにコピー」をクリックして張り付けましょう。
![](https://pins-with.com/wp-content/uploads/2020/10/96d0325efe32b15cd3852ff508e77910.png)
これでトップページにピックアップバナーが表示されていますよ♪
デザインをカスタマイズ
では、最後にピックアップバナーをカスタマイズしていきましょう。
SWELLでは「テーマカスタマイザー」として
プレビューを見ながら好みのデザインに
設定していくことができますよ♪
- カスタマイザーを開く
- 設定する
①まずはテーマカスタマイザーを開きます。
![](https://pins-with.com/wp-content/uploads/2021/01/bee28bf32cbe35b9c925f02826857ae5.jpg)
「外観」→「カスタマイズ」→「トップページ」→「ピックアップバナー」をクリック。
![ピックアップバナー⑧](https://pins-with.com/wp-content/uploads/2021/01/6accff6fed2c6a07e884a4b3d9ed0013.jpg)
②プレビューを見ながら設定していきます♪
- レイアウト
- デザイン
バナーをPC・スマホごとに何列表示するか、
バナータイトル表示の設定など。
![](https://pins-with.com/wp-content/uploads/2020/10/035b8e36d7e43c50f2104819b9c04589.png)
色々試して好みのデザインに♪
SWELLでのピックアップバナーの作り方 まとめ
![](https://pins-with.com/wp-content/uploads/2020/05/3407441_s-e1588778671149.jpg)
ピックアップバナーを設定すると次のようなメリットがあります。
- 見てほしい記事をアピール
- クリック率情報が期待
- ブログがお洒落に♪
この記事では簡単3ステップでピックアップバナーを作成する方法を紹介しました。
![](https://pins-with.com/wp-content/uploads/2020/10/1a72e802471ecdfaba215961b85db841.png)
読んで欲しい記事をアピールしていきましょう!
![](https://pins-with.com/wp-content/uploads/2020/12/swell2_pr_banner.jpg)
![](https://pins-with.com/wp-content/uploads/2020/10/3157c3241f76489fee4d08f51d096782-1.png)
- 北海道在住の30代
- 13種類の資格保持者(資格コレクター)
- ピンズコレクター
- 北海道道の駅制覇(129カ所)
つっちー(@pinswith)