初マタさん必見!ベビー用品最大10%OFFにする方法 チェック

【SWELL】画像付き解説!トップにピックアップバナー設置方法

記事数も増えてきたし、トップページにピックアップバナーを設置したい!

ブログ初心者なので、超丁寧に解説してくれないとわからない!

この記事では、SWELLでブログのトップページにピックアップバナーを設定する方法を超丁寧に画像付きで解説します。手順がいくつかありちょっと面倒ですが、うまく作れるとブログ内の回遊率があがるのでかなりオススメです。

この記事執筆時のピックアップバナー。もうちょっとデザインをどうにかしたい、、、

ピックアップバナー設置の手順

  1. ピックアップする記事の選定
  2. トップページに掲載するバナーの作成、アップ
  3. ピックアップバナーを追加する
  4. ピックアップバナーを設定する

ピックアップバナーのバナー画像は記事のアイキャッチのままでOK!という方は、2と3の一部の工程を省くことができます。

にこ

ステップがいくつかあり面倒ですが、この順番で進むのがラクです。騙されたと思って!笑

目次

1:ピックアップする記事の選定

まずはピックアップする記事、またはカテゴリーの選定をします。(パソコン、スマホで表示しやすいよう4つがオススメです

  • あなたのブログらしい記事
  • あなたのブログ記事をまとめた記事
  • 1番初心者むけの記事
  • 収益を生みやすい記事
  • 検索流入が多い記事の関連記事

などがオススメです。

自分のブログらしい記事をピックアップすると、ブログのトップページを見た人にこのブログがどんなブログかわかりやすくなりますよ。

にこ

このブログは育児ブログがメインなので、育児用品のグッズ紹介記事をピックアップしました。アクセス数をみてちょこちょこ変えていくつもりです。

2:トップページに掲載するバナーの作成、アップ

次にトップページに掲載するバナー(画像)を作成し、サーバーにアップします。

STEP
バナー作成

canvaなどで、TOPに掲載するバナー画像を作成します。

このブログのバナーサイズは「400×150」にしました。

canvaは無料版でもサイズの指定できます!デザインを作成から「カスタムサイズ」を選択
希望サイズを入力して「新しいデザインを作成」すればOKです!

参考にさせていただきました!トップページをサイト型でおしゃれにする方法 | くうかんしんぷるライフ

STEP
バナーをサーバーアップロードし、リンクをコピー

つくったバナー(画像)をサーバーにアップします。あらかじめアップし、画像のURLを控えておくことで後の工程が楽になりますよ。

メディア>新規追加>ファイルを選択>ファイルをアップロード

メディア>新規追加>ファイルを選択>ファイルをアップロード
バナーに使う画像をクリック
画像のURLをコピーしてメモ帳などに貼り付け
にこ

どのURLがどの記事の画像かわかるようにメモしておきましょう!

3:ピックアップバナーを追加する

にこ

ピックアップバナーの「メニュー」を追加すると、ブログにピックアップバナーが表示されます。表示形式が気になる方は先に次のステップの「ピックアップバナーを設定する」をやっておきましょう。

STEP
新しいメニューを作成する

外観>メニュー>メニューを編集の「新しいメニューを作成」を選びます。

メニュー構造が表示されるので、メニュー名を入力し、「ピックアップバナー」にチェックをいれ、「メニューを作成」ボタンを押しましょう。

STEP
メニュー構造を編集

ピックアップメニューに追加したい「投稿」「カテゴリー」を選び、「メニュー構造」に追加します。

記事をピックアップバナーに追加したい場合「投稿」>追加したい記事にチェックをいれる>「メニューに追加」ボタンを押します。

にこ

記事がたくさんある人は「検索」のタブをクリックして、タイトル検索をすると便利です!

ピックアップバナーにカテゴリーを追加したい人「カテゴリー」>追加したい記事にチェックをいれる>「メニューに追加」ボタンを押します。

好みの順番に並べ替えましょう。

にこ

ピックアップバナーのバナー画像は、記事のアイキャッチでOKという方はSTEP3〜5を飛ばしてOKです!

STEP
表示オプションの説明にチェックをいれる

「表示オプション」>「説明」にチェックをいれます。

にこ

ここにチェックをいれないと、バナー画像が追加できません!忘れずに!

STEP
バナー画像を追加する

「メニュー構造」の項目の右側の矢印をクリックし、追加設定オプションを表示します。

「説明」のブロックに、先ほどメモしておいたバナー画像のURLをはりつけます。

STEP
メニューを保存する

忘れずに「メニューを保存」します。

4:ピックアップバナーを設定する

STEP
ピックアップバナー設定ページを開く

外観>カスタマイズ>トップページ>ピックアップバナーを選択

STEP
レイアウトを調整
  • バナーレイアウト
  • バナーデザイン
  • その他

を調整します。

バナーレイアウトは、パソコン・スマホでそれぞれ何列バナーを表示させるかを選択します。このブログでは、PCは固定幅4列、SPは固定幅2列にしています。

バナーデザインは、バナータイトルを表示させるか否か・表示させる場合はどこに表示させるか、画像の内側に白線をつけるか否かを選べます。このブログでは、タイトルは「表示しない」、白線は「つける」にしています。

その他では「トップページ以外の下層ページ」にもピックアップバナーを表示させるか否かを選べます。

STEP
「公開」する

忘れずに「公開ボタン」を押しましょう!これで完成です!

スライダーを消す方法

ピックアップバナーとスライダーが両方あるとトップがごちゃごちゃした印象になります。ここは好みですが、スライダーを消したい人はこのタイミングで消しておきましょう!

外観>カスタマイズ>トップページ>記事スライダー>「設置しない」を選択

よくある質問

スライダーとピックアップバナー両方表示できますか?

SWELLならできます!

こんな感じで段積みで表示されます。

トップページのメインビジュアルと、ピックアップバナーの隙間が気になる

外観>カスタマイズ>トップページ>その他 にある「コンテンツ上の余白量」で調節できます。

ピックアップバナーの画像は絶対設定しないといけないの?

記事の場合は設定しなくてもOKです。設定しない場合は、記事のアイキャッチ画像が自動的に挿入されます。

おわりに

  1. ピックアップする記事の選定
  2. トップページに掲載するバナーの作成、アップ
  3. ピックアップバナーを追加する
  4. ピックアップバナーを設定する

SWELLでのピックアップバナーの設定方法を紹介しました。これから設定する人の役に立てば幸いです。

バナーの作成にはCanvaがオススメです。無料版でも十分使えるので、まずは気軽にためしてみてくださいね!

↓よければポチッとお願いします!

にほんブログ村 にほんブログ村へ
にほんブログ村
あわせて読みたい
【SWELL】初心者はまずこれ!おすすめプラグイン10選+おまけ4つ SWELLでブログをはじめるなら最初にいれておきたいプラグインを紹介します。SEO、セキュリティ、キャッシュクリア、画像圧縮など。
あわせて読みたい
【SWELL】サブブログの立ち上げ方-mixhostなら初心者OK ちがうジャンルの新しいブログをはじめたい! 新しいブログやりたいけど、なるべくお金はかけたくない… ブログやサイトをやっていると、新しいことに興味が出てきて、別...
よかったらシェアしてね!

コメント

コメントする

CAPTCHA

目次
閉じる