宅配の送料を表で作る時のスマホ対応

配送費の表は、地域・サイズで横軸・縦軸とした表になることが多く、横幅が広い表になりがちです。
パソコンで見てるぶんには何も問題ないんですが、このような横に広い表をテーブル(tableタグ)で作った場合、スマホでみた時に色々と問題がでてきます。

宅急便・佐川急便の料金表

BiNDの表(テーブル)にある送料一覧

BiNDupの表(テーブル)ツールにある送料一覧の表を試してみましょう。
一見するとパソコンでみた時は問題なさそうですが、スマホで見ると都道府県名は一文字づつ改行されるような形になり、わかりやすいとは言えません。また、連続する半角英数字の途中では改行されないという基本的な仕組み(単語や金額などの途中で改行されるとわかりにくいからだと思います)のため、金額の桁数が多くなった場合にはスマホで横幅に収まらなくなります。これは表の部分に横スクロールが設定されたのではなく、ページ全体に影響します。
スマホでみたとき、スクロールする時に画面が左右にブラブラと動くような感じになります。試しに下のブロック(これが本来のブロックの幅)に色をつけてみると、表がはみ出していることがわかります。

また、BiNDupの表(テーブル)パーツから入れる表は、各セル(td)に背景色や枠線などの設定が記述されるという作りになっています。表の見せ方をCSSで管理するにはこれらのtableのソースに直接書かれた設定はなくしたいところです。

※音声なし

スマホ対応したシンプル設定の送料一覧

スマホで見た時、一文字づつ改行されるようなこともなく、表の部分だけを横スクロールで処理したBlockDesignを作成しました。
横スクロール処理だけならCSSのみで対応できますが、このブロックでは横スクロールできることを表示するためにスクリプトも使っています。そのCSSとスクリプトはprice_008のページ設定>スクリプトと詳細設定に記載していますので、使いたいページにブロックをコピペしてから、これらのCSSとスクリプトもコピペしてください。

表の色(一番上の色と、1行おきの薄めの色)や余白は、スクリプトと詳細設定の「<head>内」にペーストしたCSSを変更することで調整可能です。サイトの色や余白感に合わせて調整してください。

※音声なし

配送元の地域の違いや料金改定時はコピペで対応できるExcelを用意

送料はその配送元と配送先によって料金が異なるため、配送元となる企業側によって料金表は異なることになります。例えば、ネット販売をしているサイトで、その配送元が大阪だとした時、大阪からの送料となる表になっている必要があります。

BlockDesignのprice_008は、一例として料金が入れてありますが、これを実際の発送元の料金に合わせて変更するのは数字の数が多いので手間がかかりそうです。また、宅急便や佐川急便のサイトを見ながら手入力するのは間違いもおこりやすいと思います。

そこで、宅急便と佐川急便の表の書式に合わせてprice_008を作っていますので、価格の変更をコピペだけでできるようにするExcelを作ってみました。料金の表の価格部分(地域・都道府県の行はコピーしません)のみ全部選択してコピーします。それからExcelにペーストします。

宅急便:Excel「宅急便」タブのA6セルに貼り付けます。
佐川急便:Excel「佐川急便」タブのA4セルに貼り付けます。

公式サイトから該当地域の料金をExcelに貼り付けると、BiNDupのテーブルで使えるHTMLソースを自動的に作る関数を入れてあります。

宅急便
O4からO11までをコピーしてから、テーブルエディタで編集をクリックします。「HTMLソース」をクリックすると表を構成しているHTMLソースが表示されますので、都道府県の下にある<tr>から下から4行目の</tr>までを選択してペーストすると料金が書き換わります。
宅急便の料金表は数字で入っているため、Excelに貼り付けただけだとカンマ(,)が入りません。それでも気にならない場合はそのままでOKですが、カンマ( , )を入れたいと思った方は、O14からO21をコピーして下さい。こちらは関数処理でカンマが入った文字に変換した金額を利用します。

佐川急便
P4からP14までをコピーしてから、テーブルエディタで編集をクリックします。「HTMLソース」をクリックすると表を構成しているHTMLソースが表示されますので、都道府県の下にある<tr>から下から4行目の</tr>までを選択してペーストすると料金が書き換わります。
佐川急便の料金表は円という文字が入っています。円を削除したいと思った方は、P18からP28をコピーして下さい。こちらは関数処理で円の文字を削除した金額を利用します。

※音声なし

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA