悩む人「WordPressテーマSWELLでピックアップバナーを表示させたいのですが、手順がわかりません…。初心者にも分かりやすく教えて下さい！」
こんな悩みを解決していきます。
本記事の内容
- ピックアップバナーとは？
- 表示するメリット
- ピックアップバナーの設定方法
この記事を書いている僕は、ブログ歴１年以上で、SWELLを９ヶ月ほど使用しています。なので、信頼性の担保になるかと思います。
前置きメッセージ
ピックアップバナーって憧れますよね。
しかし「表示方法が分からない…。」って方が多いですよね。
この記事を読むことで、SWELLを使ったピックアップバナーの表示方法を知ることが出来ます。
なぜなら、SWELLを９ヶ月以上使用してきて、読者に喜んでもらえるデザインを追求してきた僕が解説するからです。
本記事は３分ほどで読み終わりますので、ぜひ参考にしてみてください。
まだSWELLをダウンロードしてない方は、下記からどうぞ。
≫WordPressテーマ「SWELL」をダウンロードする
SWELLのピックアップバナーとは？
「ピックアップバナー」とは、トップページに表示できる画像バナー形式のナビゲーションメニューのこと
引用：SWELL公式サイト
サイトを見た時に
パッと読者の注目を集める部分であり、見てもらいたい記事を設置することが多いです。
一見難しそうなんですが、意外と簡単に設定できます。
ピックアップバナーは、読者に見てもらいたい記事を選ぶのがポイントです。
目立ちやすいので、読まれることも多くなりますよ。
ピックアップバナーを設置するメリット２つ
つぎの通り。
- その①：読者が流入しやすい
- その②：デザインがきれいになる
その①：読者が流入しやすい
ピックアップバナーはサイトの目立つ位置にありますので、自然と読者の流入が増えます。
収益記事を設定しておくと、収益に悩む方も解決するかもです。
実際、僕もピックアップバナーから収益が発生しました。（まぁ、本当に稀ですが…。）
その②：デザインがきれいになる
SWELLでピックアップバナー表示する際
かなり細かな設定が可能です。
例えば、下記のとおり。
- タイトルのデザイン
- 画像に白線をつける
- 背景を暗くする
自分好みの設定が可能ですので、デザイン性はかなり高くなりますよ。
SWELLでピックアップバナーを設定する方法
手順は以下になります。
- ピックアップメニューを作成
- 表示させたい画像の編集
- デザインとレイアウトの設定
それでは一緒に進めていきましょう。
その①：ピックアップメニューを作成
まずは、表示させる記事を選んでいきます。
数は見やすいように4つを選出して表示させると、サイトのバランスがまとまります。
まずは、WordPressダッシュボードから【外観】⇒【メニュー】を開いてください。
メニューを開いたら、上記の画像の部分にある【新しいメニューを作成しましょう】をクリックします。
その後、自分のわかりやすい名前をつけて、【メニューを作成】をクリックすれば後は表示させたい記事・カテゴリーを追加するだけです。
最後に、メニュー設定の部分にある【ピックアップバナー】にチェックを入れて、【メニューを保存】をクリックすれば完了です。
その②：表示させたい画像の編集
次に、ピックアップバナーに表示させる画像を作成していきます。
SWELLを使って少し驚いたのが、この画像のサイズを自分で調整できるということ。
りょう以前AFFINNGERを使っていた時は元からサイズは固定されていたので、SWELLには可能性を感じましましたね（笑）
今回は、当サイトの画像サイズを例に挙げて作成していきます。
- Canvaで画像サイズを調整・作成
- メニューに貼り付け
上記の手順で進めていきます。
Canvaで画像サイズを調整・作成
ブロガーの人がよく使うCanvaで画像を作成していきます。
有料版・無料版とありますが、基本無料で設定はできるので、有料にする必要はないですね。
それでは見ていきましょう。
まずは画像サイズを設定していきます。
その後、表示させたい画像を挿入してサイズに合わせましょう。
後はダウンロードすれば完了です。
りょうダウンロードした画像は軽量化しておきましょう！
メニューに貼り付け
次に、メニューの説明部分に画像のURLを貼り付けていきます。
【外観】⇒【メニュー】をクリックして、作成したメニューを表示してください。
上記の部分に画像URLを貼り付ければ完了です。
【メニューを保存】をしないと反映されなので、忘れないようにしましょう。
画像URL取得方法
過去の僕が、写真のリンク取得方法がわからなかったので、一応解説しておきます。
【メディア】⇒【ライブラリ】をクリック
※画像を追加する場合は【新規追加】をクリック
【画像を選択】し、右下に表示される部分で【URLを取得】できます。
これでURLが取得できました。
その③：デザインとレイアウトの設定
最後に、実際に表示させる設定を行えば終わります。
ここは自分好みに設定できるので、表示させるところまで完了したら、色々設定を試して見てくださいね。
それでは見ていきます。
まずは、【外観】⇒【カスタマイズ】をクリックして、設定画面に切り替えましょう。
カスタマイズ項目にある【メニュー】⇒【ピックアップバナー（①で作成したもの）】選択してください。
【メニューの位置】から【ピックアップバナー】にチェックを入れれば表示されるようになります。
りょうこれでピックアップバナーの表示は完了です！
まとめ：ピックアップバナーの設定
これで、あなたのサイトも見栄えの良いデザインになったかと思います。
ピックアップバナーは読者の注目を集めるだけでなく、サイトのデザインとしてもあった方が綺麗なので、色々表示設定をいじってみて、お気に入りを見つけてください。
その他のSWELL設定は下記にて解説しているので、参考にしてみてください。
それでは今回は以上になります。
コメント