Yahooショッピングのスマホページに横スクロールを設置する

2019.01.032019.06.12

制約の多いYahooショッピングにおいて、特に制約が多いのがスマホページ。

Yahooショッピングのスマホページ、アプリで使える横スクロールUIを紹介します。

制約の多いYahooショッピングのスマホページにおいて、効果的に商品を表示できる手段です。

この記事の目次

横スクロールとは？

横スクロールとは、スマホのフリック操作で左右に移動させる手法です。

横スクロールでしたら表示範囲の少ないスマホにおいても、他の要素を圧迫することなく複数の商品を表示できます。

シンプルにCSSだけを使って実装できます。ややこしいJavaScriptを使わなくていいので簡単です、

というかYahooショッピングのスマホページではJavaScriptを使うことができないのでこれは仕方ないですね。

Yahooショッピングの専用アプリでも使えます。HTMLに特別な調整をする必要もないので設置後のメンテナンスもしやすいのが特徴です。

アプリの利用者が増加している現在、必須になってくる数少ないアプリ対応の１つになります。

横スクロールのタイトルと、詳細ページへ誘導する「もっと見る」のテキストリンクを用意しました。

商品数によって<li>タグを増やしてください。

CSSで横スクロールを実装しています。

横スクロールの詳細はこちら。

Yahooショッピングのスマホページでは外部CSS、<style>タグが使えません。

そこでHTMLのタグにstyle属性としてCSSを記述します。

しかし、タグ一つ一つにstyle属性を記述していくのは大変です。

そんな時に役立つツールがCSS inlinerです。<style>タグとHTMLをコピペした後、ボタン1つ押すだけで簡単にインラインCSSへと変換してくれます。

Yahooショッピングのページ作りをするのに必須のツールですので、まだブックマークされてない方はしておきましょう。

デモを用意したので実際の動作を確認してください。

※スマホですとスワイプして実際の動作を確認できます。

今回はYahooショッピングのスマホページで使える横スクロールを紹介しました。

制限の多いYahooショッピングで使える貴重なツールですので、重宝すること間違いなしです。

ぜひ横スクロールを活用してYahooショッピングのスマホページとアプリページを充実させてください。

今回のポイント