AppHtmlのデザインをモバイルファーストに変えたぜ！

LinkShareのリンクを手作業で差し替えてます、@jinnaitakumiです！

手作業ですべてを差し替えているので、ついでにHTMLタグも直して、デザインもモバイルファーストに変えてみました。

LinkShareから手作業でPHGのリンクに差し替え

LinkShareとはおさらばして、PHGへ移行するのに、すべてのリンクを手作業で差し替えることにしました。

アプリのリンクのLinShareからPHGの差し替え作業はすべて手動でやることにしました

ついでにHTMLタグとかも修正

昔むかし、よく分からずに付けたHTMLタグとかともおさらばして、綺麗に（？）組み直しました。

<div class="appHtmlFrame">
<div class="appImg">
<img width="100" src="${icon100url}" style="border-radius: 20px 20px 20px 20px;-moz-border-radius: 20px 20px 20px 20px;-webkit-border-radius: 20px 20px 20px 20px;box-shadow: 1px 4px 6px 1px #999999;-moz-box-shadow: 1px 4px 6px 1px #999999;-webkit-box-shadow: 1px 4px 6px 1px #999999;margin: -5px 15px 1px 5px;" alt="appIcon">
</div>
<span class="appTitle"><a href="${phgurl}" target="_blank" rel="nofollow">${title}</a></span>
<span class="appPrice"><br>【価格】${price}</span>
<span class="appCategory"><br>【カテゴリ】${category}</span>
<span class="appLink"><br><a href="${phgurl}" target="_blank" rel="nofollow">AppStoreでチェックする</a></span>
<div class="appDownloadButtonStyle"><a href="${phgurl}" target="_blank" rel="nofollow"><img src="https://jinnaitakumi.com/wp-content/uploads/appDownloadButton.png" alt="appDownloadButton"></a></div>
</div>

あとはCSSでデザインをイジるだけ。

.appHtmlFrame{
    max-width: 300px;
    background-color: #f3f9ff;
    line-height:1.8em;
    box-shadow: 0px 0px 6px 0px #cccccc inset;
    -webkit-box-shadow: 0px 0px 6px 0px #cccccc inset; 
    margin-top:10px;
    margin-bottom:30px;
    padding-top:20px;
    padding-bottom:10px;
    padding-left: 15px;
    padding-right: 15px;
}
.appImg{
    margin: 0 auto;
    text-align: center;
}
.appTitle{
    font-size:18px;
}
.appPrice{
    font-size:15px;
    line-height:1.6em;
}
.appCategory{
    font-size:15px;
    line-height:1.6em;
}
.appLink{
    font-size:15px;
    line-height:1.6em;
}
.appDownloadButtonStyle{
    clear:both;
    text-align:center;
    margin:0 auto;
}
 .appDownloadButtonStyle a{
        transition: 0.6s ease-out;
-webkit-transition: 0.6s ease-out; /* chrome, safari */
   -moz-transition: 0.6s ease-out; /* firefox */
    -ms-transition: 0.6s ease-out; /* ie */
     -o-transition: 0.6s ease-out; /* opera */
    text-decoration: none;
}
.appDownloadButtonStyle a:hover{
    filter: alpha(opacity=70);
    -moz-opacity: 0.7;
    opacity: 0.7;
    text-decoration: none;
}

モバイルファーストな感じで。

スマートフォンで見たときに、アイコンの横に文字が並ぶせいで、改行されまくって読みにくくなるのが、個人的にはあまり好きではなかったので、floatをかけない方式で。

レスポンシブ的に画面サイズに合わせて可変するようにしてもいいんですが、考えるのが面倒だった（笑）

AppHtml for PHGを使いました

AppHtmlみたいな感じで使える「AppHtml for PHG」でブックマークレットを作りました。

AppHtmlにならった形で、PHG対応のアプリリンクを生成するブックマークレットが作れます。

AppHtmlのカスタマイズに関連した記事もいくつか書いていますね。

• AppHTMLの画像リンク切れ対策で、AppHTMLをカスタマイズした
• 「アプリをダウンロードする」ボタンを大ちゃんに頂いたので、AppHtmlに組み込んだ！
• 私がブログを書くために使っているツールまとめ #ブロネク

まじありがたい。

おわりに

こういうデザインいじってる時がけっこう楽しいんですよね〜。

差し替え作業はマジで面倒くさいですけど（笑）
（これを書いてる時点で、全体の4分の1くらい終わりました。）