ワードプレスでつくる☆最強ネットショップ【2019年版】

WrodPressで☆最強ネットショップを作ろう!

EC専用テーマFlatsome

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

こんにちは。

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

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

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

Flatsomeの商品ページの説明

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

 

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

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

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

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;

例えばこんな感じです。

<p class="tategaki"> ここを縦書きにする </p>

p.tategaki {-ms-writing-mode: tb-rl; writing-mode: vertical-rl; }

ここを縦書きにする

 

これだけです。

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

 

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

 

 

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

 

 

-EC専用テーマFlatsome
-, ,

Copyright© WrodPressで☆最強ネットショップを作ろう! , 2019 All Rights Reserved.