ストアフロントのブランディング

最終更新日： 2024年7月14日
  • トピック：

作成対象：

  • 初心者
  • 中級
  • 管理者
  • リーダー
  • ユーザー

最初にやりたいことの 1 つは、ヘッダーの ロゴを変更し、ブラウザーの お気に入りをアップロードすることです。 次に、フッターで ようこそメッセージを追加および 著作権表示を更新する必要があります。 これらのタスクは、すぐに対処できるシンプルなデザイン要素です。 ストアが開発中に、 ストアのデモ通知をオンにすると、ローンチの準備が整ったら削除できます。

ストアフロントのブランディング要素

ロゴをアップロード

ヘッダー内のロゴのサイズと場所は、ストアテーマによって決まります。 ロゴは、GIF、PNG、JPG（JPEG）のいずれかのファイルタイプとして保存し、ストアの管理者からアップロードできます。

ヘッダー内のロゴ

ロゴ画像はサーバー上の次の場所にあります。 logo.svg という名前の画像ファイルはすべて、デフォルトのテーマロゴとして使用されます。

フルパス - app/design/frontend/[vendor]/[theme]/web/images/logo.svg

相対パス - images/logo.svg

テーマで使用されるロゴやその他の画像のサイズがわからない場合は、ブラウザーでページを開き、画像を右クリックして、要素を調べます。

NOTE
ヘッダーのロゴに加えて、ロゴが E メール テンプレート、PDFの請求書およびその他の営業文書にも表示されます。 メールテンプレートと請求書に使用されるロゴは、サイズの要件が異なり、別々にアップロードする必要があります。

サポートされるロゴファイル形式：

ファイル形式説明
PNG（Portable Network Graphics） GIFフォーマットに代わるこの新しいフォーマットは、最大 1600 万色（24 ビット）をサポートします。 可逆圧縮形式では、テキストは鮮明になるが、一部の形式よりもファイルサイズが大きい、高品質のビットマップ画像が生成されます。 PNG 形式は、透明レイヤーをサポートし、オンライン表示とストリーミング用に設計されています。
GIF（Graphics Interchange Format）広くサポートされている古いビットマップ形式で、256 色（8 ビット）に制限されています。 GIFフォーマットは、単純なアニメーションと透明レイヤーをサポートしています。
JPG （JPEG）（Joint Photographic Expert Group）ほとんどのデジタルカメラで使用される圧縮ビットマップ形式。 非可逆圧縮によってデータがやや失われますが、テキストのぼやけた点として目立つ場合があります。

  1. 管理者 サイドバーで、Content/Design/Configuration ​に移動します。

    デザイン設定ページ

  2. 設定するストア表示を見つけ、Action ​列の​ Edit ​をクリックします。

  3. 「 展開セレクター 」を展開し、「Header」セクションを展開します。

    ヘッダー設定

  4. 新しいロゴをアップロードするには、「Upload」をクリックし、システムからファイルを選択します。

  5. Logo Image Width と Logo Image Height をピクセル単位で入力します。

  6. Logo Image Alt：画像にマウスオーバーしたときに表示されるテキストを入力します。

  7. 完了したら、「Save Configuration」をクリックします。

お気に入りの追加

favicon は、お気に入りアイコン の略で、各ブラウザーページのタブにある小さなアイコンを指します。 ブラウザーによっては、favicon がアドレスバーの URL の直前にも表示されます。

favicon は通常、16 x 16 ピクセルまたは 32 x 32 ピクセルのサイズです。 Commerce では ICO、PNG、APNG、GIF、JPG（JPEG）の各ファイルタイプを使用できますが、これらのフォーマットをサポートしていないブラウザーもあります。 favicon で最も広くサポートされているファイル形式は ICO です。 他の画像ファイルタイプを使用することもできますが、一部のブラウザーではその形式がサポートされていない場合があります。 ICO 画像を生成したり、画像をその形式に変換したりできる無料のツールがオンラインで多数用意されています。

ブラウザータブの Favicon

Commerce は、favicon として次のファイル形式をサポートしています。

