このサイトのテーマ「SWELL」を見てみる>>

【SWELL】5分でピックアップバナーを作成・表示させる設定方法

悩む人

SWELLを使っているサイトを見ると、ピックアップバナーが目に入ります。あれはどうやって設定するのですか?

こんな悩みを解決していきます。

この記事の内容

  • ピックアップバナーとは?
  • ピックアップバナーの設定方法

この記事の信頼性

この記事を書いている筆者は、ブログ歴1年以上でこのサイトを開設して1ヶ月で収益4桁を達成しています。Twitterのフォロワーも現在600人以上で、かなりの好調子でブログ運営を楽しんでいる副業ブロガーです。

読者さんへの前置きメッセージ

ピックアップバナーは、サイトを見た時にパッと目にはいる部分で、多くの人に読んでもらえる可能性が高まる部分です。

しかし、SWELLでどうやったらピックアップバナーを表示できるのかが結構わかりにくい…。

りょう

実際、僕らも初めは分からなくて色々ググってました。

ですが安心してください。この記事を読む事によって、ピックアップバナーの設定方法は完璧に理解することが出来ます。

それでは、実際に設定を行なっていきましょう。

まだSWELLを導入していない方は下記に記事を参考にしてみてください。

≫関連:【超人気】WordPressテーマSWELLの評判・口コミ【導入まで】

目次

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

ピックアップバナー

「ピックアップバナー」とは、トップページに表示できる画像バナー形式のナビゲーションメニューのこと

引用:SWELL公式サイト

サイトを見た時に、パッと読者の注目を集める部分であり、見てもらいたい記事を設置することが多いです。

一見難しそうなんですが、意外と簡単に設定できます。

ピックアップバナーは、読者に見てもらいたい記事を選ぶのがポイントです。

ピックアップバナーを設定する上での注意点は、「派手にしすぎない」これくらいですね。

SWELLでピックアップバナーを設定する方法

手順は以下になります。

  1. ピックアップメニューを作成
  2. 表示させたい画像の編集
  3. デザインとレイアウトの設定

それでは一緒に進めていきましょう。

その①:ピックアップメニューを作成

まずは、表示させる記事を選んでいきます。

数は見やすいように4つを選出して表示させると、サイトのバランスがまとまります。

まずは、WordPressダッシュボードから【外観】⇒【メニュー】を開いてください。

メニューを開いたら、上記の画像の部分にある【新しいメニューを作成しましょう】をクリックします。

その後、自分のわかりやすい名前をつけて、【メニューを作成】をクリックすれば後は表示させたい記事・カテゴリーを追加するだけです。

最後に、メニュー設定の部分にある【ピックアップバナー】にチェックを入れて、【メニューを保存】をクリックすれば完了です。

その②:表示させたい画像の編集

次に、ピックアップバナーに表示させる画像を作成していきます。

SWELLを使って少し驚いたのが、この画像のサイズを自分で調整できるということ。

りょう

以前AFFINNGERを使っていた時は元からサイズは固定されていたので、SWELLには可能性を感じましましたね(笑)

今回は、当サイトの画像サイズを例に挙げて作成していきます。

  • Canvaで画像サイズを調整・作成
  • メニューに貼り付け

上記の手順で進めていきます。

Canvaで画像サイズを調整・作成

ブロガーの人がよく使うCanvaで画像を作成していきます。

有料版・無料版とありますが、基本無料で設定はできるので、有料にする必要はないですね。

それでは見ていきましょう。

サイズ調整

まずは画像サイズを設定していきます。

その後、表示させたい画像を挿入してサイズに合わせましょう。

イラスト挿入

後はダウンロードすれば完了です。

りょう

ダウンロードした画像は軽量化しておきましょう!

※画像の軽量化には、Tinyjpgがおすすめです(無料)

メニューに貼り付け

次に、メニューの説明部分に画像のURLを貼り付けていきます。

【外観】⇒【メニュー】をクリックして、作成したメニューを表示してください。

上記の部分に画像URLを貼り付ければ完了です。

【メニューを保存】をしないと反映されなので、忘れないようにしましょう。

画像URL取得方法

過去の僕が、写真のリンク取得方法がわからなかったので、一応解説しておきます。

【メディア】⇒【ライブラリ】をクリック

※画像を追加する場合は【新規追加】をクリック

【画像を選択】し、右下に表示される部分で【URLを取得】できます。

これでURLが取得できました。

その③:デザインとレイアウトの設定

最後に、実際に表示させる設定を行えば終わります。

ここは自分好みに設定できるので、表示させるところまで完了したら、色々設定を試して見てくださいね。

それでは見ていきます。

まずは、【外観】⇒【カスタマイズ】をクリックして、設定画面に切り替えましょう。

カスタマイズ項目にある【メニュー】⇒【ピックアップバナー(①で作成したもの)】選択してください。

【メニューの位置】から【ピックアップバナー】にチェックを入れれば表示されるようになります。

りょう

これでピックアップバナーの表示は完了です!

ピックアップバナーの見た目を変えたい時は、カスタマイズ項目にある【トップページ】⇒【ピックアップバナー】で設定できます。

まとめ:ピックアップバナーの設定

これで、あなたのサイトも見栄えの良いデザインになったかと思います。

ピックアップバナーは読者の注目を集めるだけでなく、サイトのデザインとしてもあった方が綺麗なので、色々表示設定をいじってみて、お気に入りを見つけてください。

その他のSWELL設定は下記にて解説しているので、参考にしてみてください。

それでは今回は以上になります。

この記事が気に入ったら
フォローしてね!

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

コメント

コメントする

目次
閉じる