8月
8

続編「AppHtml」iOS7風ブックマークレットを自分用にカスタマイズしました。

シンプルカラーのAppHtmlテンプレート

IMG_8295
IMG_8295 Photo by mayo1950

先日、@hondamarlboroさんのブログを参考に、AppHtmlのiOS7風のカスタマイズに挑戦しました。

えーと、しかし、やっぱり、グラデーションが思い通りにはできないもんですね。:゚(;´∩`;)゚:。
色のセンスが問われそうですww

と、いうわけで、今回は
シンプルなテンプレートiOS7風のブックマークレットを作ってみました。
もちろん、ここでも@hondamarlboroさんのエントリから、コピペさせて頂きました。
いつもありがとうございます(^_^)

AppHtmlのテンプレートをiOS7風にカスタマイズ | 代助のブログ

iPhoneやiPadの次世代iOS7はフラットデザインを採用するらしいのでApp Storeアプリを紹介するAppHtmlブックマークレットのテンプレートをiOS7風にカスタマイズしてみました。 …


iOS7風は、以前のテンプレとどう違うの?

これは、私が使っていたテンプレートと言う意味です。

上のテンプレは、先日作ったものです。
下のテンプレは、その前に作ったものです。

テンプレ-1
テンプレ-1 Photo by mayo1950

↑の画像をご覧頂ければお分かりになると思います。

  • ベースとなるバックグラウンドの角丸なくす。
  • アプリアイコンの角丸のアール調整とシャドウの削除です。
  • フォントカラーを統一しました。

作ってから気がついたのですが、価格が入っていませんでしたので、今回は追加しました。

iOS7風シンプルカラーのテンプレート

出来上がったものが、こちらの3種類です。
特に3番目は、なんとなくiOS7を意識したカラーを選びましたw

テンプレ-2
テンプレ-2 Photo by mayo1950

もし、よろしければカスタマイズの際の参考に。なるかな〜??

/*---ミントグリーン---*/
<div style="color:#fff;background-color:#16e5c3;:margin:10px;padding:17px 10px 12px 10px;border-radius:15px;-moz-border-radius:15px;-webkit-border-radius:2px;min-height:100px;"><a href="${linkshareurl}" target="_blank" rel="nofollow"><img width="100" class="alignleft" src="${icon100url}" style="border-radius:22px;-moz-border-radius:22px;-webkit-border-radius:22px;margin: 0px 15px 1px 5px;border:none;padding:0px;float:left;"></a><a style="color:#ffffff;font-size:120%;font-weight:bold" href="${linkshareurl}" target="_blank" rel="nofollow">${appname} ${version}</a><br>価格:${price}<br>カテゴリ: ${category}<br>販売元: <a style="color:#ffffff;" href="${selleritunes}" target="_blank" rel="nofollow">${seller}</a>(サイズ: ${appsize})<br><a style="color:#ffffff;"href="${linkshareurl}" target="_blank" rel="nofollow">App Storeでcheck!</a><br style="clear: both;"></div>

/*---グレー---*/
<div style="color:#00bfff;background-color:whitesmoke;margin:10px;padding:17px 10px 12px 10px;border-radius:15px;-moz-border-radius:15px;-webkit-border-radius:2px;min-height:100px;"><a href="${linkshareurl}" target="_blank" rel="nofollow"><img width="100" class="alignleft" src="${icon100url}" style="border-radius:22px;-moz-border-radius:22px;-webkit-border-radius:22px;margin: 0px 15px 1px 5px;border:none;padding:0px;float:left;"></a><a style="color:#00bfff;font-size:120%;font-weight:bold" href="${linkshareurl}" target="_blank" rel="nofollow">${appname} ${version}</a><br>価格:${price}<br>カテゴリ: ${category}<br>販売元: <a style="color:#00bfff;" href="${selleritunes}" target="_blank" rel="nofollow">${seller}</a>(サイズ: ${appsize})<br><a style="color:#00bfff;"href="${linkshareurl}" target="_blank" rel="nofollow">App Storeでcheck!</a><br style="clear: both;"></div>

「AppHtmlメーカー」

@hiro45jpさんの「AppHtmlメーカー」を使います。
いつもありがとうございます!


書式の選択やリンクシェアIDをお持ちの方は入力してくださいね。
出来上がったものを、こちらのカスタマイズにペースとします。
Bookmarkletを生成するボタンをクリックすればできあがり。

AppHtmlメーカー
AppHtmlメーカー Photo by mayo1950

あとがき

ふと思ったのですが、バックグラウンドカラーとアイコンのイメージは相性がありますね。
その都度、違うテンプレ使えばいいけどw
それと、私のテーマのリンクカラーが青なので、フォントを全部同じ色に指定したいのに、
その回避策が、わかりません(^_^;
ひゃー、アイコンも中心にない、難しいことですわ。

Sylfeed 3.0.5
価格:¥170
カテゴリ: ニュース, ソーシャルネットワーキング
販売元: GACHANET – GACHANET(サイズ: 6.9 MB)
App Storeでcheck!
IFTTT1.0.1
価格:無料
カテゴリ:仕事効率化, ユーティリティ
販売元: IFTTT – IFTTT Inc(サイズ: 11.7 MB)
App Storeでcheck!

今日も暑いー
カスタマイズはこの辺にしときます(笑)
では、では。。

【こちらの関連記事もご覧ください】


記事をお読み頂き、ありがとうございます!

記事の内容を気に入って頂けましたか?
もし気に入って頂けましたら、
ソーシャルボタンで共有頂ければ、とても嬉しいです♪


follow us in feedly RSS

Leave a Reply

  • (will not be published)

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

This blog is kept spam free by WP-SpamFree.