ここから本文です
掲載日:2020年09月15日

トップページパーツ:新着情報

【ご注意】
本ページで説明の機能は、2021年1月廃止予定です。
お早めに「新ストアデザイン」への切り替えを実施くださいますようお願いいたします。
「新ストアデザイン」に関するご案内 (実施概要、スケジュールのご確認)
「新ストアデザイン」対応のマニュアルよくある質問
「ストアデザイン」と「新ストアデザイン」の新旧パーツ比較一覧

このページでは、トップページに表示できる「新着情報」パーツについて説明します。
このパーツを使うと、ストアの新着情報と掲載日を表示できます。

「新着情報」パーツでは、大きいサイズとハーフサイズの2種類のパーツがあり、かんたんモードで編集をおこなっている場合は、大きいサイズのパーツが表示されます。通常モードで編集をおこなっている場合は、2種類から選択ができます。

「新着情報」編集画面を開く

「新着情報」パーツのサイズを指定する

「新着情報」パーツのデザインを編集する

お役立ち「新着情報」パーツを配置できる場所
「新着情報」パーツは、トップページ、カテゴリページ、商品ページに配置できます。共通領域(ヘッダー、サイドナビ、フッター)とカスタムページには配置できません。

※本マニュアルの掲載内容は、予告なく変更される場合があります。
※システム仕様に変更があった場合は、「ストアクリエイターPro」トップページでお知らせいたします。
  「ストアクリエイターPro」トップページを頻繁にご覧になることをおすすめいたします。

「新着情報」編集画面を開く

「トップページレイアウト設定」画面
「トップページレイアウト設定」画面
ストアクリエイターProトップページ 「ストア構築」の[ストアデザイン]を選択します。

表示された画面左カラムの「ストアデザインメニュー」のページレイアウトから[トップページ]をクリックします。

「新着情報」パーツのサイズを指定する

手順

「トップページレイアウト設定」画面
<dt>「トップページレイアウト設定」画面</dt>
「新着情報」は、大きいサイズとハーフサイズの2種類からサイズ選択ができます。
仕様の詳細は表示例と仕様をご確認ください。
大きいサイズ
ボディ幅のサイズで「新着情報」を表示します。
※左図赤枠参照。
ハーフサイズ
大きいサイズの約1/2幅で「新着情報」を表示します。
横幅の変更はできません。
※左図青枠参照。
「トップページレイアウト設定」「デザイン編集」タブの画面イメージに表示されている[新着情報]をクリックすると、画面下部に「新着情報」設定項目が表示されます。

「デザイン編集」タブの画面イメージに[新着情報]が見当たらない場合や、サイズを変更したい場合は、「パーツの並び替え」タブを選択し、[新着情報]を画面イメージへドラックで移動してください。
画面イメージ[新着情報]が移動した後、再び「デザイン編集」タブへ戻り、「デザイン編集」タブの[新着情報]をクリックします。
参照ツールマニュアル
ストアデザイン>通常モード:トップページ
>>「トップページパーツの並べ替えとデザイン編集方法」

表示例と仕様

全タイプ
共通仕様
  • 20項目まで表示できます。
  • 「情報1」欄の情報が未入力の場合は、パーツ自体が非表示となります。
  • 日付、リンク先URの入力は任意です。
  • 大きいサイズ、ハーフサイズは同時に表示できますが、入力は別となります。

大きいサイズ
タイプ1
 表示例
画像を拡大する
  • 情報日付入力されている場合、日付が情報の左に配置される仕様です。
  • ボディ幅に合わせて大きく表示します。
大きいサイズ
タイプ2
 表示例
画像を拡大する
  • 情報日付入力されている場合、日付が情報の右に配置される仕様です。
  • ボディ幅に合わせて大きく表示します。
ハーフサイズ
タイプ1
 表示例
画像を拡大する
  • 情報日付入力されている場合、日付が情報の左に配置される仕様です。
  • 大きいサイズの約1/2幅で表示されます。横幅の変更はできません。
ハーフサイズ
タイプ2
 表示例
