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

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

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

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

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

横スクロールとは?

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

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

Yahooショッピング専用の横スクロールのポイント

CSSのみ使用

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

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

Yahooショッピングのアプリでも使える

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

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

横スクロールを実装する

HTML


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

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

CSS


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

横スクロールの詳細はスマホの横スクロールUIをCSSで実装する方法にて紹介しています。

インラインにCSSを記述する

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

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

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

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

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

デモ

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

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

See the Pen horizontal_scroll_yahoo(Yahooショッピングのスマホページ、アプリで使える横スクロール) by ざきひー (@zakihiii) on CodePen.0

まとめ

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

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

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

今回のポイント

  • CSSだけなので簡単
  • Yahooショッピングのアプリでも使える

横スクロールの実装方法について詳しくはスマホの横スクロールUIをCSSで実装する方法にて紹介しています。

Yahooショッピングカテゴリの最新記事