ウラガミ

いわゆるチラ裏

AppHtmlとtext2applinkの角丸をiOS7に合わせる

読みました。
書きはじめてからいうのも何なんですが、この記事はほぼ代助のブログさんの記事をなぞりながらウチ仕様にしただけとなってますので、上の記事を読んでいただければこの記事は読まなくてもいいです←


ってことでうちもカスタマイズしてみました。
その結果がこちらになります。

Reeder 3.2
無料(記事投稿時)
AppStoreでチェック

せっかくなんでReederで合わせてみましたヽ(´エ`)ノ

角丸

iOS7からアイコンの角がより大きくなったってことで調整、細かい式も載っているので簡単に応用出来ました。

上記サイトでiOS7のアイコンサイズは縦横120pxに対して角Rが26pxとなっていますから比率は 1 : 0.2167 となります。アイコンサイズ100pxの倍、(100px) × 0.2167 = 21.67 となるので22pxに変更します。

うちはアイコンサイズを75pxにしているので、角Rを16pxにしました。(75×0.2167=16.2525)


あとはシャドーを消したり、外枠を消したりして完成!
最後にもう一度載せておきます。我ながらシンプルで良い感じです(自画自賛)

Reeder 3.2
無料(記事投稿時)
AppStoreでチェック


「よく分かんないけどマネしたい!」って方はAppHtmlメーカーのカスタマイズエリアにこちらを入れればOKです。

<div style=background-color:#f5f5f5;padding:15px 15px 20px;min-height:100px;"><a href="${linkshareurl}" target="_blank" rel="nofollow"><img width="75" class="alignleft" src="${icon100url}" style="border-radius:16px;-moz-border-radius:16px;-webkit-border-radius:16px;margin: 0px 15px 1px 0px;border:none;padding:0px;float:left;"></a><a style="font-weight:bold" href="${linkshareurl}" target="_blank" rel="nofollow">${appname} ${version}</a><br>${price}(記事投稿時)<br><a href="${linkshareurl}" target="_blank" rel="nofollow">AppStoreでチェック</a><br style="clear: both;"></div>



最近アツいtext2applinkの場合はformatに以下を挿入すればOKです。

参考:text2applink のフォーマットをカスタマイズする方法 | Simple Living

<div style="background-color:#f5f5f5;padding: 15px 15px 20px;display:block;"><a href="'+linkshareurl+'" target="_blank" rel="nofollow"><img src="'+icon150+'" alt="'+name+'" style="border-radius:16px;float:left;height:75px;margin-bottom:5px;margin-right:15px;width:75px"></a><a href="'+linkshareurl+'" target="_blank" rel="nofollow"><strong>'+name+'</strong></a><br>'+price+'(記事投稿時)<br><a href="'+linkshareurl+'" target="_blank" rel="nofollow">AppStoreでチェック</a><br style="clear: both;"></div>

text2applinkは使いやすいですし、カスタマイズも簡単なので知らない方はぜひぜひ使ってみてください!(勝手に宣伝)
私的にはBywordに入れとくのがオススメです。