@hiro45jp謹製Bookmarkletをちょっちカスタマイズ

先日、兄貴こと@hiro45jpさん謹製Bookmarkletが大幅にアップデートされ帰ってきました！

おかえり (≧∀≦)

そのエントリーは↓になります。
iOS/Macアプリ紹介のAppHtmlが大幅リニューアル♬ | 普通のサラリーマンのiPhone日記
先日、大幅なアップデートをされ帰ってきたAppHTML。
もう神の領域です (;´Д｀)

オリジナルのBookmarkletでも充分威力を発揮していますが、hiro45jpさんのエントリーにも書かれていますが、諸事情によりアプリアイコンの角丸を断念したと書かれています。
そこでCSS大臣の名誉にかけてちょっと頑張ってみようと思いカスタマイズを思いつく。
じゃー、何をカスタマイズしたのかをご紹介でごあす (´∇｀)

まず・・・

オリジナルと私のカスタマイズしたBookmarkletで生成されるHTMLの比較から
テンプレートは中アイコン表示で比較。
アプリはするぷろを使用。

オリジナル

するぷろ for iPhone 1.1（￥350）
カテゴリ: ソーシャルネットワーキング, 仕事効率化
販売元: Gachatech – isshin（サイズ: 1.4 MB）
全てのバージョンの評価: （11件の評価）

カスタマイズ後

↑2つを比較してお分かりの様に画像の角丸＆シャドウ、アプリアイコンの周囲に余白を持たせるようカスタマイズしました。

変更点

変更点は2点になります。

viewinitunes_jp.pngのimgタグにstyle属性を追加

imgタグに下記コードを追加。

style="vertical-align:bottom;"

具体的には・・・

オリジナル

カスタマイズ後

Bookmarklet1 1
これをすることでiTunesで見るの画像リンクの位置を脇テキストと同じ位置の様に見せれます。
単なる私のこだわりなのでもし自分で当エントリーのカスタマイズをする際は不要です。

アプリのアイコン画像のimgタグのstyle属性を追加

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;"

横に長いのでご注意を。

追記

テンプレート – 大アイコン

style="border-radius: 25px 25px 25px 25px;-moz-border-radius: 25px 25px 25px 25px;-webkit-border-radius: 25px 25px 25px 25px;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;"

テンプレートが大アイコンの場合は角丸の指定を20px->25pxにするといい感じの角丸になります。

テンプレート – 小アイコン

style="border-radius: 11px 11px 11px 11px;-moz-border-radius: 11px 11px 11px 11px;-webkit-border-radius: 11px 11px 11px 11px;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;"

テンプレートが大アイコンの場合は角丸の指定を20px->11pxにするといい感じの角丸になります。
ここは個人のお好みで数値を指定して下さい。

具体的には・・・