デザインに関するよくあるご質問

トップ＞サイト運営をする方向け＞目的から探す＞店舗のデザイン＞デザインの概要や仕組みについて知りたい

デザインに関するよくあるご質問

よくあるご質問

よくあるご質問を下記にまとめました。

Q. 画像のパスはどのように指定したらよいですか？

A. 画像のパスは、そのxhtmlファイルがある場所から相対パスでご指定ください。
サーバーにアップロードして表示した際は、パスが自動的に調節されます。

xhtmlファイルにパスを直接記載せず、ショップ管理ツールの各項目内
（決済方法の「決済コメント」やトピックスの「トピックス内容」等）にパスを記載する場合は、
相対パスでの指定ではなく、下記のように、/client_info/～のパスを指定いただくようお願いいたします。

<img src="/client_info/<店舗No>/view/userweb/images/test.jpg" alt="sample" />

Q. 画像のファイル名に使用できない文字はありますか？

A. 本システムにアップロードする画像のファイル名に使用できない文字は以下となります。

全角文字
# シャープ
% パーセント
, カンマ
. ドット
: コロン
; セミコロン
/ スラッシュ
＼（\）バックスラッシュ（円記号）
| パイプ
* アスタリスク
? クエッションマーク
" コーテーションマーク、引用符
＜小なり
＞大なり

静的コンテンツ（画像ファイル等）のURLでは、「+」は利用できません。
そのため、ファイル名には「+」を利用しないようにしてください。

または、「+」を含むファイルを利用している場合の対応策として、当該ファイルをURLとして参照する
箇所においては「+」を「%2B」に変換してください。

例）「/view/userweb/images/sample+.jpg」という画像ファイルを表示する記述をしている場合

<img src="/client_info/<店舗No>/view/userweb/images/sample+.jpg" alt="sample" /> 　　↓　下記のように変換する <img src="/client_info/<店舗No>/view/userweb/images/sample%2B.jpg" alt=" sample" />

Q. カテゴリトップページへのリンクはどのように記述したらよいですか？

A. 下記のように記述してください。

<a href="category/カテゴリコード/"></a>

「カテゴリコード」の部分には、表示したいカテゴリのカテゴリコードをご指定ください。

Q. 商品詳細ページへのリンクはどのように記述したらよいですか？

A. 下記のように記述してください。

<a href="item/商品コード.html"></a>

「商品コード」の部分には、表示したい商品の商品コードをご指定ください。
また、商品コメントやカテゴリ説明文に他の商品へのリンクを付与する場合は、下記のように記述してください。

<a href="##CMD_ROOT##/item/商品コード.html"></a>

置換文字の詳細についてはこちら

Q. タイトルタグを動的に書き換えずに、テンプレートファイルに記述したものをそのまま表示するにはどうしたらよいですか？

A. タイトルタグに、下記のm:id属性を追加してください。

<title m:id='common.NO_REPLACE_TAG'>ここに表示したいタイトルを記述します</title>

また、メタキーワードおよびメタディスクリプションは、下記のm:idと共にメタタグを記載することで反映されます。

▼head内のtitleとkeywordとdescriptionを変更する場合

<head m:id='common.NO_REPLACE_TAG'>

<title m:id='common.NO_REPLACE_TAG'>ここに表示したいタイトルを記述します</title>
<meta name="keywords" content="ここにキーワードを記述します" />
<meta name="description" content="ここにディスクリプションを記述します" />

※上記の他にもhead内に必要なmetaタグやlinkタグも全て記載※

</head>

「common.NO_REPLACE_TAG」を利用せずに、テンプレートファイルにメタキーワードおよび
メタディスクリプションを記載すると、サイト基本情報や商品情報の「メタキーワード」「メタディスクリプション」に
登録した内容と2重で出力されてしまいます。
テンプレートファイルに記載した内容のみを出力したい場合は、必ず「common.NO_REPLACE_TAG」を利用してください。

Q. お問い合せのテンプレートファイルを作成するにはどうしたらよいでしょうか？

A. お問い合わせフォーマットコードを各テンプレートファイルに命名してください。
お問い合わせフォーマットコード名がCONTACTの場合は、
input_CONTACT.xhtml
result_CONTACT.xhtml
error_CONTACT.xhtml
というテンプレートファイルをapply$フォルダへアップロードしてください。

※お問い合わせの詳細な設定は下記リンクをご参照ください。
お問い合わせフォーマット編集一覧ページについてはこちら
お問い合わせフォーマット編集　登録・更新ページについてはこちら

Q. テンプレートファイルの言語は何が使えますか？

A.テンプレートファイルにはhtml、xhtml、HTML Living Standardが使用できます。
本システムの仕様上、どの言語でもファイルの拡張子はxhtmlにしてくだい。

Q. サイトロゴ画像はどこから変更できますか？

A. サイトロゴ画像は、画像・テンプレート管理の『view＞userweb＞images>header_title.gif』を参照しています。 (※標準テンプレートの場合)
上記ファイルを差し替えることで、サイトロゴ画像の変更が可能です。

Q. テンプレートファイル内で、必須となる記述はありますか？

本システムで使用するテンプレートファイルの、上部の記述について、記述を必須・推奨としている箇所があります。
正常に動作・デザイン表示がされない場合、以下の太字部分の記述が正しくされているかご確認ください。

