こんにちは。梨です。
最近トップページにピックアップバナーを設置したのですが、結構苦労したので私と同じように苦労している人もいるかもしれないと思い記事にしました。
・SWELLのピックアップバナーの設置方法が分からない人
・SWELLのピックアップバナーのサイズが分からない人
・SWELLのピックアップバナーの画像について知りたい人
ピックアップバナーの設置についてはSWELLの公式サイトに説明が出ていますが、より具体的に実際に私が行った手順で解説していきます。
梨あくまでも私のやり方なので、もっと良い方法があるのかもしれません。参考程度に読んでみてください。
ピックアップバナーのカスタマイズ方法（ピックアップバナーを何列にするかなど）についてはSWELLの公式サイトに載っています。
当ブログのトップページは以下の画面ですが、最初はピックアップバナーがなく、記事が新着順に並んでいるだけで、初めて当ブログを訪れた方が、このブログにはどんなことが書いてあるのかよく分からない状態だったんですね。
ですので記事上のピックアップバナーをカテゴリ別に設置して、読みたい人が読みたいカテゴリに飛べるようにしました。
カテゴリ別ではなくて、読ませたい記事を持ってきても良いのですが、今回はカテゴリ別の設置方法を説明しますね。
梨順を追って説明していきます。
カテゴリーのメニューを作成する
①「外観」＞「メニュー」から新規メニューの作成を行います。
まずは、ダッシュボードの、外観＞メニューから「新しいメニューを作成しましょう」をクリックし、メニュー名に分かりやすく「ピックアップバナー」と入力して、メニュー設定のピックアップバナーにチェックを入れて、「メニューを作成」のボタンをクリックします。
②「カテゴリー」のタブが開けるようになるので、ピックアップバナーを設置したいカテゴリーを選んで「メニューに追加」をクリック
③メニューにカテゴリーが追加されます
ピックアップバナーの画像とサイズはどう作る？
続いてピックアップバナーの画像を作っていきましょう。
ピックアップ画像は、写真なら写真、イラストならイラスト、文字だけなら文字という風にテイストを併せて、サイズをそろえることが大切です。
ピックアップ画像はテイストをそろえよう
私はオーダンというフリー素材を使ってつくりました。
オーダンにはおしゃれな写真が沢山あります。
オーダンにある写真は縦長や横長の写真など色んな形の写真があるのですが、今回は横長の長方形のものを作っていきたいので、横長の長方形の写真を選びます。
サイズを合わせるのはキャンバを使いますが後述します。
まずはオーダンで画像をダウンロードしましょう。（もちろん他のサイトのものでも大丈夫ですよ。）
①オーダンを開いて画像をダウンロードする
画像を選びダウンロードします。
②サイズ変更をクリック
ファイルを開いてサイズ変更をクリックします。
③プロフィール画像やサムネイルに最適をクリックしてピクチャなどに保存する
今回私は640×426PXの画像を作りたかったのでそれに近い「プロフィール画像やサムネイルに最適」にしましたが、もっと大きい画像にしたい場合は他のものでも良いのかもしれません。
③の作業を繰り返して他のピックアップ画像も作ります。（当ブログはピックアップ画像が４つなので４つ作りました）
つづいてサイズを合わせていきます。もうすべて同じサイズになっていれば、キャンバでサイズを併せなくても大丈夫かもしれません。当ブログは640×426PXに合わせたかったので、キャンバを使いました。
④キャンバを開いて「カスタムサイズ」をクリック
⑤お好みのサイズを入力して「新しいデザインを作成」をクリック。（当ブログはは640×426PX）
⑥アップロードを押して、オーダンで保存した画像を呼び出す
⑦メディアをアップロードをクリック
⑧アップロードされた画像をドラックして右側に張り付ける
これで画像が640×426PXの画像になりました。
⑨ダウンロードをクリックしてピクチャなどに保存する
他の画像も④～⑨を繰り返して保存しておきます。
つづいて画像にURLをつけるという作業をするのですが、それがどうやるか分からなくて時間がかかってしまったのですが、以下で説明します。
⑩ダッシュボードに行きメディアの「新規作成」を押す
⑪ファイルをドロップするか選択したら、右下のURLをクリップボードにコピーする
梨これで画像にURLが付きました。
⑫最初に作った外観＞メニューのピックアップバナーのタブを開き「説明」のところに画像のURLを貼り付ける
外観＞メニューに戻り、ピックアップバナーを呼び出し、カテゴリーのタブを開いて「説明」のところに画像のURLを貼り付けます。
この「説明」欄ですが、デフォルトでは非表示になっているので、まだ表示されていない方は以下の手順を参考にして表示状態へ切り替えてください。
- まず、メニューの編集画面の右上に表示されている「表示オプション」をクリックします。
- 上からチェックリストが表示されてくるので、「説明」という項目にチェックを入れてください。（スマホの方はタップすると大きくなります）
「説明」の部分に画像のURLを貼り付ける作業を他のカテゴリーの画像も同様に行って、保存をすれば完成です。
ご自分のトップページを開いてもらうと、この画面が完成していると思います。
というわけでカテゴリ別のピックアップバナーの設置方法について解説してみました。
私は画像のサイズを合わせるのをどうやればよいか分からないかったのと、画像にURLをつけるのが分からなくて悩み、四苦八苦していました(笑)
分かりにくいところや疑問点があればコメント欄やツイッターで教えてください。
私が分かることについてはお答えします。（もちろん無料です）分からなかったらごめんなさい。
最後までお読みいただきありがとうございました。
コメント