AppHTMLに「ダウンロードする」ボタンを追加しました

スクリーンショット 2012 12 24 13 46 10

どうもクリぼっち@_tenbiです。
最近、AppHTMLに「ダウンロード」ボタンをつけるのが流行っているようなので、僕も流れに乗って付けてみました。

…もちろん自作ですよ?

意外と簡単。作るのはね…。

用意したソフト

Macで画像編集が出来るソフトと言えばPhotoShopとPixelmaterぐらいしか無いですよね。今回はPixelmaterで作成しました。

Pixelmator Pixelmator
価格: ¥1,300
カテゴリ: グラフィック&デザイン, 写真
App Storeで詳細を見る


↑上の「アプリをダウンロードする」というボタンを作ったわけです。

Pixelmaterの使い方はここのサイトが参考になりました。

画像をアップロード

このブログを見てくれている皆さんのブログサービスは承知しかねるので、とりあえず僕が使っているWordPress 3.5で説明。

画像をアップロード

スクリーンショット 2012 12 24 13 54 34

左にあるサイドバーの「メディア」から新規追加を選択。「ファイルを選択」でFinderが開くので、先ほど作った画像を選択して「開く」。これでアップロードが完了します。

画像のURLを取得

次に、アップロードした画像のURLを取得します。メディア→ライブラリとアクセスして、お目当ての画像を見つけたら「編集」。

画像の編集画面で右の「ファイルのURL」をコピー。

スクリーンショット 2012 12 24 13 55 13

多分これでコピー出来ているはずなので、テキストエディタにでもペーストしておいて下さい。

ソースを作成

AppHTMLのソースを作ります。ここではDelaymaniaの記事のソースをそのまま使用しています。

[html]

<div class=&quot;ah_frame&quot;><span class=&quot;appIcon&quot;><a href=&quot;${linkshareurl}&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;><img src=&quot;${icon100url}&quot; width=&quot;100&quot; height=&quot;100&quot; class=&quot;ah_iconimg&quot; style=&quot;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; float:left;&quot; alt=&quot;${appname}&quot;></a></span><span class=&quot;appTitle&quot;><a href=&quot;${linkshareurl}&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;> ${appname}</a></span><br><span class=&quot;appPrice&quot;>価格: ${price}</span><br><span class=&quot;appCat&quot;>カテゴリ: ${category}</span><br><span class=&quot;appLink&quot;><a href=&quot;${linkshareurl}&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;>App Storeで詳細を見る</a></span><br><div class=&quot;ah_button&quot;><a href=&quot;${linkshareurl}&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;><img src=&quot;画像のURL&quot; width=&quot;300&quot; height=&quot;75&quot; alt=&quot;アプリをダウンロードする&quot;></a></div><br style=&quot;clear: both;&quot;></div>

[/html]

参考:アプリをダウンロードするボタンが付くようにAppHTMLをカスタマイズしました | delaymania

※画像のURLはご自身でアップロードした画像のURLをご使用下さい。

AppHTMLメーカーでブックマークレットを作成

最後に、先ほどのコードをAppHTMLメーカーでブックマークレットにします。
リンクシェアIDにご自身のIDを、出力方法を選択したら、「以下をカスタマイズ…」の部分に先ほどのコードをペーストします。あとは「生成」で終了です。ブックマークバーにドラッグ&ドロップすればOK!

スクリーンショット 2012 12 24 14 08 10

最後に

Pixelmaterで画像を作ったのはブログロゴに続いて二回目なのですが、簡単にそれっぽい画像が作れるので楽です。少しでも個性を出してみたい方はAppHTMLのカスタマイズおすすめです。
ではまた。

関連記事

このアプリで更新しました!

MarsEdit - the blog editor for WordPress, Tumblr, Blogger and more. MarsEdit – the blog editor for WordPress, Tumblr, Blogger and more.
価格: ¥3,450
カテゴリ: ソーシャルネットワーキング, 仕事効率化
App Storeで詳細を見る


Pixelmator Pixelmator
価格: ¥1,300
カテゴリ: グラフィック&デザイン, 写真
App Storeで詳細を見る


Skitch Skitch
価格: 無料
カテゴリ: 仕事効率化, グラフィック&デザイン
App Storeで詳細を見る


スポンサーリンク

この記事を書いた人