stryhのノート ~stryh/changelog

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

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

おかえり (≧∀≦)

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


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

まず・・・

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

オリジナル

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

カスタマイズ後

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

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

変更点

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

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

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

具体的には・・・

オリジナル

Bookmarklet1

カスタマイズ後

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

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

横に長いのでご注意を。

追記

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

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

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

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

具体的には・・・

オリジナル

Bookmarklet2

カスタマイズ後

Bookmarklet2 1
この追加で角丸&シャドウが実現できます。
プラスでアプリアイコン画像の周囲に余白、若干位置を変えています。
それがmarginの部分になります。
Firefox、Chrome、Safari、iPhoneで確認した際も画像角丸&シャドウになってました。

注意点

  • IEでは未確認です。
    • IE自体いらないですよね?
  • RSSから閲覧すると見事に画像角丸&シャドウが削られ通常の正方形のアイコンになります。
  • 少なくてもGoogle Readerではなりません。申し訳ないですm(_ _)m
    • RSSでも画像角丸&シャドウになるであろうと思っていたのですが、無視されてしまっていました。
    • ご容赦下さい。
    • 誰かこの解決方法がお分かりの方は教えて頂きたいです><

おまけ

AppHtmlメーカー

私がカスタマイズしたAppHTMLになります。

Leave a reply

*
*
* (公開されません)

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

Return Top