#6その他設定

Instagramフィードを表示する

こちらを参照して設定していきます。

https://basedesign.info/universe/pages_instagram.php


スクロール時にふわっと表示

ONにするとサイト全体の画像や要素がフワッと表示されます。


デザイン設定でアップロードするロゴ画像は、BASEアカウントのアイコンや、カート画面でも表示されます。

もしこのテーマデザイン特有の理由でロゴを白抜きの透過画像に設定していた場合、BASEアカウントの画像やカート画面ではロゴが白くて見えないという状況になる場合があります。

そのような場合、基本設定としてのロゴ画像は汎用性のある通常ロゴにしておき、このテーマでだけ適用するロゴ画像として白抜きの透過画像を設定しておくことができます。


独自のOGP画像を追加

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

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

💡

OGPの扱われ方は、SNS側のルールよって異なります。適正なサイズなどはその時々でお調べください。「OGP」とは、FacebookやTwitterでシェアされた時にプレビューとして表示される画像や説明文のことです。(一般的な用語ですので、ここでは詳しい説明は省略します。分からない場合は検索エンジンで「OGPとは」などと検索してください。)


titleタグ補充テキスト

HTMLの<title>タグの語尾に、任意のテキストを追加します。

BASEでは「管理画面 > ショップ情報 > ショップ名」で設定した名称を「ショップ名」として、トップページでは「ショップ名」、商品ページでは「商品名 | ショップ名」、カテゴリーページでは「カテゴリー名 | ショップ名」が自動的に入ります。

この「titleタグ補充テキスト」機能では、その全ての語尾に入力したテキストが追加されます。

例えば「軽井沢の自家製天然酵母パン」と入力した場合、

  • トップページ  :「ショップ名 軽井沢の自家製天然酵母パン」
  • カテゴリーページ:「カテゴリー名 | 軽井沢の自家製天然酵母パン」
  • 商品ページ   :「商品名 | ショップ名 軽井沢の自家製天然酵母パン」

のように表示されます。

ここでは、まずはショップ名に何が入っているかを認識してください。

  1. ショップ名が単にショップ名、ブランド名にしている場合:例えば「Edition」というショップ名であった場合、それが何のお店かは表現していません。そのような場合、上記の例のように地名や商品名を追加するとより有為なタイトルになります。つまり、検索キーワードで「軽井沢 天然酵母パン」などという検索に対して効果がある可能性があります。
  2. BASEの設定でショップ名自体に「軽井沢の自家製天然酵母パン Edition」としている場合、それで十分に有為なタイトルを生成できていることになり、この「titleタグ補充テキスト」機能を利用する必要はありません。

注意しなければいけないのは、SEOの目的で欲を出しすぎてタイトルタグに不用意に長いテキストを入れてしまうことは、逆効果になってしまうということです。

これらの仕組みをよく理解した上で、もし上の例で1.のような場合に「titleタグ補充テキスト」機能を利用して、全てのページに適切なタイトルになるように設定してください。

検索エンジンを意識しないとしても、検索結果に表示されるタイトルを適切にすることで、より多くのユーザーの利便性を確保することにつながります。

💡

Googleなどの検索エンジンにとってタイトルタグがどのような意味を持つかは常に曖昧です。SEOを意識しすぎず、あくまで「ショップのことを正しく表す最も短い表現」を意識してタイトルを見直してみましょう!

💡

「検索キーワード(keyword)」や「ページ説明(description)」をカスタマイズできる「SEO設定App」も合わせて活用しましょう。


HTMLヘッダー追加コード

この機能は「HTMLタグ管理App」で対応できます。

サイト内全ページのHTMLヘッダー内にHTMLタグを追加できます。この機能はGoogle Search Consoleでのサイトの所有権確認をすることを目的としています。

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

💡

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

💡

Google Search Console自体の機能、利用方法はサイトオーナー様自身にて十分に理解した上でご利用ください。
Search Console ヘルプ > サイトの所有権を確認する


独自スタイルシート

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

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

💡

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