画像を拡大する
  • 情報日付入力されている場合、日付が情報の右に配置される仕様です。
  • 大きいサイズの約1/2幅で表示されます。横幅の変更はできません。

「新着情報」パーツのデザインを編集する

手順1

「新着情報」編集フォーム
「新着情報」パーツ編集フォーム
トップページに「新着情報」を表示する場合、サイズは2種類、表示パターンはそれぞれ2タイプの合計4パターンから選択できます。 横幅はページ幅に合わせて自動調整されます。さらにタイトルの表示方法を3種類から選択し、必要事項を入力します。

タイトル
画像
タイトルで「画像」を選択した場合、設定が必要な項目です。
利用したい画像は[参照]をクリックし、アップロードをおこなうか、あらかじめ「追加画像」としてアップロードした画像を選択指定します。
タイトル
表示方法で「シンプル」を選択した場合、入力が必要な項目です。
全角10文字(20バイト)以内のテキストを入力します。
HTML
表示方法で「HTML」を選択した場合、入力が必要な項目です。
全角500文字(1000バイト)以内でHTMLの記述が可能です。

情報1~20
情報1から順に必要項目を入力します。
最大20項目まで表示ができますので、必要に応じて[入力項目を追加]をクリックし、「情報」欄を追加してください。
日付
情報の横に表示する日付を入力します。
情報
情報として表示するテキストを全角50文字(100バイト)以内で入力します。
「リンク先URL」を入力すると「情報」部分がテキストリンクになります。
リンク先URL
遷移させたいページのURLを入力します。
相対パスではなく、https://から始まる絶対パスを入力ください。

表示される「新着情報」パーツの色は、「テンプレート選択」やストアデザインの「全体の設定」で設定した色に従って表示されます。
全体設定の色ではなく、このパーツのみ色変更をしたい場合は、手順2を確認ください。

色の変更をおこなわない場合は、画面下部の[保存]をクリックを押すと「新着情報」パーツの設定が完了します。

「新着情報」タイトル表示例

シンプル  「新着情報」の表示例 
画像を拡大する
背景色に設定されている色の上に「タイトル」で入力された文字列が表示されます。看板の高さ、幅の指定はできません。
画像  「新着情報」の表示例 
画像を拡大する
「画像」欄でアップロードした画像が表示されます。「タイトル」に入力された文字列が画像のALTとして表示されます。
HTML  「新着情報」の表示例 
画像を拡大する
「HTML」欄に入力した内容を元に表示されます。

手順2

「詳しく設定する」画面
「詳しく設定する」画面
パーツの色は、「テンプレート選択」やストアデザインの「全体の設定」で設定した色に従って表示されます。
全体設定の色ではなく、このパーツのみ色変更をしたい場合は、[詳しく設定する]をクリックします。

「色参照パネル」が開き、色見本を確認しながら、背景色や文字色、枠色などの設定が可能になります。
設定したい色をクリックして[保存]ボタンを押すと、入力欄には選択した色を表すRGB値(カラーコード)が自動で表示されます。

お役立ち
入力欄に直接RGB値(カラーコード)を入れて指定することもできます。
各項目の色を選択を行なった後、[このモジュールの色を優先する]にチェックを入れると、テンプレートや全体設定で指定した色ではなく、ここで指定した色が優先表示されます。

参照ツールマニュアル
ストアデザイン>通常モード
>>「テンプレートの選択」
>>「全体の設定」
よくある質問トップページの新着情報からのリンク
Q.トップページの「新着情報」からリンクをしたいのですが、相対パスを入力しても商品コードを入力しても「新着情報のリンク先URLのフォーマットが無効です」というメッセージが出て、リンクができません。
A.新着情報のリンク先URLには「https://~始まる絶対パスを入力してください。
各ページのURLは、「ページ編集」の「サイトマップ」で該当のページをクリックしてプレビューを表示させると、画面の上部(オレンジ色のバーの下)に表示されます。

ストアデザイン

よくある質問 素材集
本文はここまでです このページの先頭へ