ファイル形式説明
ICOこの画像ファイル形式は、小さいサイズのコンピューターアイコン画像用に設計されています。 主にMicrosoft® Windows OS で使用される ICO フォーマットは、最大 256 x 256 ピクセルと 8 ビットの透明度を持つ 1600 万色（24 ビット）の画像を含めることができます。
PNG（Portable Network Graphics） GIFフォーマットに代わるこの新しいフォーマットは、最大 1600 万色（24 ビット）をサポートします。 可逆圧縮形式では、テキストは鮮明になるが、一部の形式よりもファイルサイズが大きい、高品質のビットマップ画像が生成されます。 PNG 形式は、透明レイヤーをサポートし、オンライン表示とストリーミング用に設計されています。
APNG（Animated Portable Network Graphics）単純なアニメーションをサポートする PNG に似たファイル形式。
GIF（Graphics Interchange Format）広くサポートされている古いビットマップ形式で、256 色（8 ビット）に制限されています。 GIFフォーマットは、単純なアニメーションと透明レイヤーをサポートしています。
JPG （JPEG）（Joint Photographic Expert Group）ほとんどのデジタルカメラで使用される圧縮ビットマップ形式。 非可逆圧縮によってデータがやや失われますが、テキストのぼやけた点として目立つ場合があります。

手順 1:favicon の作成

  1. 任意の画像エディターを使用して、ロゴの 16 x 16 または 32 x 32 のグラフィック画像を作成します。

  2. （オプション）使用可能なオンラインツールのいずれかを使用して、ファイルを.ico 形式に変換し、コンピューターに保存します。

手順 2:favicon をストアにアップロードする

  1. 管理者 サイドバーで、Content/Design/Configuration ​に移動します。

  2. グリッドで、設定するストア表示を見つけ、Action ​列の​ Edit ​をクリックします。

  3. 「Other Settings」の下の「展開セレクター 「HTML Head」セクション を展開します。

    HTML ヘッドの設定

  4. 現在の favicon を削除する場合は、画像の左下隅にある 削除 （ ごみ箱アイコン ）アイコンをクリックします。

  5. 「Upload」をクリックし、準備した favicon ファイルを開きます。

    アップロード済み favicon

  6. 完了したら、「Save Configuration」をクリックします。

手順 3：キャッシュを更新

  1. キャッシュを更新するように求めるプロンプトが表示されたら、ワークスペース上部のメッセージに含まれている Cache Management リンクをクリックします。

  2. リストで、Invalidated とマークされた「Page Cache」チェックボックスを選択します。

  3. Actions を Refresh に設定し、「Submit」をクリックします。

  4. 新しいお気に入りを表示するには、ストアフロントに戻ってブラウザーを更新します。

ようこそメッセージの変更

ヘッダーのウェルカムメッセージが展開され、ログインした顧客の名前が表示されます。 ストアを起動する前に、各ストア表示のデフォルトの ようこそ テキストを必ず変更してください。

ようこそメッセージ

  1. 管理者 サイドバーで、Content/Design/Configuration ​に移動します。

  2. グリッドで、設定するストア表示を見つけ、Action ​列の​ Edit ​をクリックします。

  3. 「Other Settings」の下の「展開セレクター 「Header」セクション を展開します。

  4. Welcome Text：ストアのヘッダーに表示するようこそメッセージのテキストを入力します。

    ヘッダー設定

  5. 完了したら、「Save Configuration」をクリックします。

  6. ページキャッシュを更新するように求めるプロンプトが表示されたら、ワークスペースの上部にある Cache Management リンクをクリックし、指示に従ってキャッシュを更新します。

著作権表示の変更

ストアの各ページのフッターには著作権表示が表示されます。 ベストプラクティスとして、著作権表示には現在の年を含め、自社をサイト上のコンテンツの法的所有者として識別する必要があります。

著作権表示の例

次の例に示すように、© 文字コードを使用して著作権記号を挿入します。

  • 長い形式の例

    Copyright © 2013-present Luma, Inc. All rights reserved.

  • 短い形式の例

    © 2021 Luma, Inc. All rights reserved.

著作権表示を更新するには：

  1. 管理者 サイドバーで、Content/Design/Configuration ​に移動します。

  2. グリッドで、設定するストア表示を見つけ、Action ​列の​ Edit ​をクリックします。

  3. その他の設定 の下で、「拡張セレクター を展開します Footer セクション。

    フッターデザイン設定

  4. Copyright：各ページのフッターに表示する著作権表示を入力します。

    著作権記号を挿入するには、© の文字コードを使用します。

  5. 完了したら、「Save Configuration」をクリックします。