例）top.xhtmlでの記述例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:m="http://mayaa.seasar.org" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta name="format-detection" content="telephone=no" /> <title>標準テンプレート（PC）</title> <link rel="stylesheet" href="css/flexslider.css" type="text/css" /> <link rel="stylesheet" href="css/style.css" type="text/css" /> <link rel="shortcut icon" href="favicon.ico" /> <script m:id="common.IF_USE_LATEST_JQUERY" type="text/javascript" charset="utf-8" src="js/ebisu_lib.latest.js"></script> <script m:id="common.IF_USE_LATEST_JQUERY" m:NOT="" type="text/javascript" charset="utf-8" src="js/ebisu_lib.js"></script> <script type="text/javascript" charset="utf-8" src="js/ebisu.js"></script> <script m:id="common.IF_USE_LATEST_JQUERY" type="text/javascript" charset="utf-8" src="js/jquery.latest.min.js"></script> <script m:id="common.IF_USE_LATEST_JQUERY" m:NOT="" type="text/javascript" charset="utf-8" src="js/1.7.1.jquery.min.js"></script> <script type="text/javascript" charset="utf-8" src="js/jquery.flexslider.js"></script> <script type="text/javascript" charset="utf-8" src="js/jquery.tile.js"></script> <script m:id="common.IF_SALES_CAMPAIGN_BEYOND_OPTION" type="text/javascript" charset="utf-8" src="js/sales_campaign_banner.js"></script> <script type="text/javascript"> //<![CDATA[ $(function(){ // メインビジュアルのスライダー $('#mainslider').show(); $('#mainslider').flexslider({ animation: "slide", controlNav: true, animationLoop: true, directionNav: true, slideshow: true, }); //高さ調整 $('#new ul li.box').tile(4); $('#recommend ul li.box').tile(4); $('#ranking ul li.box').tile(4); // フリーランキング（アクセス）を使用する場合、コメントアウトを外してください。 // $('#access ul li.box').tile(4); $('#clientRecommend ul li.box').tile(4); // n番目の要素から右余白削除 $('#new li:nth-child(4n)').css("margin-right","0px"); $('#recommend li:nth-child(4n)').css("margin-right","0px"); $('#ranking li:nth-child(4n)').css("margin-right","0px"); // フリーランキング（アクセス）を使用する場合、コメントアウトを外してください。 // $('#access li:nth-child(4n)').css("margin-right","0px"); $('#clientRecommend li:nth-child(4n)').css("margin-right","0px"); }); //]]> </script> <script m:id="common.IF_USE_STAFF_START" type="text/javascript" charset="utf-8" src="js/staff_start.js"></script> </head> <body>  <iframe m:id='common.IMPORT_HERE' src="common/header.xhtml" frameborder="0" scrolling="no" width="100%"></iframe>

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:m="http://mayaa.seasar.org" xml:lang="ja" lang="ja">

⇒「xmlns:m="http://mayaa.seasar.org"」はm:idを動作させるために必須の記述内容になるため、省略できません。
　テンプレートファイルのインポートを行う際に、下記のm:idを必ず利用するため、呼び出す側と呼び出される側、
　どちらのテンプレートファイルにも記述が必要です。

　呼び出す側のテンプレートファイル（top.xhtml等）では、インポートするために「m:id='common.IMPORT_HERE'」を記述します。
　該当m:idでインポートしたいファイルを指定します。

　呼び出される側のテンプレートファイル（/common/header.xhtml等）では、どの箇所が部品かの目印となる「m:id='CONTENT'」を
　記述します。該当m:idで囲った範囲がインポート対象になります。

　その他の記述も、xhtmlを書く際の作法として記述しておくことを推奨します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

⇒ユーザーウェブに表示される際には、呼び出す側のテンプレートファイル（top.xhtml等）の記述が利用されます。
　記述がなくても表示されますが、xhtmlを書く際の作法として記述しておくことを推奨します。

　なお、上記はxhtmlを使用するための記述ですが、HTML Living Standard を使用することも可能です。
　その場合は<!DOCTYPE html>のように省略して記述してください。

<head>～</head>

⇒ユーザーウェブに表示される際には、呼び出す側のテンプレートファイル（top.xhtml等）の記述が利用されます。

　テンプレートファイルのアップロード後は、呼び出される側のテンプレートファイル（/common/header.xhtml等）の
　<head>～</head>は適用されませんが、全てのテンプレートファイルをダウンロードしてローカル環境で作業する際に
　cssやjsが適用されている必要があるため、最新版テンプレートでは記述した状態で提供しています。

　※弊社で行う機能のテストは、記述のあるテンプレートファイルで行っております。
　記述がない場合、検証を行っておりませんので動作の保証はいたしかねます。

　※ebisu.js や ebisu_lib.js、style.css等、各種jsファイル/cssファイルを読み込みんでいる<script>タグは、
　本システムの動作上必要なため、基本的に削除しないようお願いいたします。
　ただし読み込むcssのファイル名等は、店舗様によって異なる場合がございますので、適宜ご変更ください。

当ページの記載内容は、標準機能に関するものです。
機能に関するカスタマイズをされている場合にはこの限りではありません。

デザインに関するよくあるご質問 | サポートサイト