> 【AI革命】トレンドブログの記事作成GPTsセット
PR

【おしゃれ】SWELLピックアップバナーの作り方~サイズも分かる~

SWELLピックアップバナーの作り方

この記事では、SWELLピックアップバナーの作り方について、画像付きで詳しく解説しています。

  • ブログ画面の上に並んでいる画像メニューって何?
  • あのオシャレな画像リンクって、どうやってつくるの?
  • ピックアップバナーのサイズはどのくらい?

そんなふうに思っていませんか?

大丈夫、SWELLなら簡単に作ることができますよ。

本記事の内容
  • SWELLピックアップバナーとは
  • SWELLピックアップバナーの作り方
  • SWELLピックアップバナーの設定

SWELLでおしゃれなピックアップバナーを作りたい方におすすめの記事です。

MIHO

この記事の手順でやればピックアップバナーが設定できますよ!

ヒナキラ

よろしくお願いします!

MIHO

この記事の執筆者

MIHO

脳外科医のワーママブロガー。ブログは2年目、月5桁。イラスト作成、ラジオ、ブログ制作などマルチに活躍。

MIHO

この記事の執筆者

MIHO

脳外科医のワーママブロガー。ブログは2年目、月5桁。イラスト作成、ラジオ、ブログ制作などマルチに活躍。

Blog

この記事の監修者

ヒナキラ 編集長

30代ブロガー。ブログ月収6桁達成。有料テーマ12コを扱うテーマおたく。27万円コンサルコミュニティでSEO勉強中。元美容師。納豆好き。

Blog

この記事の監修者

ヒナキラ 編集長

30代ブロガー。ブログ月収6桁達成。有料テーマ12コを扱うテーマおたく。27万円コンサルコミュニティでSEO勉強中。元美容師。納豆好き。

見たいところに飛べる目次

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

SWELLのピックアップバナー
MIHOさんのサイト「とらいまま」より

SWELLのピックアップバナーとは、上記のようなオシャレな画像メニューのことです。

まず目に入るのがビジュアル画像、次に「ピックアップバナー」が目に入ると思います。

それだけ注目されやすく、クリックされやすいとも言えるでしょう。

SWELLピックバナーを使うメリット

ピックアップバナーを使うことで、狙った記事や、ページに誘導しやすくなります。

気になるサイトに訪れたとき、興味が惹かれるバナーがあるとクリックしたくなりますよね。

つまり、ピックアップバナーに狙った記事を置いておけばクリックしてもらいやすいのです。

MIHO

ページの上部に表示されていて、必然的に目に入りますからね。

ヒナキラ

基本的に上にあるものほど、クリックされやすいですしね。

それと、ピックアップバナーには下記のようなメリットも。

  • おしゃれに見える
  • 記事・カテゴリを目立たせる
  • クリックしてもらいやすくなる
  • サイトのクオリティが良く見える
MIHO

オシャレなサイトに見えるので、作成推奨です。

ヒナキラ

僕も別テーマのとき、ピックアップバナーのようなメニューを作りたかったのを覚えています。

というわけで、SWELLピックアップバナーの作り方を解説していきます。

SWELLックアップバナーの作り方

SWELLのピックアップバナーの作り方

SWELLのピックアップバナーの作り方は以下の通り。

STEP
ピックアップバナーの画像を作る

 雰囲気を統一する方がおしゃれに見えます。
 ピックアップバナー用の画像を作ってしまいましょう。

STEP
ピックアップバナーのメニュー作成

 リンク先のページや、画像を設定していきます。

STEP
ピックアップバナーの設定

 メニューの画像をカスタマイズして好みの設定にしましょう。

STEP①:ピックアップバナーの画像を作る

まずは、ピックアップバナー用の画像を4枚作りましょう。

ピックアップバナーは何枚でも構いませんが、PCで1列・スマホで2列で表示できる4枚がおすすめです。

リンク先を記事にした場合、アイキャッチを表示することも可能です。

MIHO

ただ、雰囲気を統一した方がおしゃれなのでオススメですよ。

ピックアップバナーのサイズ

ピックアップバナーのサイズ
MIHO

ピックアップバナーで大切なのはサイズを揃えることです。

ヒナキラ

サイズが統一されていないとレイアウトが崩れて表示されてしまいますもんね。

ちなみに、ピックアップバナーは画像が大きくても自動的に圧縮されて表示されます。

画像が大きいと読み込みに時間がかかる(表示速度が落ちる)ので、画像がボケない程度に小さめのサイズにしておくと良いです。

ちなみに、よく使われる画像比率は以下です。

よく使われる画像比率の例
  • 400px × 150px 「8:3」
  • 400px × 225px 「16:9」
  • 400px × 240px 「5:3」

SWELLの公式サイトで紹介されている画像は「16:9」です。

Canvaでの画像作成方法

肝心の画像の準備についてですが、Canvaを使えば雰囲気のあった(統一感のある)画像を作りやすいのでオススメです。

\いまなら無料お試し期間が30日!/

プロのようなデザイン画像が簡単に!

MIHO

ここからは、Canvaを使ってバナー用画像を作る方法を解説します。

Canvaでの画像作成手順は、以下のとおり。

Canvaにアクセス > ①デザインを作成 > ②カスタムサイズ

デザインを作成

①素材 > ②検索 > ③画像の右上の[…]をクリック > ④ブランド名からさらに検索

素材 > 検索 > 画像の右上の[…]でブランド

