Relation 高度な設定

高度な設定

LINEボタン：画面下にLINEボタン表示（メッセージAppとの併用不可）

ショップ画面上からいつでもチャットでのお問い合わせをできるのが「メッセージApp」です。その「メッセージApp」と同じような表示方法でLINE公式アカウントへのリンクを表示する機能です。

LINEアカウントは管理画面のショップ情報で登録します。タップするとLINEが開き、まだ友達ではない場合は友達追加、すでに友達の場合はトークが開きます。

「メッセージApp」とはボタン表示が重複するため併用はできません。どちらか一方のみを利用してください。

Instagramフィードの表示

デザイン設定項目の下の方に、「【Instagram】インスタ埋め込みコード」という欄があります。ここにInstagramの埋め込みコードを貼り付けられるようになっています。

しかしながら2020年現在、Instagramは最新フィードを表示するための貼り付けコードを利用者に提供していません。
そのため、自分のウェブサイトにInstagaramフィードを埋め込むには、個々でプログラミングをするか、それ専用の別のサービスを介して行う必要があります。

Instagaram埋め込みサービスはいろいろありますが、1例として「Snapppt」というサービスを利用して方法を紹介します。

Snappptについて

SnappptはオンラインストアでのInstagramフィード表示に特化したサービスで、投稿写真ごとに商品購入ページへのリンクをつけたり、またそこからの購入記録などを解析することができるサービスです。

フィードをカスタマイズする機能に幅があり、登録やシンプルな埋め込みコードの作成はフリーアカウントでも利用でき、よりカスタマイズして利用する「PRO」機能などは有料、という形で運営されています。

Snappptは独立したサービスであり、このテンプレート、またBASE本体と直接関連している訳ではありません。今後Instagramの仕様変更、またSnappptのサービス変更などによって、できることが変わっていく可能性があります。
どのサービスを利用する場合も、まずご自身でどんなサービスなのかを理解し、ご自身の責任でアカウントを作成し、もし問題があればそのサービスサポートに直接聞く、という前提で利用してください。

1. Snappptアカウントを作成する

まずはSnappptの公式ページ（https://snapppt.com）へアクセスし、「GET STARTED」のボタンをクリックします。

Instagramのユーザー名、名前、メールアドレス、Snappptアカウント用のパスワードを設定し、サインアップします。

次にInstagramのログイン画面になりますのでログイン。そしてSnapptがInstagramの情報を取得してよいかどうかの確認画面となりますので、「Authorize（認証）」ボタンを押します。

同時に、最初の画面で入力したメールアドレスに「Confirm your Snapppt email（メールアドレスの確認）」というタイトルのメールが届きます。メールを開き、「CONFIRM EMAIL」ボタンをクリック。

アカウントの作成が完了し、自分のフィード画面が表示されます。

2 埋め込みコードを取得する

右上のナビ「SHOP THE FEED」にはいくつかのフィードの種類が表示されます。

埋め込み方法その１： 最新の投稿フィードを表示させる（常に最新投稿を自動表示）

ここではシンプルにInstagramに投稿した画像を新しいものから自動的に表示する「LIVE FEED GALLERIES」を利用します。

「Live Instagram feed」画面では、左側に設定項目、右側でプレビューが表示されます。角設定項目は「レイアウト、テーマ、行数、列数、写真ごとの間隔、角丸」といった項目があります。好みがありますので、いろいろな設定を試してみてください。

英語の意味：「Rows（行数）」「Columns（列数）」「Gutter width（写真間の隙間）」「Outer margin（全体の外側スペース）」「Round corners（角丸）」「Zoon on Hover（マウスオンでズームするか）」

「Embed Heading（見出し）」、「Sub heading（小見出し）」は空欄のほうがシンプルで綺麗に表示されます。

画面の下に、設定を反映した「embed code（貼り付けコード）」が生成されます。このコードを自分のサイトに貼り付けることで、プレビューで見ていたフィード一覧がサイト上に表示されます。

コードをコピーし、デザイン編集画面の下の方にある「【Instagram】インスタ埋め込みコード」にペースト、保存してサイトを確認してください。

埋め込み方法その２：選んだ投稿だけを固定して表示させておく

最新フィードではなく表示したい写真を選び、写真ごとに商品購入画面へのリンクを設定していくことができます。

その場合、右上のナビ「SHOP THE FEED」から「SHOPPABLE GALLERIES」を選ぶと、いわゆる「購入可能なギャラリー」の作成、埋め込みコードの作成ができます。

その他、詳しい機能は公式ヘルプサイトを参照してください。

Add Shoppable Gallery to any page of your website

3. Instagramアカウントへのリンク

Instagram写真一覧の下にはInstagamアカウントとともに、アカウントへのリンクが表示されます。

これはBASEの「ショップ設定 > ショップ情報 > SNS設定 > Instagram」の欄に設定したアカウントと連携しています。

Snappptの無料ウィジェットからは直接アカウント先にリンクはできないため、こちらのリンクでアカウントを見つけられるようにしています。

4. Snappptで分からないことがあれば

Snappptは常にアップデートもされ、使い方も変わってる可能性があります。詳しい使い方は自分で「Snapppt」を検索する、また英語ですがSnappptのサポートに問い合わせてください。

テンプレートのマニュアルでご紹介するためにSnappptサポートチームにいろいろと相談しましたが、とてもフレンドリーなスタッフが素早く対応してくれますよ。

Instagram埋め込みの基礎知識

1. 写真からのリンク先がInstagramアカウントにならない

