ブログ環境をコツコツと更新。
iPhoneやMacのアプリを紹介する時に、MarsEditでは、AppStoreHelperを使わせていただいています。
デフォルトの表記では、こんな感じ。
MarsEdit - the blog editor for WordPress, Tumblr, Blogger and more. 
カテゴリ: ソーシャルネットワーキング
価格: ￥3,450
これを今回、こんな感じにカスタマイズしてみました。
MarsEdit - the blog editor for WordPress, Tumblr, Blogger and more.(Version 3.6.2)
価格:￥3,450(最新価格はStoreで確認してください)
カテゴリ:ソーシャルネットワーキング
評価:
(4 / 9件の評価)
ちょっとポチッとしたくなるデザインに出来たかな、と思っています。
カスタマイズ方法はこんな感じでやりました。
１．既存のデザインを理解する
まず、今までは特に気にすることなく既存のデザインを使わせていただいていましたので、既存のデザインがどのように出来ているのかを理解する事からはじめました。
AppStoreHelperの環境設定から一番いろいろな要素の入っているデザインパターン４をコピーします。
Sublimetext2に貼り付けてみます。
形式をHTMLにして、autoformatで整形します。
Sublime text2でHTMLを自動整形する方法は以下を参照ください。
すると、以下のように＄で囲まれたタグと普通のHTMLで書かれている事がわかるかと思います。
＄タグは、実際に取得しているコードと照らしあわせると中身がわかるかと思いますが、１例として
などがあります。$trackViewUrl$:AppStoreへのリンクURL
$sIconUrl$:アプリの小さいアイコンURL
※$lIconUrl$:アプリの大きいアイコンURL
$appStoreBadgeSUrl$:AppStoreへのリンク画像取得URL
$genre$:カテゴリ取得
$price$:価格
$releaseDate$:リリース日
２．HTMLとCSSを作ってみる
僕はTableタグがあまり好きではないので、divで作っていきます。HTMLはこんな感じで書きました。
HTML
<div class="appwrapper"><h3 class="apptitle"><a href="$trackViewUrl$" rel="nofollow" target="_blank"> <strong>$appName$</strong><small>(Version $version$)</small></a></h3><div class="appimage"><a href="$trackViewUrl$" rel="nofollow" target="_blank"><img src="$sIconUrl$" width="75px" /></a></div><div class="appinfo"><p>価格:<span class="infotext">$price$<span style="color:red; font-size:0.7em">(最新価格はStoreで確認してください)</span></span></p><p>カテゴリ:<span class="infotext">$genre$</span></p><p>評価:<span class="infotext">$averageUserRatingByStars$ ($averageUserRating$ / $userRatingCount$件の評価)</span></p></div><div style="clear:both"></div><a href="$trackViewUrl$" rel="nofollow" target="_blank" data-icon="" class="button blue appbutton">App Store</a></div><div style="clear:both"></div>
CSSはこんな感じ。
CSS
.appwrapper{display:block;margin:20px;}
.appimage{display: block;float: left;margin:5px;}
.appinfo{display:block;float:left;margin:5px 5px 0px 5px;padding-top: 5px;}
.appinfo p{line-height: 0px;vertical-align: top;font-size: 0.8em;vertical-align:middle;}
.infotext{margin-left:10px;}
.appbutton{margin-top: 0px;font-size: 1.3em;}
App Storeのボタンは、BonBon - Sweet CSS3 Buttonsから、CSSを使わせていただいて書いています。
３．完成
MarsEdit - the blog editor for WordPress, Tumblr, Blogger and more.(Version 3.6.2)
価格:￥3,450(最新価格はStoreで確認してください)
カテゴリ:ソーシャルネットワーキング
評価: (4 / 9件の評価)
最初、＄タグあたりの理解に時間がかかりますが、わかってしまえばいかようにも変形できます。
まだ、iPhoneからの更新環境をあわせられていないのですが、そのうちこのデザインに統一できるようにしたいと思います。
以上です。