すると、雰囲気の近い画像がズラリと表示されるので、好きなものを選んでダウンロードしていきましょう。

MIHO

雰囲気の近い画像を4つ選ぶのがオススメ。

ヒナキラ

統一感があるとオシャレに見えますからね。

画像をアップロードする

Canvaで画像を作ったら、WordPressに画像をアップロードします。

アップロードの手順は下記です。

WordPress管理画面 >「メディア」 >「新規追加」

MIHO

ここから、画像をアップしましょう。

ヒナキラ

ここで先ほど作ったばかりの画像4つをアップ。

画像ファイルをアップロードしたら、画像のURLをメモするか、コピーしておきましょう。
(次の工程で使います)

画像ファイルコピー

STEP②:ピックアップバナーのメニュー作成

次に、作った画像をピックアップバナーに設定していきます。

メニューの作成手順は以下のとおりです。

①「外観」 > ②「メニュー」 をクリック。

「外観」 > 「メニュー」

「新しいメニューを作成しましょう」をクリック。

新しいメニューを作成

①「メニュー名を決める」 > ②「ピックアップバナー」にチェック > ③「メニューを作成」をクリック。

「ピックアップバナー」にチェック > 「メニューを作成」をクリック。

「メニュー項目を追加」> ピックアップバナーに設定したいページを選択。

「メニュー項目を追加」> ピックアップバナーに設定したいページを選択。
MIHO

ピックアップバナーに表示できるリンク先ページは以下のとおりです。

  • 固定ページ
  • 投稿(記事ページ)
  • カテゴリー
  • LP
  • カスタムリンク(任意のURL)
ヒナキラ

メニューを作ったあと、ドラッグして順番を変えることもできます。

リンク先のページを4つ追加できたら、それぞれに画像を設定していきます。

①「▼」 > ②「ナビゲーションラベル」に文字入力 > ③「説明」に画像URLを設定。

説明に画像URL

ナビゲーションラベル」にバナー上に表示させたい文字を入力します。
(文字を表示させない場合はなんでもOK)

説明」の欄にピックアップバナー用の画像のURLを入力します。
(画像URLはメディアから確認)※下記参照

画像URLはメディアから確認

なお、「説明」がない場合は、表示オプションから設定しましょう。

説明

すべてのメニューに画像を設定できたら、「メニューを保存」をクリックしましょう。

MIHO

これで、ピックアップバナーが表示されるようになりました。

ヒナキラ

あとは、ちょっとした設定をして完了になります。

STEP③:ピックアップバナーの設定

最後に、ピックアップバナーのレイアウトや見た目を変更する方法になります。

MIHO

「バナーレイアウト」は何列並べるか、「バナーデザイン」は画像自体の見た目の設定ですね。

ピックアップバナーの設定場所は以下です。

「外観」> 「カスタマイズ」>「トップページ」>「ピックアップバナー

ピックアップバナー設定

バナーレイアウト

ここでバナーを何列並べるかを設定します。

バナーレイアウト(PC)はPCから、(SP)はスマホで見た時の見た目の設定です。

MIHO

私は4つ画像を作っているので、PCで固定幅4列、スマホで固定幅2列を選びました。

バナーデザイン

バナーの画像のデザインを設定することができます。

  • 文字入れ
  • 白線の枠
  • 画像を暗くするか
MIHO

好みの設定にできますね!

まとめ|SWELLのピックアップバナーを使ってみよう

最後にSWELLのピックアップバナー作成方法をまとめると、以下の通りです。

  1. Canvaを使ってバナー用画像を準備。
  2. WordPressの「メディア」ですべての画像をアップロード。
  3. WordPress管理画面 →「外観」→「メニュー」に進む。
  4. 「新しいメニューを作成しましょう」をクリック。
  5. 「メニューの位置」で、ピックアップバナーにチェックして、「メニュー作成」をクリック。
  6. 「メニュー項目を追加」から、ピックアップバナーに設定したいページを選択。
  7. 各ピックアップバナーの説明欄に「画像URL」を入力。
  8. 「メニューを保存」をクリック。
  9. WordPress管理画面から「外観」→「カスタマイズ」→「トップページ」→「ピックアップバナー」に進む。
  10. 「バナーレイアウト」で表示させたいバナーの数を選択する。(4つがオススメ)

SWELLのピックアップバナーを使うだけで、グッとオシャレな印象になります。

MIHO

オシャレな見た目にできるので、ぜひ設定してみてくださいね。

ヒナキラ

設定方法は、ここで紹介したものをマネするだけ。

というわけで、今回は以上となります。

では、またです!

SWELLのトップページカスタマイズはこちら

当サイト使用テーマ。最高です。

WordPressテーマ「SWELL」の特徴
総合評価
( 5 )
メリット
  • 購入者限定アフィリエイトがあるからテーマで稼げる
  • 書きやすくて時短になるから生産性があがる
  • ChatGPTとの相性もバツグンで時短が加速
  • 誰でも簡単にオシャレなデザインにできる
  • 買い切り、複数サイトにバンバン使える
  • アプデが多くて進化がスゴイ
  • SEOにも強い
デメリット
  • 価格が高い
  • 個人開発の不安
  • 人気すぎてデザインが被りがち

\ 時短になって生産性が爆上がりするテーマ /

※おしゃれで書きやすくてブログが楽しくなる

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

コメントは日本語で入力してください。(スパム対策)

CAPTCHA

見たいところに飛べる目次