こんにちは。
令和初日のご挨拶につづき、二日目は動画をアップすることが出来ました。
今回は、商品ページのつくりかたです。
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;
例えばこんな感じです。
[st-cmemo fontawesome=”fa-file-text-o” iconcolor=”#919191″ bgcolor=”#fafafa” color=”#000000″ iconsize=”100″]
<p class=”tategaki”> ここを縦書きにする </p>
p.tategaki {-ms-writing-mode: tb-rl; writing-mode: vertical-rl; }
[/st-cmemo]
ここを縦書きにする
これだけです。
詳しくはこちらを御覧ください。
[st-cmemo fontawesome=”fa-external-link” iconcolor=”#BDBDBD” bgcolor=”#fafafa” color=”#757575″ iconsize=”100″]
[/st-cmemo]
こちらが商品ページの作り方の動画です。
今回も、お読みいただきありがとうございました。