商品ページを作成する - MT-t サポート

ＨＯＭＥ > サイト管理構造 > ショップブログ > 商品ページを作成する

商品ページを作成する

2013年10月13日

ブラウザのウィンドウサイズに合わせて、その中の要素がレンガ状にレイアウトが変更するMasonry（メーソンリー）という手法をご紹介します。Masonryを和訳すると「レンガ建築」。レンガが積み重なっている壁をイメージしていただけるとわかりやすいと思います。

Masonryでレイアウト

商品を販売する場合は、商品画像を複数枚掲載する場合に、このMasonryを使った方法が便利です。

HTMLタグ入力になりますが、構造させ覚えてしまえば応用も効き、フレキシブルなレイアウトが出来ますので、是非、お試しください。

Masonryについてはこちらに詳細がありますので参照下さい。
⇒「masonryレイアウトについて」

画像の準備

商品画像を撮影して画像を整えます

商品の画像サイズを調整します。Lightboxで拡大されたときを考慮して、横幅は640px程度が良いでしょう。 サイズの大きさを調整するには「画像のサイズを簡単に変えるソフト」を参照下さい。

アップロードする商品画像をすべて、「ショップブログ」の「アイテム」→「新規」でアップロードします。 アップロード先は「img」のままで結構です。

商品ページを作成する

ショップブログの「ブログ記事」→「新規「」から『ブログ記事の作成』の画面にします。

各項目の説明

本文の入力方法

Masonryを使ったタグ構造は下記の通りです。

ステップ1

「masonry☆」の「☆」部分には「7」「6」「5」のどれかの数字（半角）を入れます。

ステップ2

の内に掲載する要素を<div class="box box☆">～</div>のボックスで囲み、１つずつ指定します。

このdivのbox☆の「☆」には「1」「2」「3」「4」のどれかの数字(半角)が入り要素のボックスの横幅サイズを指定します。おおよそのサイズは下記を参照下さい。

HTMLタグサンプル

次のステップで具体的なHTMLタグのサンプルをご紹介します。

回答は２営業日以内にメールでさしあげます。もし回答が届かない場合はメールが迷惑ボックスに入っているか、何らかの原因で受信できていない可能性があります。その際はお手数ですが再度ご相談フォームよりご入力ください。

よりスムースなサポートのために下記のアプリのインストールをお願いします。
Screen Capture (by Google)
Chromeの右上にアイコンが表示されます。そこから簡単に画面撮影でき、画像として保存することが可能です。ご相談の際、画面の画像を添付していただけると助かります。（詳しい使い方はこちら）

４ファイル以上添付したい方はこちらをお読みください。