各種バナーパーツを使って簡単に設定ができます!
ビーノのトップページ編集画面より各種バナーパーツを追加することで、簡単に特集ページへのリンクを設定することができます。
それでは、早速、具体的な操作方法をわかりやすく解説いたします!
本記事では、特集ページが作成済みであることを前提としております。
そのため、まだ、特集ページを作っていないよという方は、以下に詳細な説明ページがございますので、ぜひご覧ください!
トップページで特集ページへのリンクバナーを設定する手順
1. メニュー選択画面で「PCトップページを作る」をクリック
![Step 1 screenshot](https://images.tango.us/workflows/c09d9e0f-7633-4406-a625-b7a6cc84c57f/steps/7e16313b-00b7-417d-be76-bf8fb2f6a1bd/f07ca16c-9c8b-4d1e-b529-0917aa33298e.png?crop=focalpoint&fit=crop&fp-x=0.1593&fp-y=0.6692&fp-z=1.8746&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=96&mark-y=193&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz01MjUmaD00NzImZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D)
2. 「パーツを追加する」をクリック
![Step 2 screenshot](https://images.tango.us/workflows/c09d9e0f-7633-4406-a625-b7a6cc84c57f/steps/a093e4ae-a347-466c-a0ae-43ba039eea9f/c2c78528-303d-4585-b7fb-6b26ee0a9548.png?crop=focalpoint&fit=crop&fp-x=0.0976&fp-y=0.1717&fp-z=2.0389&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=6&mark-y=249&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz00NjYmaD0xMDMmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D)
3. リンクバナーを表示したいエリアを選択
※ここでは、例として「ヘッダー」を選択します。
![Step 3 screenshot](https://images.tango.us/workflows/c09d9e0f-7633-4406-a625-b7a6cc84c57f/steps/d5b4aeec-11c2-4e56-b208-184d98ab862c/d285be77-d50a-4e32-833f-adb60171af71.png?crop=focalpoint&fit=crop&fp-x=0.0938&fp-y=0.4482&fp-z=1.9886&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=55&mark-y=256&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0zMzkmaD0zNDYmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D)
4. 「各種バナー」をクリック
![Step 4 screenshot](https://images.tango.us/workflows/c09d9e0f-7633-4406-a625-b7a6cc84c57f/steps/099160fa-90ad-448b-9ac2-cc1821c19080/e4ebd017-95c3-462e-b858-4aa5f217bb2c.png?crop=focalpoint&fit=crop&fp-x=0.0497&fp-y=0.3738&fp-z=2.2898&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=7&mark-y=295&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0yNjAmaD0yNjkmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D)
5. バナーの表示タイプを選ぶ
※例として、1枚のバナーを大きく表示する「固定×1」を選びます
![Step 5 screenshot](https://images.tango.us/workflows/c09d9e0f-7633-4406-a625-b7a6cc84c57f/steps/cdb12041-9f50-4f1d-a924-d7a528165d4e/0c9b15b0-a1e6-4b56-bc30-f8e49bef715e.png?crop=focalpoint&fit=crop&fp-x=0.0495&fp-y=0.3818&fp-z=2.2985&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=9&mark-y=296&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0yNTYmaD0yNjYmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D)
6. 「画像を追加する」をクリック
![Step 6 screenshot](https://images.tango.us/workflows/c09d9e0f-7633-4406-a625-b7a6cc84c57f/steps/e32ec65e-b88d-4e11-ab20-3b4e5599cdfd/36c84ff1-9999-4b4c-a6b0-6dd90dc8eddd.png?crop=focalpoint&fit=crop&fp-x=0.1467&fp-y=0.7991&fp-z=2.6231&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=334&mark-y=388&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0yNTYmaD04MyZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw)
7. 「画像選択」をクリック
![Step 7 screenshot](https://images.tango.us/workflows/c09d9e0f-7633-4406-a625-b7a6cc84c57f/steps/1bf918de-1cc0-4c58-89cc-b8978106d63c/439fa1dc-39e7-4b2a-9556-89bc4e5cad23.png?crop=focalpoint&fit=crop&fp-x=0.1035&fp-y=0.8079&fp-z=2.8122&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=255&mark-y=385&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0xODgmaD04OSZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw)
8. 表示したいバナー画像を選ぶ
特集ページへ誘導(リンク)させるためのバナー画像を選びましょう。
ビーノが提供しているバナーを利用する場合は「無料提供バナーを選択」を選びます。
他にもPC内の画像や楽天Cabinet内の画像もお選びいただけます!
![Step 8 screenshot](https://images.tango.us/workflows/c09d9e0f-7633-4406-a625-b7a6cc84c57f/steps/e91c1439-a913-484b-b3e0-b75e31873488/1dfa4706-3270-434c-9db7-304714f0a27d.png?crop=focalpoint&fit=crop&fp-x=0.1814&fp-y=0.1224&fp-z=1.9317&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=168&mark-y=149&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz01MDUmaD0xMDgmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D)
9. フォルダを選択する
例えば、無料提供バナーから選択する場合、「楽天キャンペーン用」などをクリックします。
![Step 9 screenshot](https://images.tango.us/workflows/c09d9e0f-7633-4406-a625-b7a6cc84c57f/steps/8e8a1f8f-15c0-4c7d-9d79-89f12aa12abd/f180291b-1b6f-4769-8779-6069c206a05b.png?crop=focalpoint&fit=crop&fp-x=0.1845&fp-y=0.1896&fp-z=1.9556&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=185&mark-y=264&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz00OTYmaD0xMDkmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D)
10. お好きなバナー画像をクリック
フォルダを選択すると、右側に該当フォルダへ保存されている画像が一覧で表示されます。
リンクバナーとして表示したい画像をクリックして選びましょう!
![Step 10 screenshot](https://images.tango.us/workflows/c09d9e0f-7633-4406-a625-b7a6cc84c57f/steps/6f22b1e0-f40f-4f97-8e66-c87f69d02513/7d28e652-7a0e-4bf4-893f-6b6110010d8b.png?crop=focalpoint&fit=crop&fp-x=0.5085&fp-y=0.5488&fp-z=2.2526&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=405&mark-y=385&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0zODkmaD04OCZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw)
11. リンク先入力欄の右側にある「▼」をクリック
![Step 11 screenshot](https://images.tango.us/workflows/c09d9e0f-7633-4406-a625-b7a6cc84c57f/steps/e5d86e3b-44a9-42d6-95e7-46be3ff1d1a1/18a7f42e-4ec7-4372-bce2-28d5a149163e.png?crop=focalpoint&fit=crop&fp-x=0.1658&fp-y=0.6883&fp-z=3.0233&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=545&mark-y=380&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0xMTAmaD05OSZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw)
12. リンクさせたい特集ページを選ぶ
※公開(反映)済みの特集ページのみ表示されます。
未公開(未反映)の特集ページは表示されませんため、ご注意ください。
![Step 12 screenshot](https://images.tango.us/workflows/c09d9e0f-7633-4406-a625-b7a6cc84c57f/steps/836f6930-07ac-45f2-a071-3321718d8518/21cdf5ae-af1b-4fe7-949d-2547288c021b.png?crop=focalpoint&fit=crop&fp-x=0.1216&fp-y=0.7453&fp-z=2.3884&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=179&mark-y=390&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0zNDAmaD03OSZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw)
13. 「決定」をクリック
![Step 13 screenshot](https://images.tango.us/workflows/c09d9e0f-7633-4406-a625-b7a6cc84c57f/steps/bafd0fc5-df00-477b-a8e1-c012906ed632/d26b21c4-1b2c-4038-8aab-bb25930273a6.png?crop=focalpoint&fit=crop&fp-x=0.1461&fp-y=0.9562&fp-z=2.6042&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=325&mark-y=709&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0yNjImaD0xMDImZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D)
14. 「反映する」をクリック
最後に「反映する」より「作成して公開へ」をクリックして、公開済みのトップページを更新しましょう。
![Step 14 screenshot](https://images.tango.us/workflows/c09d9e0f-7633-4406-a625-b7a6cc84c57f/steps/0386673f-2f2b-4266-b233-ed993afa5edc/960dc45f-f634-4cfe-9d9b-3b3f5959318c.png?crop=focalpoint&fit=crop&fp-x=0.1404&fp-y=0.5278&fp-z=2.5544&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=290&mark-y=374&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0yODAmaD0xMTAmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D)
バナーへ「表示期間」を設定する場合
リンク先URLの設定欄下部にある「表示期間」をクリックすることで、バナー画像へ表示期間を設定することができます。
表示期間のご設定方法は以下よくあるご質問ページをご確認ください。
https://lab.biiino.com/faq/pc-toppage/banner-display-period-setting/
まとめ
いかがだったでしょうか?
一見難しそうに見えるページのリンク設定も、ビーノを使うとリンクさせたい特集ページを選ぶだけで、とても簡単に設定できることがおわかりいただけたかと思います。
「もっとここを教えてほしい」というときやその他ご質問がございましたら、ご遠慮なくカスタマーサポートにご連絡してくださいね!
関連キーワード 反映方法 公開方法 公開手順