画像台帳の便利な使い方とHTMLでの呼出し方法
この機能の目的説明します。
画像台帳に登録されている画像の使い方を説明します。
登録されている画像は、HTMLタグで呼び出すこともできます。
一度挿入した画像は、画像台帳に登録され、
後で何度でも呼び出すことが可能です。
未使用の画像は、「未使用」などのカテゴリ名を設定して管理することをおすすめします。画像を削除する際に、画像カテゴリで検索することで、削除するのが楽になります。
画像カテゴリの作成については以下を参照してください。
⇒画像台帳に画像を登録する
画像台帳へ画像を登録する方法は以下を参照してください。
⇒画像台帳に画像を登録する
⇒画像台帳に画像を一括で登録する
画像台帳に画像を登録すると、自動的に5種類のサイズの画像を複製します。
作成される画像サイズは次の通りです。
・サムネイル（横50px）
・小（横120px）
・中（横180px）
・大（横250px）
・特大（横640px）
・オリジナル（原寸）
登録画像の各サイズは、画像台帳の[プレビュー]ボタンをクリックすることで確認できます。
1. 横幅を基準とした画像生成
アップロードした画像は、横のサイズを基準として各サイズを自動生成するということです。
その際、元画像の縦横比は維持したままで生成されます。
2. 元画像以上のサイズは生成されない
元画像が自動生成される画像サイズよりも小さい場合、画像が荒くなってしまうため拡大
されません。
例えば元画像が150pxだった場合は、オリジナルも特大も大も中も、横幅は150pxということに
なります。
例)オリジナルサイズが横640px×480ｐｘの場合
・サムネイル（50×37）
・小（120ｘ90）
・中（180ｘ135）
・大（250ｘ187）
・特大（640ｘ480）
画像台帳からの画像挿入が行える場所
商品登録時の商品紹介文
ヘッダのバナーエリア/フッタのバナーエリア
サイドバー/センターフリーエリア
フリーページ
決済方法の設定-決済画像
商品カテゴリ/グループの専用ヘッダ・フッタ
ヘッダとSEOの設定-ロゴ
ヘッダとSEOの設定-ヘッダ背景
ヘッダとSEOの設定-フッタ背景
アンケートフォーム-各種○○の設定
お店案内-お店紹介1～3
ご利用案内-注文方法1～5
携帯カートの設定-フリーエリア、フリーページ
トップイメージの入替
店長紹介の更新
リンクの設定
印刷書類のテンプレート
画像挿入の方法
管理画面の「画像挿入」ボタンをクリックします。
※参考イメージ「お店設定＞お店案内」
画像挿入画面が表示されます。
リストの画像が多く、どこにあるかわからないときは、画像検索を
使いましょう。ページ下部の「画像検索」から、指定した条件で画像を
検索することができます。
検索したいファイルのファイル名を入力します。ファイル名の一部
でもかまいません。
検索したいファイルの代替テキストを入力します。代替テキストの
一部でもかまいません。
検索したいファイルの画像カテゴリを選択します。
「検索する」ボタンをクリックすると入力した条件に合う画像が
表示されます。
挿入する画像が見つかったら、次はサイズを指定します。
挿入する画像のサイズを指定します。
サイズ別の画像がどのくらいの大きさになるか、挿入前に
プレビューで確認できます。
指定したサイズで画像を挿入します。
画像挿入が完了すると、「画像」項目欄に小さなサムネイル画像が
表示されます。
この画像は縮小して表示しています。画像をクリック
すると、実際に表示画像サイズを確認できます。
HTMLでの呼び出し方法（記述例）
画像台帳に画像を登録し、商品紹介文の本文に以下のHTMLタグを入力してください。
<img src="http://ショップID.shopserve.jp/pic-labo/任意の画像サイズタグ/ファイル名">
または
<img src="http://独自ドメイン/pic-labo/任意の画像サイズタグ/ファイル名">
| 画像サイズ | サイズタグ |
| 特大サイズ | （横 640px） llimg |
| Lサイズ | （横 250px） limg |
| Mサイズ | （横 180px） mimg |
| Sサイズ | （横 120px） simg |
| サムネイル | （横 50px） timg |
以下のHTMLタグを入力してください。
<img src="http://ショップID.shopserve.jp/pic-labo/ファイル名">
または
<img src="http://独自ドメイン/pic-labo/ファイル名">
画像台帳に登録されていない画像を呼び出した場合、カート画面でセキュリティ情報のメッセージが表示される場合があります。
・ヘッダのバナーエリア
・フッタのバナーエリア
・フッタのコピーライト欄
・ページ全体の背景
・ヘッダの背景
・フッタの背景
・ショッピングカートの「メッセージの編集」欄
・その他、ご自身でカスタマイズした箇所でカートにも引用されるもの
「左寄せ」「中央寄せ」「右寄せ」を指定する場合は以下を参照してください。
<div align="配置タグ">
<img src="http://ショップID.shopserve.jp/pic-labo/任意の画像サイズタグ/ファイル名">
</div>
または
<div align="配置タグ">
<img src="http://独自ドメイン/pic-labo/任意の画像サイズタグ/ファイル名">
</div>
| 配置 | 配置タグ |
| 左寄せ | align="left" |
| 中央寄せ | align="center" |
| 右寄せ | align="right" |
商品説明文に挿入した画像を削除するには、商品説明文から以下のHTMLタグを削除してください。
<img src="http://ショップID.shopserve.jp/pic-labo/任意の画像サイズタグ/ファイル名 alt="代替テキスト">
または
<img src="http://独自ドメイン/pic-labo/任意の画像サイズタグ/ファイル名 alt="代替テキスト">
| 配置 | 配置タグ |
| 左寄せ | align="left" |
| 中央寄せ | align="center" |
| 右寄せ | align="right" |
代替テキストって何？
画像にマウスを当てた際に表示される文言（InternetExplorerの場合）を指定します。この文言はSEO効果もあるので、入力されることをおすすめします。
※複数のキーワードを入力するのではなく、画像を的確に表現する単語をひとつだけ入力します。
※例えば商品に使う画像の代替テキストには商品名を入力することが考えられます。
HTMLタグでの記述
例）ピエロと楽しくお出かけ♪【ヴィラック】VILACオウガステの傘
<img src="http://ショップID.shopserve.jp/pic-labo/画像ファイル名" alt="ピエロと楽しくお出かけ♪【ヴィラック】VILACオウガステの傘">
または
<img src="http://ドメイン/pic-labo/画像ファイル名" alt="ピエロと楽しくお出かけ♪【ヴィラック】VILACオウガステの傘">
「フリーページ作成」機能などを活用して画像を呼び出すHTMLタグを作成し、流用することもできます。
メインメニューの「ページ編集」をクリックし、左メニューの「フリーページ作成」をクリックします。
「内容」の入力欄でマウスをワンクリックしてカーソルを表示させる。
画像挿入ボタンをクリックする。
画像台帳から任意の画像を挿入します。
画像が挿入されたら、１番右にあるアイコンのHTML表示切替ボタンをクリックします。
HTMLタグが表示されるので、内容をすべてコピーします。
コピーしたHTMLタグを、商品の説明文など、任意の場所に貼り付けると、画像を呼び出すことができます。
パソコン内にもまとめて保存しておきましょう。
※デジカメ付属のアルバムソフトでは、見た目が縮小されて表示されているケースがあります。
画像が大きすぎると、サーバー容量を取りますので、画像加工ソフトなどでサイズ調整したうえで、登録することをお勧めします。
※登録できる画像は1枚につき最大2Mまでです。
デジカメによっては、商品メイン画像推奨サイズの「640×480」で撮影できるものがありますので、取扱説明書をご確認ください。
|
|
お問い合わせの際は「ショップID」をお知らせください。 |
お電話：平日10:00～18:00（土・日・祝日を除く） |