古い携帯サイトをスマートフォンにも対応させたいとのご依頼がありました。
個人商店の方だったのですが話を聞いてサイトを見てみると、昔のテイストが漂う携帯サイトでこれをスマートフォンで見たときには見栄えを良くしたいとの事。
依頼のあった携帯向けのサイトはだいたい
・幅240pxを前提にしてる
・CSSとか使えない事が前提の産物なのでtableとかで揃えてある
・hrタグで要所を区切ってある
という内容で、ガラケー向けサイトでは当たり前といえば当たり前な作りなわけです。
もちろんコレをスマートフォンで見ると、何ともノスタルジックな気持ちになるわけです。
最近の携帯でも幅240pxなどはあるのでこれはいいとして、他の部分はそれっぽくしたいということで
・全体的に画像を刷新
・アクセスする端末をいくつかのカテゴリーわけして表示を変える
という提案を行うも、予算の都合で断念。
何故かというと「ちょちょっとやれば出来るんでしょ？」と思ってたみたいで、1日もかからず出来るものと思っていたそうです。
とは言っても無下に断ることも出来なかったので予算以内で出来る手立てとして
・サイトにあわせた簡単なCSSを追加する
という内容に落ち着きました。
そのまま載せることは出来ないのでサンプルを用意
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="sample.css" type="text/css">
<title>sample</title>
</head>
<body bgcolor="#ccffff">
<h3>当店人気商品</h3>
<hr>
<table width="100%" border="0">
<tr><th>商品1</th><td>980円</td><td><a href="#">注文</a></td></tr>
<tr><th>商品2</th><td>1,280円</td><td><a href="#">注文</a></td></tr>
<tr><th>商品3</th><td>4,980円</td><td><a href="#">注文</a></td></tr>
</table>
<hr />
<table>
<tr><td>問合せ</td></tr>
<tr><td>発送について</td></tr>
</table>
</body>
</html><h3 {
border-left:solid 0.7em #a9a9a9;
font-size:21px;
color: #908070;
font-weight: bold;
}
hr{
margin-top: 2px;
margin-bottom: 2px;
border-width: 0px 0px 0px 0px;
border-style: solid;
border-color: #ccffff;
height: 1px;
}
body
{
margin: 0;
padding: 0;
margin-left:5px;
margin-right:5px;
margin-top:5px;
margin-bottom:5px;
-webkit-text-size-adjust:none;
}
a
{
padding-top: 8px;
padding-right: 8px;
padding-bottom: 12px;
padding-left: 8px;
margin-top: -8px;
margin-right: -8px;
margin-bottom: -12px;
margin-left: -8px;
text-decoration: none;
color:black;
}
table
{
padding: 0;
margin-top:0;
margin-right:10px;
margin-bottom:0px;
width: 100%;
background-color: white;
/* border-collapse: collapse; */
border-width: 1px;
border-style:solid ;
border-color:rgb(217,217,217);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
tr
{
padding: 0;
margin-top:0;
margin-right:10px;
width: 100%;
background-color: white;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
td
{
border-bottom-width:1px;
border-bottom-style:solid;
border-bottom-color:rgb(217,217,217);
}
th
{
border-bottom-width:1px;
border-bottom-style:solid;
border-bottom-color:rgb(217,217,217);
}
関連記事
