記事数も増えてきたし、トップページにピックアップバナーを設置したい！
ブログ初心者なので、超丁寧に解説してくれないとわからない！
この記事では、SWELLでブログのトップページにピックアップバナーを設定する方法を超丁寧に画像付きで解説します。
手順がいくつかありちょっと面倒ですが、うまく作れるとブログ内の回遊率があがるのでかなりオススメです。
ピックアップバナー設置の手順
にこステップがいくつかあり面倒ですが、
この順番で進むのがラクです。
騙されたと思って！笑
１：ピックアップする記事の選定
まずはピックアップする記事、またはカテゴリーの選定をします。
パソコン、スマホで表示しやすいよう４つがオススメです。
- あなたのブログらしい記事
- あなたのブログ記事をまとめた記事
- 1番初心者むけの記事
- 収益を生みやすい記事
- 検索流入が多い記事の関連記事
などがオススメです。
自分のブログらしい記事をピックアップすると、ブログのトップページを見た人にこのブログがどんなブログかわかりやすくなりますよ。
２：トップページに掲載するバナーの作成、アップ
次にトップページに掲載するバナー（画像）を作成し、サーバーにアップします。
私はこんな感じの画像を作りました！（文字色はもっと濃い方がいいですね！）
TOPに掲載するバナー画像を作成します。
このブログのバナーサイズは「400×150」にしました。
Canvaは無料版でもサイズ指定ができるのでオススメです。
右上の「デザインを作成」＞カスタムサイズから、好きな大きさを設定してくださいね。
つくったバナー（画像）をサーバーにアップします。
あらかじめアップし、画像のURLを控えておくことで後の工程が楽になりますよ。
メディア＞新規追加＞ファイルを選択＞ファイルをアップロード
画像URLをチェックする方法はコチラ。
メディアに入れた、バナー用の画像をクリック。
右側の詳細に「ファイルのURL」があるので、それをメモ帳などに貼り付けておきましょう。
３：ピックアップバナーを追加する
ピックアップバナーの「メニュー」を追加すると、即座にブログにピックアップバナーが表示されます。
表示形式が気になる方は先に次のステップの「ピックアップバナーを設定する」をやっておきましょう。
外観＞メニュー＞メニューを編集の「新しいメニューを作成」を選びます。
メニュー構造が表示されるので、メニュー名を入力し、「ピックアップバナー」にチェックをいれ、「メニューを作成」ボタンを押しましょう。
ピックアップメニューに追加したい「投稿＝ブログ記事」「カテゴリー」を選び、「メニュー構造」に追加します。
記事をピックアップバナーに追加したい場合は「投稿」＞追加したい記事にチェックをいれる＞「メニューに追加」ボタンを押します。
にこ記事がたくさんある人は「検索」のタブをクリックして、タイトル検索をすると便利です！
ピックアップバナーにカテゴリーを追加したい人は「カテゴリー」＞追加したい記事にチェックをいれる＞「メニューに追加」ボタンを押します。
記事・カテゴリーを追加したら、順番を変更しましょう。
グリップ＆ドラックで変更できます。
にこピックアップバナーのバナー画像は、
記事のアイキャッチでOKという方は
この先のSTEP３〜５を飛ばしてOKです！
「表示オプション」＞「説明」にチェックをいれます。
にこここにチェックをいれないと
バナー画像が追加できません！
忘れずに！
「メニュー構造」の項目の右側の矢印をクリックし、追加設定オプションを表示します。
「説明」のブロックに、先ほどメモしておいたバナー画像のURLをはりつけます。
忘れずに「メニューを保存」します。
４：ピックアップバナーを設定する
最後にピックアップバナーの設定をすれば終わりです。
あとちょっとがんばりましょう！
外観＞カスタマイズ＞トップページ＞ピックアップバナーを選択します。
まずは、外観＞カスタマイズ。
↓
- バナーレイアウト
- バナーデザイン
- その他
を調整します。
バナーレイアウトは、パソコン・スマホでそれぞれ何列バナーを表示させるかを選択します。
このブログでは、PCは固定幅４列、SPは固定幅２列にしています。
バナーデザインは、バナータイトルを表示させるか否か・表示させる場合はどこに表示させるか、画像の内側に白線をつけるか否かを選べます。
このブログでは、タイトルは「表示しない」、白線は「つける」にしています。
その他では「トップページ以外の下層ページ」にもピックアップバナーを表示させるか否かを選べます。
このブログではトップページだけピックアップバナーを表示しています。
忘れずに「公開ボタン」を押しましょう！これで完成です！
スライダーを消す方法
スライダーは左右に動く（動かすことができる）バナーエリアのこと。
ピックアップバナーとスライダーが両方あるとトップがごちゃごちゃした印象になります。
ここは好みですが、スライダーを消したい人はこのタイミングで消しておきましょう！
外観＞カスタマイズ＞トップページ＞記事スライダー＞「設置しない」を選択
よくある質問
ここではよくある質問をまとめました。
- スライダーとピックアップバナー両方表示できますか？
-
SWELLならできます！
こんな感じで段積みで表示されます。
- トップページのメインビジュアルと、ピックアップバナーの隙間が気になる
-
外観＞カスタマイズ＞トップページ＞その他 にある「コンテンツ上の余白量」で調節できます。
- ピックアップバナーの画像は絶対設定しないといけないの？
-
記事の場合は設定しなくてもOKです。
設定しない場合は、記事のアイキャッチ画像が自動的に挿入されます。
おわりに
SWELLでのピックアップバナーの設定方法を紹介しました。これから設定する人の役に立てば幸いです。
バナーの作成にはCanvaがオススメです。
無料版でも十分使えるので、まずは気軽にためしてみてくださいね！
↓よければポチッとお願いします！
にほんブログ村
コメント