SWELLのピックアップバナーの作り方を丁寧に解説【画像付き】

悩む人

SWELLのピックアップバナーを設置したいけど作り方がわからない…
設置方法について画像付きでわかりやすく解説してほしいです…

そういった悩みを解決します。

本記事の内容
  • SWELLのピックアップバナーとは?
  • SWELLのピックアップバナーに適した画像サイズ
  • SWELLのピックアップバナーの作り方を画像付きで解説
  • SWELLのピックアップバナーのデザインを整える方法

本記事では、SWELLの便利機能の一つである「ピックアップバナー」の作り方について紹介していきます。

まずはピックアップバナーがわからない方に向けて、簡単に概要を紹介していきます。

そこからピックアップバナーを作成するための「前段階、作成手順、作成後のデザイン整備」まで、わかりやすく解説しました。

基本的に画像付きで解説しているので、ぜひ一緒に手を動かしながら設置していきましょう。

また設置していくにあたって、僕が躓いたポイントも紹介していくので、ぜひ参考にしてみてください。

本記事を書いている人
  • 22歳国立理系大学生(機械学習をテーマに研究)
  • Web系のプログラミング言語を勉強→ITベンチャーで長期インターン
  • Twitterのフォロワー数は1500名ほど
  • 現在は法人のWebマーケティングの仕事を受けています
目次

SWELLのピックアップバナーとは?

SWELLのピックアップバナーとは、トップページに表示できる画像メニューのことです。

例えば当ブログだと下記の通り。

このような形で設置することで、読者に読んでほしい記事のアピールをすることができます。

また、ブログ自体もおしゃれに見えて、メリットが大きいです。

SWELLのピックアップバナーに適した画像サイズ

いきなり作り方に入るのではなく、最初にピックアップバナー用の画像を用意していきましょう。

ですが、ただ単に画像を用意するのではなく、SWELLのピックアップバナーには適した画像サイズがあります。

その適した画像サイズとは「横幅1600px × 縦幅900px」です。

普通のフリー素材サイトから持ってくると、だいたい縦幅が大きくなって不細工になってしまいます。

そのため、下記の方法から最初にサイズを変更してあげましょう。

上記方法で縦横比がおかしくなったら、部分スクショなどで対応してあげるといいかもです<(_ _)>

SWELLのピックアップバナーの作り方を画像付きで解説

ここからは、SWELLのピックアップバナーを作る方法について紹介していきます。

いきなり本番環境で作るのが怖い方は、まずはローカル環境から試していきましょう。下記の記事にて、ローカル環境を構築する方法について紹介しています。

それでは、順番に解説していきます。

まず、Wordpressのダッシュボードから「外観」→「メニュー」に移って、「新しいメニューを作成しましょう。」をクリック。

SWELLで新しいメニューを作成する

すると、下記のような画面に遷移するので、以下の手順で「ピックアップバナー」を作成していきましょう。

SWELLでピックアップバナーを作成する手順

ピックアップバナーメニューを作成すると、メニュー項目を追加できるようになるので、追加したいリンク先を作成していきましょう。(当ブログはカスタムリンクで作成していますが、カテゴリーなども良いと思います。)

SWELLでカスタムリンク作成

以下のようにカスタムリンクが作成できたら、「表示オプション」をクリック。(この工程は画像を表示させるために重要です。)

SWELLの表示オプション

すると下記のようになるので、「説明」にチェックを入れましょう。

SWELLのメニューで「説明」を追加

このような過程を踏むことで、先ほど作成したカスタムリンクに「画像URL」を指定することができます。

SWELLのピックアップバナーで画像を表示

なお、画像URLの取得方法は下記の通りで、まず「メディア」→「ライブラリ」に移りましょう。

Wordpressのライブラリに移動

任意の画像を選択して、右下にある「URLをクリップボードにコピー」をクリックすると、画像URLを取得できます。

Wordpressで画像URLを取得する方法

上記手順を繰り返して、載せたいリンクをまとめたら完成です(*`・ω・)ゞ

SWELLのピックアップバナーの完成

また、バナーのレイアウトやデザインに関しては、SWELLの公式サイトを参照するとわかりやすいです。

SWELL
ピックアップバナー機能の使い方 | WordPressテーマ SWELL ここでは、SWELL ver 1.1.4 から追加された「ピックアップバナー機能」の使い方についてご説明していきます。 「ピックアップバナー」とは、トップページに表示できる画像...

SWELLのピックアップバナーのデザインを整える方法

ここからは、ピックアップバナーは作成できたけど、「なんかデザインがおかしいなぁ、、、」という方向けに、デザインを整える方法について紹介していきます。

CSSで整えていくので、こちらも怖い方はローカル環境で試してからにしましょう。

まず当ブログの場合だと、PC表示で下記のようにピックアップバナーの上の余白がブサイクになったので、こちらを整えていきます。(ブサイクではなかったら飛ばしてもらって問題ないです!)

ピックアップバナーの上側の余白が大きい

開発者ツールで見てみると、「id=”content”の部分にpadding-top: 4em;」が掛かっています。

簡単に説明すると、上側に4emの余白がついている状態というわけなので、ちょうどいい感じに減らしていきましょうということです。

SWELLのピックアップバナー上の余白をいい感じにする

当ブログでは、上側の余白が2emだといい感じでした。(ブログによって調整しましょう。)

CSSを追加する際は、カスタマイザーを開いて「追加CSS」をクリック。

SWELLの追加CSS

下記のように記述して、「公開」をクリックすると完了です。

なお、追加しているコードは以下の通り。

.top #content {
padding-top: 2em;
}

次にスマホ表示では、ピックアップバナーの下の余白がブサイクだったので、なおしていきましょう。

開発者ツールで見てみると、「class=”p-pickupBanners”の部分にmargin-bottom: 4em;」が掛かっています。

SWELLのピックアップバナー下の余白が大きい

当ブログでは、下側の余白が2.5emだといい感じでした。(こちらもブログによって調整しましょう。)

SWELLのピックアップバナー下の余白をちょうど良くする

こちらも先ほどと同様にCSSを追加していきましょう。

なお、追加しているコードは以下の通り。

@media screen and (max-width: 781px) {
   .p-pickupBanners{
       margin-bottom: 2.5em;
   }
}

以上で完了です!

まとめ:SWELLでピックアップバナーを作成しておしゃれなブログを作ろう!

本記事では、SWELLのピックアップバナーの作り方について、画像付きで丁寧に解説しました。

ピックアップバナーは読者に読んでもらいたい記事をアピールでき、ブログ自体もおしゃれになるので、積極的に設置していきましょう。

というわけで今回は以上とします。最後まで読んでいただきありがとうございました。

\  SWELLのレビューはこちら /

\  SWELLでホームページ制作に興味がある方はこちら /

Thank you for sharing my post !!
  • URLをコピーしました!
目次