PR
当ブログ愛用のWordPressテーマ
＼乗り換え先おすすめNo.1テーマ！／
／ブロガーとして本格的に取り組む＼
おすすめAIツール6選
- AIブログくん
SWELLでピックアップバナーの作り方｜適した画像サイズとデザイン統一でサイトイメージを確立させよう
「ピックアップバナーを作りたい…」
「ピックアップバナーに適した画像サイズは？」
「ピックアップバナーのカスタマイズ方法を教えて…」
この記事では、そんな方に向けて、SWELLでピックアップバナーの作り方を解説します。
かめコンパスこんにちは、かめコンパスです！
本記事の内容
＼読みたい箇所をクリック／
この記事を読めば、あなたも簡単に
- ピックアップバナーの設定
- 最適な画像にリサイズ
- 別の画像への変更
ができるようになります。
私もあなたと同じことに悩んでたのですが、本記事の方法でサクッと解決でき、おしゃれなサイトへ様変わりしました。
どこよりも分かりやすく書いている自信がありますので、あなたもパパッと解決してみてください！
ピックアップバナーを設定できるメニュー機能の用語と使い方が分からない場合は、さきに下の記事からご覧ください。
また以下の記事では、SWELL導入後にやっておきたい設定を初心者向けに紹介しています。
＼SWELL購入を検討中の人はこちらもご覧ください！／
あわせて読みたい
【口コミ多数！】SWELLの評判レビュー｜メリット・デメリットや使ってみた感想まとめ
「SWELLを購入しようか迷っている…」 「SWELLのメリット・デメリットは？」 「SWELLを導入すれば何が変わるのか知りたい」 この記事ではそんな方に向けて、SWELLの評判…
目次
SWELLピックアップバナーの作り方
SWELLでピックアップバナーの作り方は、下記のとおりです。
STEP
WordPress管理画面で、外観⇒メニューの順にクリックする
STEP
- 「新しいメニューを作成しましょう」をクリック
- メニュー名を入力※なんでもOK
- 「ピックアップバナー」に✔
- メニューを作成をクリックする
STEP
- をプルダウン
- 「すべて表示」をクリック
- ピックアップバナーに設定したい項目に✔
- メニューに追加をクリックする
STEP
- 追加された項目を並び替える
- メニューを保存をクリックする
これで、ピックアップバナーの作成完了です。
SWELLでは、ピックアップバナーのレイアウトをPC・スマホ別で変えたり、バナーデザインを設定したりなどのカスタマイズができます。
ピックアップバナーのカスタマイズ方法は、後ほど紹介します。
SWELLピックアップバナーに適した画像サイズ
SWELLのピックアップバナーに適した画像サイズは、
- 幅1200×高さ675px（個人的におすすめ）
- 幅1600×高さ900px（公式サイトでの推奨サイズ）
のどちらかです。
SWELL公式サイトでは、横幅1600pxが推奨サイズと書かれてますが、あくまで目安だそうです。
推奨サイズは横幅1600pxと書いていますが、これは投稿ページのアイキャッチ画像やタイトル背景画像としても使用される可能性があり、さらにMacなどの高解像度のディスプレイも考慮してのサイズです。
※ あくまで目安として参考にしていただければと思います。
引用：NO IMAGE（ノーイメージ）画像の設定方法 – SWELL公式サイト
私が公式の推奨サイズよりも幅1200×高さ675pxをおすすめする理由は、
- Googleが画像サイズを幅1200px以上で推奨している
- 画像の表示速度を遅くなりすぎないようにしたい
- アイキャッチ画像の推奨サイズが幅1200×高さ675pxだから
です。
ピックアップバナーでは、変更しない限りその記事のアイキャッチ画像がそのまま表示されます。
つまり、ピックアップバナーに適した画像サイズ＝アイキャッチ画像に適した画像サイズを考えれば問題ありません。
また、表示速度が遅くならないようにGoogleが推奨している画像サイズ幅1200pxぴったりにしましょう。
以下の表は、ページの表示速度に対するユーザーの離脱率に関する表です。
参考：Googleが2018年に発表したモバイルサイトの表示速度および直帰率に関するデータ
ページの読み込み時間 離脱率 1~3秒 32% 1~5秒 90% 1~6秒 106% 1~10秒 123%
このように、たった数秒でも表示速度が遅くなるだけで、離脱率が2~3倍にも跳ね上がるのです。
かめコンパスなかなか表示されないとストレスにもなるよね
画像の高さに関しては、アスペクト比16:9になるように675pxにします。
ちなみに、このアスペクト比16:9は普段見慣れている地デジやYouTube画面と同じ比率です。
画像を推奨サイズに変更する方法
もし挿入している画像が推奨サイズでなければリサイズしましょう。
リサイズするには、
のどちらかを使用します。
Canvaで画像をリサイズする
STEP
Canvaサイトを開き、カスタムサイズをクリックする
STEP
「幅」と「高さ」に変更したいサイズを入力し、新しいデザインを作成をクリックする
かめコンパス幅1200×高さ675pxがおすすめだよ
STEP
- サイドバーにあるアップロードをクリック
- ファイルをアップロードをクリックし、リサイズしたい画像をアップロードする
STEP
アップロードされた画像をクリックする
STEP
ページに挿入された画像をページいっぱいまで広げる
STEP
共有⇒ダウンロードの順にクリックする
STEP
ダウンロードをクリックする
これで、Canvaで画像のリサイズ完了です。
ペイントで画像をリサイズする
STEP
ペイントアプリを開き、リサイズしたい画像をページに挿入する
STEP
- サイズ変更と傾斜をクリック
- ピクセルを選択
- 縦横比を維持するを無効
- サイズを入力
- OKをクリックする
STEP
ファイル⇒保存の順にクリックする
これで、ペイントで画像のリサイズ完了です。
SWELLピックアップバナーのカスタマイズ方法
SWELLでは、ピックアップバナーをカスタマイズでき、方法は下記のとおりです。
STEP
WordPress管理画面で、外観⇒カスタマイズの順にクリックする
STEP
トップページをクリックする
STEP
ピックアップバナーをクリックする
STEP
表示されたページで設定する
STEP
設定し終えたら、公開をクリックする
これで、ピックアップバナーのカスタマイズ完了です。
ピックアップバナーは、以下4つの項目でカスタマイズできます。
それぞれ詳しく解説します。
バナーレイアウトを変更する
ピックアップバナーのバナーレイアウトはPC・スマホ別で変更でき、それぞれ以下のとおりです。
PCの場合…
スマホの場合…
かめコンパスデバイス別で設定できるのは便利だね
バナーデザインを設定する
ピックアップバナーのバナーデザインは、以下3項目で設定できます。
バナータイトルのデザイン
内側に白線を
バナー画像を少し暗く
トップページ以外の下層ページにも表示する
ピックアップバナーをトップページ以外の下層ページ（投稿ページ、固定ページ、カテゴリーページなど）にも表示させるかどうか選べます。
かめコンパストップページ以外でも表示させればPV数が上がりそうだね
Lazyloadを強制オフにする
ピックアップバナーでLazyloadを強制オフにするかどうか選べます。
かめコンパス表示速度の低下を防ぐために✔は外してね
ピックアップバナーの画像を統一させよう！
SWELLでピックアップバナーの各画像の色味やデザインは統一させましょう。
以下は、それぞれの画像を統一させない場合と統一させた場合の比較です。
デザインを統一させることで、
- 認知度のアップ
- ブログのイメージを伝えられる
- 独自性を表現することで他サイトとの差別化を図れる
といったメリットがあると言われています。
かめコンパスデザインがバラバラだと「何かダサいな～」とも思っちゃう…
画像を統一するために、デザインツール「Canva」で画像を作るのがおすすめですよ。
SWELLピックアップバナーでよくある質問
ここからはSWELLのピックアップバナーでよくある質問に回答します。
かめコンパス気になる質問をクリックしてね
ピックアップバナーの画像を変更できる？
ピックアップバナーの画像は変更できます。
やり方は下記のとおりです。
STEP
まず、ピックアップバナーに設定したい画像ファイルのURLを調べます。
WordPress管理画面で、メディア⇒ライブラリの順にクリックする
STEP
ピックアップバナーに設定したい画像をクリックする
STEP
URLをクリップボードにコピーをクリックする
これで、画像ファイルのURLを調べることができました。
STEP
つぎは、ピックアップバナーに設定したい画像に変更します。
メニュー機能で、
- 画像を変更したい項目のをプルダウン
- 「説明」に先ほどコピーした画像ファイルのURLを貼り付ける
- メニューを保存をクリックする
＼クリックで開く／
「説明」がない場合はこちら
- 「表示オプション」をプルダウン
- 「説明」に✔する
これで、ピックアップバナーの画像を変更できます。
ピックアップバナーをページ別で非表示にする方法は？
ピックアップバナーをページ別で非表示にする方法は、記事編集画面から行います。
STEP
設定⇒投稿の順にクリックする
STEP
- 「ピックアップバナー」のをプルダウン
- 「非表示」を選ぶ
STEP
更新をクリックする
これで、ピックアップバナーをページ別で非表示にできます。
SWELLピックアップバナーの作り方まとめ
今回は、SWELLでピックアップバナーの作り方を紹介しました。
本記事のおさらい
＼読み直したい箇所をクリック／
当ブログではSWELLに関する記事をいくつか書いてます。
下のページにまとめていますので、のぞいてみてください。
かめコンパスためになったという人は“Twitterフォロー”や“ブックマーク”してくれると嬉しいです！
この記事が気に入ったら
フォローしてね！
コメント