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

Last update: Sun Jul 14 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

トピック：

作成対象：

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

最初にやりたいことの 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）ほとんどのデジタルカメラで使用される圧縮ビットマップ形式。非可逆圧縮によってデータがやや失われますが、テキストのぼやけた点として目立つ場合があります。

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

{width="700"}
設定するストア表示を見つけ、Action 列の Edit をクリックします。
「」を展開し、「Header」セクションを展開します。

{width="600"}
新しいロゴをアップロードするには、「Upload」をクリックし、システムからファイルを選択します。
Logo Image Width と Logo Image Height をピクセル単位で入力します。
Logo Image Alt：画像にマウスオーバーしたときに表示されるテキストを入力します。
完了したら、「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

APNG

（Animated Portable Network Graphics）単純なアニメーションをサポートする PNG に似たファイル形式。

GIF

JPG （JPEG）

手順 1:favicon の作成

任意の画像エディターを使用して、ロゴの 16 x 16 または 32 x 32 のグラフィック画像を作成します。
（オプション）使用可能なオンラインツールのいずれかを使用して、ファイルを.ico 形式に変換し、コンピューターに保存します。

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

管理者 サイドバーで、Content/Design/Configuration に移動します。
グリッドで、設定するストア表示を見つけ、Action 列の Edit をクリックします。
「Other Settings」の下の「展開セレクターを展開します。

{width="600"}
現在の favicon を削除する場合は、画像の左下隅にある削除（）アイコンをクリックします。
「Upload」をクリックし、準備した favicon ファイルを開きます。

{width="400"}
完了したら、「Save Configuration」をクリックします。

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

キャッシュを更新するように求めるプロンプトが表示されたら、ワークスペース上部のメッセージに含まれている Cache Management リンクをクリックします。
リストで、Invalidated とマークされた「Page Cache」チェックボックスを選択します。
Actions を Refresh に設定し、「Submit」をクリックします。
新しいお気に入りを表示するには、ストアフロントに戻ってブラウザーを更新します。

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

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

ようこそメッセージ

管理者 サイドバーで、Content/Design/Configuration に移動します。
グリッドで、設定するストア表示を見つけ、Action 列の Edit をクリックします。
「Other Settings」の下の「展開セレクターを展開します。
Welcome Text：ストアのヘッダーに表示するようこそメッセージのテキストを入力します。

{width="600"}
完了したら、「Save Configuration」をクリックします。
ページキャッシュを更新するように求めるプロンプトが表示されたら、ワークスペースの上部にある Cache Management リンクをクリックし、指示に従ってキャッシュを更新します。

著作権表示の変更

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

著作権表示の例

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

管理者 サイドバーで、Content/Design/Configuration に移動します。
グリッドで、設定するストア表示を見つけ、Action 列の Edit をクリックします。
その他の設定 の下で、「拡張セレクター Footer セクション。

{width="600"}
完了したら、「Save Configuration」をクリックします。

デモ用ストア通知の設定

店舗がオンラインでも建設中の場合は、ページの上部に店舗デモ通知を表示して、店舗がまだ営業していないことを知らせることができます。運用開始 の準備が整ったら メッセージを削除するだけです。これは、ウィンドウにぶら下がっている記号を 閉じる から開くに反転させることに似ています。デモ通知の形式は、ストアのテーマによって決まります。

ストアフロントデモのお知らせ

管理者 サイドバーで、Content/Design/Configuration に移動します。
グリッドで、設定するストア表示を見つけ、Action 列の Edit をクリックします。
「Other Settings」の下の「展開セレクターを展開します。

{width="600"}
下までスクロールし、Display Demo Store Notice を好みに設定します。
完了したら、「Save Configuration」をクリックします。
キャッシュを更新するように求めるメッセージが表示されたら、システムメッセージの Cache Management をクリックし、指示に従ってキャッシュを更新します。

recommendation-more-help

31746fd0-1ead-45b5-9192-1aaf582c5f66