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

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

この記事の内容

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

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

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

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

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

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

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

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

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

引用：SWELL公式サイト

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

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

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

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

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

手順は以下になります。

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

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

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

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

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

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

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

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

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

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

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

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

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

メニューに貼り付け

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

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

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

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

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

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

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

それでは見ていきます。

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

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

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

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

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