ホーム ≫ サイドバナーを編集する ≫
[ケーススタディ]
サイドバナーを設置する
(画像編)
ケーススタディ
協力会社様のバナーを設置し、クリックすると該当の会社のサイトが表示される
事前準備
1.バナーに画像を設置する
![bannerarea02](http://da2d2y78v2iva.cloudfront.net/4761/170062814672301.png?_=1700628951)
※1カラム、レスポンシブの場合、バナーエリアはサイト下部になります。
![サブメニュー05_コピー](http://da2d2y78v2iva.cloudfront.net/4761/158177084811101.png?_=1581770848)
![banner1](http://da2d2y78v2iva.cloudfront.net/4761/163909877266502.png?_=1639113289)
2.表示させたい画像を選択する
![banner3](http://da2d2y78v2iva.cloudfront.net/4761/163909877266504.png?_=1639098773)
表示させたい「画像」をクリックすると、「No image」に画像が入ります。
「画像にリンクを張らない場合」は次へ、「画像にリンクを張る場合」は下記をクリックしてください。
![banner4-2](http://da2d2y78v2iva.cloudfront.net/4761/163911317781401.png?_=1639113177)
「画像クリック設定」の下向き矢印をクリックして、「何もしない」を選択します。
「登録」ボタンをクリックします。
![otukaresamadesita](http://da2d2y78v2iva.cloudfront.net/4761/157761637720201.png?_=1577616377)
3.バナーのリンクを変更する
![bannerarea02](http://da2d2y78v2iva.cloudfront.net/4761/170062814672301.png?_=1700628951)
サイトの右もしくは左にあるバナーが表示されているエリアをクリックします。
※1カラム、レスポンシブの場合、バナーエリアはサイト下部になります。
![banner5-2](http://da2d2y78v2iva.cloudfront.net/4761/163911616767601.png?_=1639116176)
リンクを設定したいバナー画像の右の「編集」をクリックします。
![banner4-2](http://da2d2y78v2iva.cloudfront.net/4761/163911317781401.png?_=1639113177)
4.リンク先を指定する
![naibulink](http://da2d2y78v2iva.cloudfront.net/4761/168775060007201.png?_=1687751596)
「リンク先選択」から「ページ」または「ブログカテゴリ」を選択し、
「ページ選択」から、リンクさせたい「ページ」、または、「ブログカテゴリ」を選択し、
「登録」ボタンをクリックします。
![banner4-3](http://da2d2y78v2iva.cloudfront.net/4761/163911627595401.png?_=1639116283)
※外部サイトにリンクを張りたい場合
「リンクを新規ウィンドウで開く」にチェックを入れてください。
「リンク先URL」下部の「https://」に先にコピーしておいた外部サイトのURLを貼り付け、「登録」します。
リンク先のファイル名は必ずコピー&ペーストしてください。スペルミスなどの誤りがあると、正しく表示されません。
5.リンク動作を確認する
![プレビュー_コピー](http://da2d2y78v2iva.cloudfront.net/4761/157769553528401.png?_=1577695535)
編集画面右上の「プレビュー」ボタンにマウスを乗せると、「パソコン」と「スマートフォン」メニューが表示されます。
ここでは、パソコンで確認します。
画像をクリックしたときに、新しいウィンドウで外部サイトが表示されれば、リンク設定は完了です。
![otukaresamadesita](http://da2d2y78v2iva.cloudfront.net/4761/157761637720201.png?_=1577616377)