« Custom HTMLの使い方(ipaBacklist) | トップページ | 『大藤幹のHTML/XHTML/CSS辞典』リリース延期 »

Custom HTMLの使い方2(ipaBacklist)

この前、例として作ったものと似た様なもんですが、「iPhone生活」さんの「Yahoo!Japan」を作るのページを参考にさせて頂き、アプリ名も表示するようにしてみました。

こんな感じ〜happy01sign01
Img_0269_2 Img_0272_2

背景が白いのと、黒いのは、お好みでbodyのbackground-colorとul.btm aのcolorなどを変更してやってみて下さい。

あと、-webkit-border-radius: 12px 12px;で、アイコンを角丸にしてみたんですが、iPhone上では丸くならないですね??-webkit-box-shadow: の陰付けの方は機能してるみたいhappy01

ご興味のある方は、この前、例を参考に、以下のコードでpaper

<html>
<head>
<title>TEST</title>

<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,
    initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
<script type="text/javascript">
function updateOrientation() {
    switch(window.orientation) {
        case 90:
        case -90:
            document.body.setAttribute("ort", "yoko");
            var ort = "yoko";
            break;

        case 0:
        case 180:
        default:
            document.body.setAttribute("ort", "tate");
            break;
    }

    window.setTimeout("window.scrollTo(0, 1)", 500);
}
</script>
<style type="text/css">
<!--
body {
    background-color: white;
    margin: 0;
    padding: 0;
    -webkit-text-size-adjust: none;        文字の拡大を防ぐ
}

input[type="text"] {
    width: 100%;
    height: 33px;
}
input[type="image"] {
    float: right;
    width: 49px;
    height: 40px;
}

ul.btn {
    list-style: none;
    padding: 0;
}
body[ort="tate"] ul.btn {
    margin: 12px 0 0 10px;
}
body[ort="yoko"] ul.btn {
    margin: 12px 0 0 13px;
}
ul.btn li {
    float: left;
    width: 80px;
    padding: 0;
    center top;
}
body[ort="tate"] ul.btn li {
    height: 87px;
    margin: 0 0 3px 0;
}
body[ort="yoko"] ul.btn li {
    height: 81px;
    margin: 0;
}
ul.btn a {
    display: block;
    margin: 2 0 0 0;
    text-align: center;
    font-family: HiraKakuProN-W3;
    font-size: 12px;
    color: black;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-decoration: none;
}
-->
</style>

<ipaBacklist>
<!--
htmlencode {no}
applist {
<li><a href="[[[URLScheme]]]:" border=0 /><img src="[[[IconURL]]]" style="-webkit-border-radius: 12px 12px; -webkit-box-shadow: rgba(128,128,128,0.8) 0px 2px 2px"/><br>[[[AppNameOniPhone]]]</a></li>
}
replace {<ul>} to {<ul class="btn">}
replace {<h1>URL Schemes</h1>} to {}
-->
</ipaBacklist>

</head>
<body onload="updateOrientation();" onorientationchange="updateOrientation();" >

<!--<<<<<<<<<ReplaceData URLScheme>>>>>>>>>-->
<!--<<<<<<<<<ReplaceData Other>>>>>>>>>-->

</body>
</html>

|

« Custom HTMLの使い方(ipaBacklist) | トップページ | 『大藤幹のHTML/XHTML/CSS辞典』リリース延期 »

ipaBacklist」カテゴリの記事

iPhone / iPad 関連」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/221673/47358008

この記事へのトラックバック一覧です: Custom HTMLの使い方2(ipaBacklist):

« Custom HTMLの使い方(ipaBacklist) | トップページ | 『大藤幹のHTML/XHTML/CSS辞典』リリース延期 »