IMG 7441

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

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

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

LinkShareとはおさらばして、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="http://jinnaitakumi.com/wp-content/uploads/appDownloadButton.png" alt="appDownloadButton"></a></div>
</div>

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

▼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;
}
▼ひとまずこんなデザインです
スクリーンショット 2013 09 10 5 17 16

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

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

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

AppHtml for PHGを使いました

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

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

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

まじありがたい。

おわりに

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

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