本記事では、SWELLの便利機能の一つである「ピックアップバナー」の作り方について紹介していきます。
- SWELLのピックアップバナーとは?
- SWELLのピックアップバナーに適した画像サイズ
- SWELLのピックアップバナーの作り方を画像付きで解説
- SWELLのピックアップバナーのデザインを整える方法
まずはピックアップバナーがわからない方に向けて、簡単な概要について紹介していきます。
そこからピックアップバナーを作成するための「前段階、作成手順、作成後のデザイン調整」まで、わかりやすくまとめました。
基本的に画像付きで解説しているので、ぜひ一緒に手を動かしながら設置していきましょう。
また設置していくにあたって、僕が躓いたポイントについても紹介していくので、ぜひ参考にしてみてください。
【SWELL関連でおすすめ記事もあわせてどうぞ】
SWELLのピックアップバナーとは?
![](https://sgs-prog.com/wp-content/uploads/2022/10/billboard-gb3d5251ab_1280-1024x683.webp)
SWELLのピックアップバナーとは、トップページに表示できる画像メニューのことです。
例えば当ブログだと下記の通り。
![SWELLのピックアップバナーとは](https://sgs-prog.com/wp-content/uploads/2022/10/swell-pickup-banner-1024x538.webp)
このような形で設置することで、読者に読んでほしい記事のアピールをすることができます。
また、ブログ自体もおしゃれに見えて、メリットが大きいです。
SWELLのピックアップバナーに適した画像サイズ
![](https://sgs-prog.com/wp-content/uploads/2022/06/hands-gc9148683d_1280-1024x682.webp)
いきなり作り方に入るのではなく、最初にピックアップバナー用の画像を用意していきましょう。
ですが、ただ単に画像を用意するのではなく、SWELLのピックアップバナーには適した画像サイズがあります。
普通のフリー素材サイトから持ってくると、だいたい縦幅が大きくなって不細工になってしまいます。
そのため、下記の方法から最初にサイズを変更してあげましょう。
上記方法で縦横比がおかしくなったら、部分スクショなどで対応してあげるといいかもです<(_ _)>
SWELLのピックアップバナーの作り方を画像付きで解説
![](https://sgs-prog.com/wp-content/uploads/2022/10/hd-wallpaper-g112d6dbc3_1280-1024x679.webp)
ここからは、SWELLのピックアップバナーの作り方について紹介していきます。
いきなり本番環境で作るのが怖い方は、まずはローカル環境から試していきましょう。下記の記事にて、ローカル環境を構築する方法について紹介しています。
![](https://sgs-prog.com/wp-content/uploads/2022/05/laptop-g055514bd9_1280-300x200.webp)
それでは、順番に解説していきます。
まず、WordPressのダッシュボードから「外観」→「メニュー」に移って、「新しいメニューを作成しましょう。」をクリック。
![SWELLで新しいメニューを作成する](https://sgs-prog.com/wp-content/uploads/2022/10/1-1024x535.webp)
すると、下記のような画面に遷移するので、以下の手順で「ピックアップバナー」を作成していきましょう。
![SWELLでピックアップバナーのメニューを作成する](https://sgs-prog.com/wp-content/uploads/2022/10/2-1024x536.webp)
ピックアップバナーメニューを作成すると、メニュー項目を追加できるようになるので、追加したいリンク先を作成していきましょう。(下記ではカスタムリンクを作成していますが、カテゴリーなども良いと思います。)
![SWELLのメニューでカスタムリンク作成](https://sgs-prog.com/wp-content/uploads/2022/10/3-1024x533.webp)
以下のようにカスタムリンクが作成できたら、「表示オプション」をクリック。(この工程は画像を表示させるために重要です。)
![SWELLの表示オプション](https://sgs-prog.com/wp-content/uploads/2022/10/4-1024x538.webp)
すると下記のようになるので、「説明」にチェックを入れましょう。
![SWELLのメニューで「説明」を追加](https://sgs-prog.com/wp-content/uploads/2022/10/5-1024x537.webp)
このような過程を踏むことで、先ほど作成したカスタムリンクに「画像URL」を指定することができます。
![SWELLのピックアップバナーで画像を表示](https://sgs-prog.com/wp-content/uploads/2022/10/6-1024x538.webp)
なお、画像URLの取得方法は下記の通りで、まず「メディア」→「ライブラリ」に移りましょう。
![Wordpressのライブラリに移動](https://sgs-prog.com/wp-content/uploads/2022/10/7-1024x506.webp)
任意の画像を選択して、右下にある「URLをクリップボードにコピー」をクリックすると、画像URLを取得できます。
![Wordpressで画像URLを取得する方法](https://sgs-prog.com/wp-content/uploads/2022/10/8-1024x554.webp)
上記手順を繰り返して、載せたいリンクをまとめたら完成です(*`・ω・)ゞ
![SWELLのピックアップバナーの完成](https://sgs-prog.com/wp-content/uploads/2022/10/9-1024x532.webp)
また、バナーのレイアウトやデザインに関しては、SWELLの公式サイトを参照するとわかりやすいです。
![](https://swell-theme.com/wp-content/uploads/2019/04/thumb_pickbnr.png)
SWELLのピックアップバナーのデザインを整える方法
![](https://sgs-prog.com/wp-content/uploads/2022/06/apple-g2e6454c77_1280-1024x683.webp)
ここからは、ピックアップバナーは作成できたけど、「なんかデザインがおかしいなぁ、、」という方向けに、デザインを整える方法について紹介していきます。
CSSで整えていくので、こちらも怖い方はローカル環境で試してからにしましょう。
まず当ブログの場合だと、PC表示で下記のようにピックアップバナーの上の余白がブサイクになったので、こちらを整えていきます。(ブサイクではなかったら飛ばしてもらって問題ないです。)
![ピックアップバナーの上側の余白が大きい](https://sgs-prog.com/wp-content/uploads/2022/10/10-1024x540.webp)
開発者ツールで見てみると、「id=”content”の部分にpadding-top: 4em;」が掛かっています。
簡単に説明すると、上側に4emの余白がついている状態というわけなので、ちょうどいい感じに減らしていきましょうということです。
![SWELLのピックアップバナー上の余白を開発者ツールで確認](https://sgs-prog.com/wp-content/uploads/2022/10/11-1024x492.webp)
当ブログでは、上側の余白が2emだといい感じでした。(ブログによって調整しましょう。)
![SWELLのピックアップバナー上の余白をいい感じにする](https://sgs-prog.com/wp-content/uploads/2022/10/12-1024x505.webp)
CSSを追加する際は、カスタマイザーを開いて「追加CSS」をクリック。
![SWELLの追加CSS](https://sgs-prog.com/wp-content/uploads/2022/10/13-1024x561.webp)
下記のように記述して、「公開」をクリックすると完了です。
![SWELLの追加CSSを記述](https://sgs-prog.com/wp-content/uploads/2022/10/14-1024x561.webp)
なお、追加しているコードは以下の通り。
.top #content {
padding-top: 2em;
}
次にスマホ表示では、ピックアップバナーの下の余白がブサイクだったので、なおしていきましょう。
開発者ツールで見てみると、「class=”p-pickupBanners”の部分にmargin-bottom: 4em;」が掛かっています。
![SWELLのピックアップバナー下の余白が大きい](https://sgs-prog.com/wp-content/uploads/2022/10/15-1-1024x526.webp)
当ブログでは、下側の余白が2.5emだといい感じでした。(こちらもブログによって調整しましょう。)
![SWELLのピックアップバナー下の余白をちょうど良くする](https://sgs-prog.com/wp-content/uploads/2022/10/16-1024x521.webp)
こちらも先ほどと同様にCSSを追加していきましょう。
![SWELLの追加CSSを記述-2](https://sgs-prog.com/wp-content/uploads/2022/10/17-1024x558.webp)
なお、追加しているコードは以下の通り。
@media screen and (max-width: 781px) {
.p-pickupBanners{
margin-bottom: 2.5em;
}
}
以上で完了です!
まとめ:SWELLでピックアップバナーを作成しておしゃれなブログを作ろう!
![](https://sgs-prog.com/wp-content/uploads/2022/10/basketball-g46f565815_1920-1024x682.webp)
本記事では、SWELLのピックアップバナーの作り方について、画像付きで丁寧に解説しました。
ピックアップバナーは読者に読んでもらいたい記事をアピールでき、ブログ自体もおしゃれになるので、積極的に設置していきましょう。
というわけで今回は以上とします。最後まで読んでいただきありがとうございました。
【ブログを運営していく上でおすすめ記事もあわせてどうぞ】