最初にも解説したとおり、Instagramから直接埋め込みウィジェットを作成できないため、埋め込みをサポートするサービスが存在しています。もしInstagramに直接リンクさせたい場合、PROアカウントで利用すればできると思いますので、ご自身のビジネスの必要性に応じて検討してみてください。

その点で、Snappptは無料ででもフィードのデザイン自由度が高く、また埋め込まれた写真からのリンク先が完全な外部リンクではなくサイト上での拡大であったり、かなり良心的なサービスだと思います。もちろんより良いものを見つけた方はそちらを利用してください。

テンプレートは埋め込みコード挿入欄を用意しているだけなので、Snappptに限らず利用可能です。

2. 貼り付け方がここで説明されているのと違う！

InstagramもSnappptも独立した別サービスなので、いつ変更があってもおかしくはありません。

Base Design Infoのサポートフォーラムでその旨教えていただければ、マニュアルの内容をアップデートします。

WEB専用透過ロゴ

このテーマではロゴ画像をオリジナル写真に重ねて表示するデザインのため、透過ロゴを使ってデザインしたい場合もあると思います。

ロゴ画像はBASE純正の「ショップロゴ」から設定できますが、この画像はBASEのアカウント画像として、BASEアプリなど幅広く利用されます。そのため、もしこのテーマのトップページに合わせた白抜きの透過ロゴを設定した場合、BASEアプリ上では真っ白で何も見えない状態になってしまいます。

そのような場合のため、「このテーマ専用のロゴ」を設定できます。

【上級者向け】WEB専用透過ロゴ

ここに設定したロゴ画像は、このテーマだけで優先して採用されます。透過PNGを使う場合はここに透過画像を、BASE純正「ショップロゴ」には白背景でも読み取れるロゴを設定しておきます。

独自のOGP画像を追加

BASEではOGPも自動生成されます。商品ページがシェアされた場合、商品画像や商品説明が。商品ページ以外では、ショップロゴ画像やショップ説明が自動的に生成されます。

アップロードした画像は商品ページ以外のOGP候補として追加されます。商品ページでは引き続き商品画像が利用されます。

OGPの扱われ方は、SNS側のルールよって異なります。適正なサイズなどはその時々でお調べください。

「OGP」とは、FacebookやTwitterでシェアされた時にプレビューとして表示される画像や説明文のことです。
（一般的な用語ですので、ここでは詳しい説明は省略します。分からない場合は検索エンジンで「OGPとは」などと検索してください。）

【上級者向け】HTMLヘッダー追加コード（サーチコソール所有権確認などに）

サイトのHTMLヘッダー内にHTMLタグを追加できます。

Google Search Consoleにてサイトの所有権確認を行うには、Search Consoleのダッシュボードから出力される「HTMLタグ」を選択し表示されるメタタグをコピー、そのままこの設定欄にペーストし保存します。そしてSearch Consoleの画面に戻り画面下部に表示されている「確認」ボタンをクリックして下さい。「(URL) の所有権が確認されました。」と表示されれば確認は完了です。

ここに記述したコードがそのままHTMLのヘッダータグ内に記述されますので、HTMLタグとして完全に不具合のない正しいコードのみを記述してください。不具合のあるコードが含まれるとサイト全体が正常に表示されなくなる可能性があります。

Google Search Console自体の機能、利用方法はサイトオーナー様自身にて十分に理解した上でご利用ください。
Search Console ヘルプ > サイトの所有権を確認する　https://support.google.com/webmasters/answer/9008080?hl=ja

独自スタイルシート

デザイン編集画面の項目として、独自スタイルシートを入力できます。入力したCSSは継承の最終指定として上書きされます。

ここに入力するメリットは、「デザイン編集の設定値」として別保管されるため、テーマがアップデートされてもそのまま適用されることです。組み込みスタイルシートの中には「!important」を指定しているものもあります。ディベロッパーツールなどを利用して検証してください。

BASEデザイン機能の仕様上、テキスト欄の最大文字数は1000文字となっています。1000文字を超える程のまとまったCSSがある場合は別ファイルにまとめてどこかのサーバにアップして読み込みか、HTMLヘッダーの中に直接記述してください。

【スマホ】ナビバーを上部固定する

ナビバーとは、「アクセントカラーを背景としたロゴ+メニューアイコンの上部バー」を指します。スマホレイアウトにて、初期値のOFFではナビバーはスクロール式になっていますが、スマホレイアウトにてナビバーを画面上部にくっつけたままにすることができます。

画面の下の方に移動しても常にナビバーを表示させたい場合に有効です。しかしナビバーを開いた状態でも固定された状態ですので、もしカテゴリーAppを利用していてカテゴリー数が非常に多い場合、カテゴリー項目が画面から見切れてしまいます。そのような場合は「OFF」のままを推奨します。

カテゴリーを使わない、またカテゴリー数が少なく、「ON」にしても問題ないことをプレビューで確認の上、「ON」をご利用ください。

スマートフォン用デフォルトテーマ設定

このテーマはレスポンシブデザインで設計されています。このデザインのテイストを保ったまま、画面サイズに応じて自動的にレイアウトが変化して見やすい状態になります。

「スマートフォン用デフォルトテーマ設定」をONにすると、スマホ時にはテーマを無視して「BASEの共通モバイルデザイン」で表示されます。この状態ではテーマは一切関係しない状態になります。一般的なショップの場合はどちらでも画面構成的にはさほど変わらないのでどちらでも大きな問題はありませんが、このRelationテーマではページ構成に大きな特徴があるため、デフォルトテーマをONにすると全く異なるサイトに見えてしまいます。そのため「デフォルトテーマを使用する」はOFFを推奨します。

---