> 12コの有料テーマを使うマニアが大評判のSWELLを徹底レビュー!

【おしゃれ】SWELLピックアップバナーの作り方

How-to-make-a-SWELL-pickup-banner

\ オシャレを実現!初心者でもデザイン性抜群のサイトにできる /

※いま一番オススメのWordPressテーマ

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

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

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

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

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

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

MIHO

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

ヒナキラ

よろしくお願いします!

デザインが綺麗でオシャレ、使いやすく、高機能。

SWELLの評判を集めた記事は →「SWELLの口コミ評判・レビュー

有料テーマ12コ使う僕のイチオシWordPressテーマです。

≫SWELL公式サイトはこちら

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テーマ。

WordPressテーマ「SWELL」の特徴
総合評価
( 5 )
メリット
  • とってもオシャレなサイトが誰でも作れる
  • 構造化機能も充実!SEO対策をしやすい
  • ダントツクラスの機能性
  • 高速化のプロを顧問!ページスピードが速い
  • 時短機能も充実!記事執筆を効率化できる
  • ブロックエディター対応度ナンバーワン
  • ブログ運営が楽しくなる
  • 初心者でもカスタマイズしやすい
  • 買い切り、複数サイトに使える
  • アプデが頻繁で進化が止まらない
デメリット
  • 値段が安くない(17,600円)
  • AMP非対応
  • 個人開発

SWELLはオシャレで、非常に使いやすく、時短に繋がる生産性高いWordpressテーマ。

17,600円の価格も、抜群の機能性やSEO対策面、記事執筆効率化などを考慮すればむしろ安いです。

使ったら二度と手放せなくなるWordpressテーマ「SWELL」の感動を、あなたにも。

\オシャレで使いやすく機能性抜群のテーマ/

※今まで使った有料テーマの中で一番おすすめ

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

コメント

コメントする

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

CAPTCHA

タップできる目次