神ブックマークレットのAppHtml、ShareHtmlを自分なりにカスタマイズしてみました。

photo credit: Ember Code I via photopin (license)
スポンサーリンク

どうも、リョウ(@ryskyshd)です。

前々からずっと記事にしたかった内容ですが、今回はブログを書く上でとても重要なブックマークレットのひとつ、AppHtmlを自分なりにカスタマイズしましたよっていう話です。

参考にしたのは@delaymaniaさんの以下のブログ記事です。

AppHtmlの他にも、上記のように他の方のブログ記事などを紹介する際に便利なShareHtmlというものもあります。
これについても自分なりにカスタマイズしていますので、それはまた後ほどご紹介します。

さて、先ほどの@delaymaniaさんの記事を参考に、私は以下のようなソースに変更しました。

大変ありがたいことに、@delaymaniaさんはソースごと持って行って構わないと言ってくださっているので、お言葉に甘えてゴッソリいただきました。
まぁ多少class名とかは自分が分かりやすいように変更しましたけどね。

ここから、見た目の装飾は以下のようなCSSで改良を加えました。

これに加えて大事なのがclearfixです。
アプリアイコンとその他の文字群をきちんと横並びにするには必須です。

clearfixについては色々なやり方がありますが、これも@delaymaniaさんに倣って上記のCSSを採用しました。

当然ですが、今のところ全く問題なく使えています。
これで以下のようにアプリの紹介時の見栄えがよくなりました。

AppIcon
Evernote

価格:無料(記事掲載時)
カテゴリー:仕事効率化, ユーティリティ

また、@delaymaniaさんはこれにApp Storeへリンクするボタンを設置してさらに分かりやすくしていますね。

以上でAppHtmlの紹介を終わりますが、続いて、ほとんど変わりないのでShareHtmlのカスタマイズについても紹介します。
こちらも@delaymaniaさんのブログ記事を参考にしました。

私が採用している変更後のソースはこちら。

続いてCSSはこちらです。

どちらも丸パクリと言って過言ではありません(笑)

最後に

いかがでしたでしょうか。
以前にhtmlやCSSを弄ってた経験があるので、今回のカスタマイズもすんなりできましたが、やっぱり@delaymaniaさんの記事が分かりやすかったというのが一番大きかったですね。
改めて@delaymaniaさんの多才っぷりに感謝、感激です。

スポンサーリンク

この記事をシェアする

コメントを残す

メールアドレスが公開されることはありません。