![](https://wp-tm.com/cms/wp-content/uploads/2023/04/643ff993a3b1a.jpg)
InstagramをBASEに埋め込めるテンプレート【April】
InstagramのタイムラインをBASEに埋め込むことができるので、インスタの更新とともにBASEで作ったショップのトップページも更新できます。
こだわりの商品を美しく見せるためにレイアウトや動きにこだわりつつ、しっかり商品をアピールできるテンプレートです。
![](https://wp-tm.com/cms/wp-content/uploads/2023/11/base_tmn_4.png)
2パターンの選べるメインビジュアル
写真が流れるおしゃれなメインビジュアルと、定番のスライドの2パターンから選べます。1つのテンプレートで切り替えられるので、キャンペーン中だけはスライダーに・・・などの使い分けも可能です。
■デモサイト
https://noema.base.shop/
https://noema.base.shop/
使い方
BASE管理画面 > テーマ設定 より各設定を行います
文字スタイル
ゴシック/明朝体/丸ゴシックから選択
デフォルト:ゴシック
トップページ
メインビジュアル(ON:自動横スクロール OFF:スライダー)
メインビジュアルの切り替えをします。
自動横スクロール
スライダー
メインビジュアル テキスト
背景に色を敷きたい場合はテキストを<span></span>で囲ってください。
複数行の場合は行ごとに囲ってください。
▼背景色なし
![](https://wp-tm.com/cms/wp-content/uploads/2023/10/cd37bfa581f91794bc1c295fdb69c7a9.png)
![](https://wp-tm.com/cms/wp-content/uploads/2023/10/cd37bfa581f91794bc1c295fdb69c7a9.png)
▼背景色あり
![](https://wp-tm.com/cms/wp-content/uploads/2023/10/6c0d6a0e80da160d8000d62f4e801c8c.png)
![](https://wp-tm.com/cms/wp-content/uploads/2023/10/6c0d6a0e80da160d8000d62f4e801c8c.png)
リンクエリア
最大「上3列下3列(PC版)」の画像+リンクを表示できます。
上の列を表示するためには「リンクエリア1:URL」、下の列を表示するためには「リンクエリア4:URL」を入力してください。
登録する個数を調整し様々なレイアウトで表示できます。
画像サイズ 横:縦=1:0.6 で表示されます。それ以外の比率やバラバラのサイズで画像を入れても自動で調整されます。
●レイアウト例(PC版)
上3列下3列
![](https://wp-tm.com/cms/wp-content/uploads/2023/10/8d11a8e114b61b9206fda20add71fcc7.png)
![](https://wp-tm.com/cms/wp-content/uploads/2023/10/8d11a8e114b61b9206fda20add71fcc7.png)
上2列下3列
![](https://wp-tm.com/cms/wp-content/uploads/2023/10/5026b7e82150d16f4d30a29cfd98c3be.png)
![](https://wp-tm.com/cms/wp-content/uploads/2023/10/5026b7e82150d16f4d30a29cfd98c3be.png)
上2列下2列
![](https://wp-tm.com/cms/wp-content/uploads/2023/10/b2f0b993c3047e8109122d995e276cd2.png)
![](https://wp-tm.com/cms/wp-content/uploads/2023/10/b2f0b993c3047e8109122d995e276cd2.png)
上2列下3列
![](https://wp-tm.com/cms/wp-content/uploads/2023/10/6a49116e2050107cf43f14207d562d52.png)
![](https://wp-tm.com/cms/wp-content/uploads/2023/10/6a49116e2050107cf43f14207d562d52.png)
上1列下2列
![](https://wp-tm.com/cms/wp-content/uploads/2023/10/fcb89cb971df4011288620fe31a1d662-1.png)
![](https://wp-tm.com/cms/wp-content/uploads/2023/10/fcb89cb971df4011288620fe31a1d662-1.png)
Instagram(インスタ)タイムラインの表示
Instagramのタイムラインを表示します。
●Instagramタイムライン(表示) → ON
●nstagram(ビジネスアカウントID)(トークン)を入力
取得方法はこちらをご覧ください
表示数:PC 最新8件 モバイル6件
固定バナー
![](https://wp-tm.com/cms/wp-content/uploads/2023/04/9d7aab7dc7208ad74be763deafe7d03b-740x1024.png)
BASEで作成したECショップに、固定バナーを表示します。
位置は右下に表示されます。
位置は右下に表示されます。
![](https://wp-tm.com/cms/wp-content/uploads/2023/04/3f559e2a6ee27fe0623d50e53908d957.png)
●右下固定バナー(画像)(URL)を設定
表示サイズ(自動でリサイズされます) PC:200px モバイル:120px
デモサイトではあらかじめ背景を透過した円形の画像を設定しています。
表示サイズ(自動でリサイズされます) PC:200px モバイル:120px
デモサイトではあらかじめ背景を透過した円形の画像を設定しています。