Flatsomeによる縦長商品ページの作り方

こんにちは。

令和初日のご挨拶につづき、二日目は動画をアップすることが出来ました。

今回は、商品ページのつくりかたです。

Flatsomeの商品ページは、上部が固定レイアウトで、その下エリアは自由にレイアウトできます。

注釈１．ショッピングカートをページ最下段に表示したり、デフォルト位置のショッピングカートを非表示することは出来ますが、標準では上部は固定レイアウトになっています。

縦長商品ページについての考察

縦長商品ページというと、いかにも派手で、ちょっとえげつない感じ物を想像します。

一方、上品な雰囲気の縦長商品ページは、ある程度のお値段のモノを販売するにはとても良いです。

A/Bテストなどはしていませんが、15年間の経験則です。

もちろんなんにでも例外はあります。室町時代の香道セット　300万円　などはこの世に1品しかない、また購入者が限られていますので、たった1枚の画像と簡単な説明文だけでも、探す人は探して問い合わせ電話なりメールが来ます。そのやりとりでご購入されますので、そこは臨機応変になります。

文字数が多くても、読まれる方はしっかりとお読みくださいます。

また画像も、上部レイアウトに何十枚でも掲載できますが、特に注目してほしい画像を下部レイアウトにうまく配置すると、スクロールだけで他の画像も閲覧できます。

CSSで縦書き表示もできるようになりましたので、そうしたテクニックを加えると、外国産のWordPressテーマでも、いかにもな日本的なページができます。

今回はCSSによる縦書き表示と、ふりがな表示だけですが、黄金比1:14ではなく、白銀比　1:1.6を利用しますと、より一層日本的になります。

さらに和カラーを組み合わせればもはや、純和風ページの出来上がりです。是非お試しください。

ホームページの文字にふりがなをふる

なお、ふりがなのタグは　<ruby>難漢字<rt>なんかんじ</rt></ruby>

です。

ホームページの文字を縦書きにする

縦書きのCSSは、CSS初心者にも簡単です。

writing-mode: vertical-rl;

だけです。

インターネットエクスプローラでも正しく表示されるようにするには、頭に　-ms　をつけて、tb-rl　とするだけ

-ms-writing-mode: tb-rl;

例えばこんな感じです。

ここを縦書きにする

これだけです。

詳しくはこちらを御覧ください。

こちらが商品ページの作り方の動画です。

今回も、お読みいただきありがとうございました。