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

…もちろん自作ですよ？

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

用意したソフト

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

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

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

画像をアップロード

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

画像をアップロード

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

画像のURLを取得

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

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

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

ソースを作成

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！

最後に

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

関連記事

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