HTML・CSSに関する基本的な知識だけでもネットショップのデザインが可能です。
HTML, CSS, Javascriptなど編集に必要なソースの基本概念を理解し、
運営の目的や希望する雰囲気に合わせてショップをデザインしてみましょう。
本格的なデザインに取り組む前に、運営者が望むショップのレイアウトや販売する商品の特徴などを参考にしてデザインを構想する必要があります。
ショップをオープンするタイミング、主な客層、販売する商品の種類など、ショップが持つ特徴を確かめた後、 それに相応しいデザインを考えてみましょう。
上手に描こうと頑張らなくても大丈夫です。浮かんだイメージを紙に一度まとめてみるだけでも十分です。
全体的なデザインを考え終えた後は、メニューや商品の表示などの構造について決めていきます。
デザインを構想するためには、まずショップ画面の構成について把握する必要があります。
上のエリア区分に合わせ、下のようにデザインが反映されます。
まず、ショップのロゴを上部のヘッダーにどのように配置するか、そしてサイドメニューは左側と上部のうちどの位置に置くかなどを考える必要があります。
また、ショップの全体的なイメージやカラーはどのようにするかも重要なポイントとなります。
このように色々と工夫しながら先にショップのレイアウトを編集していきます。
レイアウトとは、ショップのどのページでも共通して表示されるロゴ、カテゴリ、フッターエリアを意味します。
共通して表示されるエリアはレイアウトとして提供されるため、管理が簡単です。
[PCデザイン > デザイン管理]の「デザイン編集」ボタンをクリックし、スマートデザイン編集ウィンドウからレイアウトを編集することができます。
レイアウトはHTMLソースの最初に<!--@layout(layout.html)-->の形で表示されます。(下の画像を参考)
該当のエリアにマウスオーバーするとレイアウトのHTMLファイルを開くことができます。
レイアウトのHTMLソースにおける必須構成要素は<!DOCTYPE>とHTMLの基本構造である<html>、<head>、<body>です。
<!DOCTYPE>はWeb標準における必須事項で、該当のHTMLがどのようなソースであり、どのバージョンの仕様に基づいてHTMLを記述しているかを明示するための要素です。
これを「DOCTYPE宣言」と言い、このDOCTYPE宣言を用いてブラウザにHTMLのバージョンに合う解釈を要請することになります。
DOCTYPE宣言はHTMLソースの最初の部分に作成され、その後に通常のHTMLソースが続けて記述されます。
なお、レイアウトのHTML構成においては、必要に応じてCSSやJS(JavaScript)ファイルを読み込むことが可能です。
定義されたCSSとJSは下の画像のように別色で表示されます。
<head>と</head>の間にはウェブサイトのmeta情報が入ります。
レイアウトのデザインに関する内容は<body>と</body>の間に作成します。
レイアウトページにコンテンツを挿入したい場合は、希望する位置に該当コンテンツのソースを入れてレイアウトと連動させます。
コンテンツソースはレイアウトページ内で<!--@contents-->を使用して読み込むことができます。
レイアウトHTMLには、該当ページにおけるレイアウト関連の編集内容がすべて反映されます。
ページごとに異なるレイアウトデザインを適用したい場合は、別のレイアウトページを作成してから適用するページ内でレイアウトHTMLを読み込んでください。
レイアウトの概念と基本的な構成に関する説明はここまでとなります。次はHTMLに関する説明に移ります。
英語だらけのウェブ言語やソースは難しいものと思われがちです。
しかし、英語のアルファベットが分かれば単語や簡単な文章が理解できますよね?ウェブ言語も同じです。
HTML、CSS、Javascriptの基本概念は次の通りです。
つまり、ウェブページにおいて、HTMLは構造、CSSはデザイン、Javascriptは動作を担当しているのです。
建築に例えてみましょう。
HTMLは建物、CSSは塗料の色を決めるための物、Javascriptは建物内に設置されたエレベーターを動かすためのエンジンやモーターに該当します。
HTMLをベースに、様々なエフェクトや素材を取り入れるためにCSSとJavascriptを使用するものとも言えます。
そう考えると、CSSとJavascriptは選択可能なオプションであり、HTMLが必須言語だということが分かります。
HTML、CSS、Javascriptの基本概念に基づいてスマートデザインの編集ウィンドウで編集を希望する画面をクリックすると、HTMLコードが表示されます。
表示されたHTMLコードの所々にCSSを読み込むためのソースが挿入されていることを確認できます
HTMLコード上のCSSエリアで[ファイルを開く]のテキストをクリックすると該当するCSSファイルを確認できます。
ショップのレイアウトに使用されているCSSとJavascriptは/layout/basic/cssおよび/jsフォルダに、
各モジュールに使用されているCSSとJavascriptは/css/および/js/フォルダにそれぞれ保存されています。
スマートデザインの各機能は「モジュール」と「変数」で構成されています。
モジュールと変数の作動原理を理解すると、
ショップのデザインをより豊かに作り上げることができます。
変数はモジュールと連動して動作するもので、モジュールごとに使用可能な変数は決められています
ログインウィンドウの例を見てみましょう。
会員のログインやID・パスワードの照会が可能な「ログインモジュール」です。
ID・パスワードの入力欄やログインボタンはすべてログインモジュールに連動されている変数です。
モジュールとは、1つ以上のコンテンツや機能の集合体を意味する言葉です。
モジュールはプログラムの最小単位であり、HTMLと変数の組み合わせで構成されています。
例えば、「会員」モジュールは会員登録ページと会員情報変更ページ、ID照会などのエリア(要素)の集まりで構成されています。
モジュールは独立した一つの完全なプログラムとして、ユーザーが入力したmodule=”モジュールID”により判断・駆動されます。
スマートデザイン編集ウィンドウの画面表示エリアにおいて、カーソルを動かす際、モジュールは青のボックスで選択されます。
下の画像は会員登録ページで選択されたモジュールの例です。
ソースを見ると、module="member_join"が存在することを確認できます。
つまり、会員登録ページ内にmember_joinと称されるモジュールが使われており、
該当モジュールをベースに各種の変数が表示されるようにデザインされていることが分かります。
ショップ画面では、下のようにカテゴリエリア全体が一つのモジュールとなっています。
モジュールの使用においてはページによる制限がないため、どのページにも自由に適用できます。
スマートデザインにおいて、変数は管理画面と連動するショップの機能を表示するために使用されています。
「{$」と「}」の間に表示させたい値(項目)を入力してデザインを編集することができます。
例として、トップページの「おすすめ商品」に該当するソースを見てみましょう。
おすすめ商品のソースは"product_listmain_1"という特定のモジュールをベースにしており、その中に商品リストで使用される変数やタグが含まれています。
商品リストに含まれる3つの変数に関する説明は次の通りです。
モジュールと変数の概念に関する説明はここまでとなります。
次は変数をショップに適用する方法の説明に移ります。
スマートデザインでは、HTMLコードの繰り返しや数字の設定を通してデータを希望する形で表示させることができます。
繰り返し回数の設定は次の3つの方法で可能です。
複数の方法が使われている場合の優先順位は[$only_html > $count > DBのカウント設定]となります。
// 下記の場合、繰り返し回数は5回です。
// 下記の場合、繰り返し回数は3回です。
// 下記の場合、繰り返し回数はDBの設定によります。DBの設定がない場合、回数はHTMLの繰り返し単位によって決定されます。
1.繰り返される項目が同一の場合
1) コードには下のようにcountを設定します。
2) 上記のコードをブラウザの「ソースの表示」で確認すると、下のように同じliが5つ表示されます。
2.繰り返される項目が同一ではない場合
1) コードには下のようにcountを設定します。
2) 上記のコードをブラウザの「ソースの表示」で確認すると、下のようにcountに設定した数に至るまで最後の項目が繰り返されていることが分かります。
注釈変数を活用した繰り返し文をスマートデザインの編集ウィンドウで適用してみましょう。
他にも<!-- -->の間に様々な注釈変数を入れて活用することができます。
例)注文書作成ページの「注文書」モジュール
文字列が存在する際、該当の文字列を囲む前後の文字や特殊文字を設定します。
* 例 : 掲示板に投稿された記事のタイトルを特殊文字で囲む場合
タイトルを表す変数を次のように置き換えます。
文字列を表示したい文字数に合わせてカットします。
一番目の因子は表示する文字の数、二番目の因子はカットされた文字の表示方法(形態)になります。
日付と時間を表示するためのフォーマットを指定します。
年-月-日および時間の表示順を変更することができます。(月-日-年など)
* 例 : [管理画面 > 掲示板管理 > 投稿日の表示]で設定した内容を無視して日付・時間を表示します。
「投稿時間を表示」にチェックしていても、それと関係なくDateモディファイヤーを利用して時間の表示/非表示を別途で決めることができます。
掲示板において、リストと詳細ページでそれぞれ異なる時間の表示方法を使用したい場合に活用できます。
入力された値がある場合、一番目の因子に指定された画像URLを割り当てて画像タグに置き換えます。
入力された値がない場合、二番目の因子に指定された画像URLを割り当てて画像タグに置き換えます。
二番目の因子を指定していない場合、空文字列に置き換えます。
* 例 : 変数のテキストではなく画像を変更したい場合、imgconvを使用して指定の画像に入れ替えます。
{$name_or_img_tag|imgconv:'画像URL'}
imgconvモディファイヤーと機能は同じですが、画像ではなく別の文字列で置き換える点で違いがあります。
DBに保存されているデータ自体が改行された文字列である場合、ブラウザでもそのまま表示させるため、
改行された文字列を探して「br」タグのみを挿入できる機能を持つモディファイヤーです。
数字で構成されている文字列を千単位で表示する際に使用します。
* 例 : 商品の販売価格に千単位ごとにコンマを入れます。
文字列を置き換えます。
* 例 : 掲示板に「NOTICE」と表示される変数にreplaceモディファイヤーを適用し、
「お知らせ」と表示されるように文字列を置き換えます。
{$notice_icon|replace:お知らせ}
変数に適用されているタグをすべて削除します。
ユーザーが指定したフォーマットで日付(タイムスタンプ)を表示します。
(注意) $foo変数には必ずタイムスタンプ値を指定してください。
更新予定
すべての文字を小文字で表示します。
すべての文字を大文字で表示します。
該当する値にreturn falseが適用されている場合、display:noneとして処理されます。
* 例 : 商品情報の表示設定が「表示しない」になっている場合、display:noneとして処理されるため、画面には表示されません。