今回は私が愛用しているWordPressの有料テーマであるSWELLの使い方を紹介します
今回私が紹介するのはトップページのメイン画像の下に指定したカテゴリーへ飛べるバナーを作成する方法です
実際のイメージはこんな感じです(赤枠部分が実際のバナー)
![](https://corydorasshow.com/wp-content/uploads/2021/02/名称未設定のデザイン-6-1024x576.png)
これがあるとあなたが特に力を入れていて読んでもらいたいカテゴリーへと誘導できるようになります
ちなみにこのバナーの正式名称は「ピックアップバナー」というようです
それではさっそくこのピックアップバナーの設置方法について詳しく説明していきます
ピックアップバナーを作成する
まずは、WordPressの管理画面の「外観」>「メニュー」をクリック
![](https://corydorasshow.com/wp-content/uploads/2021/02/名称未設定のデザイン-7-1024x576.png)
「新しいメニューを作成しましょう」をクリック
![](https://corydorasshow.com/wp-content/uploads/2021/02/3-2-1024x576.png)
「メニュー名」欄にメニュー名を記入(なんでもいいです)し、下の「ピックアップバナー」にチェックを入れて
「メニューを作成」をクリック
![](https://corydorasshow.com/wp-content/uploads/2021/02/4-2-1024x576.png)
新しくメニューが作られたらこのような画面が開くので、
ピックアップバナーを作成したい「カテゴリー」にチェックを入れ、「メニューに追加」をクリック
![](https://corydorasshow.com/wp-content/uploads/2021/02/5-2-1024x576.png)
そうすると真ん中にカテゴリーが追加されます
![](https://corydorasshow.com/wp-content/uploads/2021/02/6-1-1024x576.png)
「カテゴリー」の文字の隣にある▼をクリックすると中身が展開されます
そうしたら、「ナビゲーションラベル」につけたい名前を入力します(ここで付けた名前は後でバナーの隅に付けることもできます(今回は「サンプル」としておきます)
![](https://corydorasshow.com/wp-content/uploads/2021/02/7-1-1024x576.png)
入力が終わったら画面下の「ピックアップバナー」にチェックを入れて画面右上の「メニューを保存」をクリックします
![](https://corydorasshow.com/wp-content/uploads/2021/02/8-1-1024x576.png)
![](https://corydorasshow.com/wp-content/uploads/2021/02/9-1024x576.png)
メニューが保存されたら、一度確認を行います
画面左上の「ライブレプビューで管理」をクリックします
![](https://corydorasshow.com/wp-content/uploads/2021/02/10-1024x576.png)
ライブプレビューを開くとこのように実際のサイトが表示されるので、下図の赤枠のようにバナーの領域が確保されていればOKです
![](https://corydorasshow.com/wp-content/uploads/2021/02/11-1024x576.png)
ピックアップバナーに画像を挿入する
続いてこの領域に画像を挿入していきます
やり方は一度メニューバーのところに戻り(先ほどの状態からブラウザの戻るボタンを押せばこの画面に戻れます)、▼をクリックして中身を展開します
そして、展開すると出てくる「説明」欄に画像のリンクを貼ります
![](https://corydorasshow.com/wp-content/uploads/2021/02/12-1024x576.png)
※この段階で「説明」欄がない場合は次の作業を行ってください
画面右上の「表示オプション▲」をクリック
![](https://corydorasshow.com/wp-content/uploads/2021/02/18-1024x576.png)
そうすると上からチェックボックスが展開されます
その中の「説明」にチェックを入れればOKです
![](https://corydorasshow.com/wp-content/uploads/2021/02/19-1024x576.png)
とは言え画像のリンクの調べ方が分からないと思うので説明します
まずは、画面左の「メディア」>「ライブラリ」を新しいタブで開きます
![](https://corydorasshow.com/wp-content/uploads/2021/02/13-1024x576.png)
開くとおなじみのこの画面が出てくるので、ピックアップバナーに利用したい画像をクリックします
![](https://corydorasshow.com/wp-content/uploads/2021/02/14-1024x576.png)
クリックするとこのようなポップアップが開くので、右下の「URLをクリップボードにコピー」をクリックします
するとクリップボードに使用する画像のURLがコピーされます
![](https://corydorasshow.com/wp-content/uploads/2021/02/15-1024x576.png)
今度は今コピーした内容を先ほど述べた「説明」欄に貼り付ける作業を行います
先ほどのタブに戻り「説明」欄に「貼り付け」を行います
![](https://corydorasshow.com/wp-content/uploads/2021/02/16-1024x576.png)
貼り付けができたら先ほどと同じ手順で、「メニューを保存」>「ライブプレビューで管理」の順にクリックし
下の図のように画像が表示されればOKです
さらにこの画像をクリックしてみて設定したカテゴリーに飛ぶかも確認してください
できていればピックアップバナーの完成です
![](https://corydorasshow.com/wp-content/uploads/2021/02/17-1024x576.png)
複数作りたい場合はこの作業を繰り返せば何個も作成できます
今回紹介した作業は「SWELL」の公式ページにも載っています
コメント