学習マインド前進しよ。2021年4月3日URLをコピーしました!この記事では、SWELLにおいてのピックアップバナーの設定方法について初心者向けに丁寧に解説します。ピックアップバナーとは、見てほしい記事やカテゴリなどをピックアップしてクリックしやすいバナーでトップページに置く機能です。ピックアップバナー使用例。しろやんトップページやったら記事スライダーでええんちゃう?あややんうん、確かにそうなんだけどね...特化ブログでアイキャッチデザインが統一されてたら、記事スライダーもカッコいいと思います。このブログのように雑記だとジャンルがバラバラなので、アイキャッチもバラバラです。新着記事がスライダーでくるくる動くのは確かに目を引きますよね。私もしばらく記事スライダーを使っていました。見た目の統一感がないのでちょっとうるさい、というか落ち着きがない感じがするんですよね。そこで目をつけたのが、ピックアップバナーです。記事スライダーよりピックアップバナーのいいところ記事のアイキャッチみたいに内容を前面に押し出さないから、落ち着きが出る。トップに置くならやはりオシャレなほうがいい。自分のオススメしたい記事やカテゴリを見てもらいやすくなる。そんなわけで記事スライダーをやめてピックアップバナーにしました!設定の手数は確かにありますが、それほど難しいものではありません。この記事も若干ボリュームありますが、そこは丁寧に書いているからです(^_^*)超初心者向けに、画像を使ってとにかくわかりやすく解説しています。やってみてくださいね。そんな疑問を解消します。作り方はざっくりいうと4ステップ。STEP準備バナーとして使う画像を用意。リンク先にする記事やカテゴリを決める。画像をWordPressにアップロード。画像URLとリンク先URLをメモ帳アプリなどにコピペしておく。STEP新規メニューを追加メニューにはヘッダーメニューやフッターメニューなどありますが、そこに追加する形でピックアップバナーというメニューを作ります。画像URLと、記事やカテゴリなどのリンク先URLを、ピックアップバナーとして並べる項目(カスタムリンク)として指定します。STEPレイアウトやデザインを整える横に並べる個数やタイトル文字、装飾などを指定できます。「メモ帳アプリにコピペ」をやっておくと簡単です。ピックアップバナーの画像を作ります画像サイズは普段使っているアイキャッチの大きさでOKです。下の例は、フリー画像に文字を貼っただけです。複数のバナーを並べる場合、大きさがバラバラだと見た目がカッコよくないです。画像サイズは揃えた方がいいですね。あややんちなみに私は1200×630で作っていますよ【バナータイトルの文字】タイトル文字は、最後のデザインを整えるところで自動で入れることもできます。色や大きさ、形などの細かな設定はできませんが、手軽にオシャレにできます。【ファイル名のつけ方】ファイル名は短めで分かりやすい英語名をつけましょう。これはあとでアドレスとして使用するからです。日本語名だと自動変換されて意味不明な長い文字列になってしまいます。「メディアのアップロード」の画面を開きます。【画像のアップロード】1用意した画像をまとめて選択し、ドラッグ&ドロップ。「ファイルを選択」ボタンを押して選択してもOK2下の部分にサムネイルとファイル名が表示されればアップロード完了です。画像のURLとリンク先のページURLをメモしておくメニューを設定するときに「画像のURL」と「バナーをクリックした時の移動先のページURL」が必要になってきます。3画像URLというように、あらかじめ整理してメモ帳アプリ等にコピペしておくのをおすすめします。画像をクリックすると「添付ファイルの詳細」画面が開きます。「URLをクリップボードにコピー」をクリックすると、画像URLをコピーできます。バナー(項目)が複数ある場合は、同じ要領で全部コピペします。ピックアップバナーのメニューを作るプレビュー画面を確認しながら、ピックアップバナーを作っていきましょう。カスタマイザーを起動します上のほうにある「カスタマイズ」をクリック。メニューを新規作成します1「メニュー」をクリック(下の方です)。2「メニューを新規作成」をクリック。【入力画面】1【メニュー名】「ピックアップバナー」と入力。画像では説明用なので「ピックアップバナー(てすと」としています。2【メニューの位置】「ピックアップバナー」にチェックを入れます。これでピックアップバナーが設置準備完了です。ピックアップバナーの項目を作る続けて、ピックアップバナーの項目(中身)を追加していきましょう。「項目を追加」をクリックします。「カスタムリンク」を追加します「固定ページ」の上に「カスタムリンク」の項目があります。右端の▼をクリックして開きます(「固定ページ」が開いている場合は▲をクリックして閉じます)。準備でメモ帳アプリにコピペしたもの(例はこちら)を参照します。1【URL】リンク先のURLを入力します(メモの2段目)。ピックアップバナーをクリックした時の移動先ページのURLを指定しましょう。(例では「学習」のカテゴリーページのURLを入れました)2【リンク文字列】バナー(項目)のタイトルを入力します(メモの1段目)。(例ではバナーの画像名に使っている「learning」を入れました)「メニューに追加」ボタンをクリック。先ほど追加したカスタムリンク(例ではlearning)が表示されてます。同時に右のプレビュー画面にも、まだ画像のないピックアップバナーが表示されました。ここでようやく、準備した画像を使います!先ほど追加したカスタムリンク(上の画像赤枠)をクリック。カスタムリンクの詳細画面が開きます。【説明】のところに画像URL(メモ3段目)を貼り付けます。リンク先と画像が食い違わないように気をつけましょう。「公開」ボタンを押して必ず保存しましょう。これで項目の追加は完了です。複数ある場合は同じ手順を繰り返します。↓クリックで手順の初めに戻れます。>>さらに項目を追加カスタマイザを閉じる前に、カスタマイザ右上の「公開」ボタンを押すのを忘れないようにしましょう。ピックアップバナーのレイアウト・デザイン次はトップページを見ながら、レイアウトやデザインを整えます。カスタマイザの最初の画面に戻ってください。戻り方カスタマイザの上のほうにある左向きの「<」(戻るボタン)を2回押す。一度カスタマイザを閉じてもう一度開く。あややんあとちょっとです!頑張っていきましょ!カスタマイザの最初の画面から説明します。1「トップページ」をクリック。次の画面で「ピックアップバナー」をクリック。選択するとすぐに右の画面に反映されるので、プレビューを見ながらお好みのレイアウトを選べます。下の青枠で囲ったアイコンで、タブレットやスマホでのプレビューを確認します。」パソコン用の表示です。バナーが3つ以下でも4列用の大きさに縮小されます。バナーが2つ以下でも3列用の大きさに縮小されます。バナーが3つの場合は改行され、3つ目は中心に配置されます。フレックス(横一列に全て並べる)2「バナーレイアウト(SP)」スマホ用の表示です。バナーが3つの場合は改行され、3つ目は中心に配置されます。固定幅1列スライド(横スクロール可能に)3「バナータイトルのデザイン」カスタムリンク追加時に入力した「リンク文字列」を、バナータイトルとして画像に重ねて表示できます。......すでにタイトルなどの文字を画像に入れてるならコレ。......白ベース。画像が暗い方が見やすい。......白ベース。画像が暗い方が見やすい。画像が暗い方が見やすい。画像が暗い方が見やすい。下にワイド表示...黒ベース。画像が明るくても大丈夫。3で明るい画像に白ベースのタイトルを入れる場合に。設定が完了したら、上の「公開」ボタンを押して保存することを忘れずにね♪ピックアップバナーの作り方のまとめお疲れ様でした!もう一度さっくりとおさらいしておきましょう。手順はこの4ステップでした。ピックアップバナープレビューを確認しながら調整あややん楽しいブログ作成の手助けとなれたなら幸いです。最近はイラストがアツい。ゼロから学んでおうちで稼ぐ図解デザイナー兼イラストレーター。