ブログ

@hitoriblogさん作 AppStoreHelperを導入・カスタマイズしてみました。

App Storeへのリンクタグがectoから速攻で貼れるAppStoreHelperがすごすぎ! - sorarium」という記事を読み、各所で絶賛されているAppStoreHelperを導入しました。面倒だから後回しにしていただけなのですが。

このサイトはHTML5で記載されているのですが、AppStoreHelperではき出されるHTMLは(X)HTMLを前提にして書き出されています。そのまま使ってもいいけど、マークアッパーとしてはそのまま使うのも面白くないし、デザイナーとしては見栄えが気に入らなかったりします。

そこで、できるだけ美しく、ついでにHTML5対応コードにカスタマイズしてみました。
ただ、CSS3を使用してカスタマイズしていますので、ブラウザ(IE8、Firefox 3.xよりも前のブラウザなど)によっては対応していないプロバティなどがありますので注意してください。

HTML5版コード

HTML5で記載すると以下のようになります。

HTML5で作っているので、<section>、<figure>タグなどを使用しています。
<h2>タグはご自身のサイトにあわせて改造してください。

HTML5版スタイルシート

このサイトで使っているスタイルシートは以下のようになります。

角丸を使用した枠を使ったり、アプリアイコン画像を角丸にしたりドロップシャドウを付けた枠を付けたりしています。マウスオーバーすると少し透明度を変えたりしています。

  • 幅600pxのコンテンツで作成することを前提にしています。
  • CSS3の要素を多用しています。 角丸、ドロップシャドウなどブラウザによっては対応しないプロバティがあります。
  • 最低限のスタイルしか記載していません。
    idやclassなどを付けてスタイルの優先順位を上げてください。

実際の見栄えは下のようになります。

幅600px前提で作成しているので、 div.AppInfoの幅を変更することでどんな幅にも対応できると思います。
ただ、アプリ情報の部分を<table>を使用しているので、コンテンツの幅が狭いときはカラム落ちするかもしれません。

アプリアイコンの角丸部分は、「border-radius」を15pxくらい指定しておけば、App Storeのアイコンと似た雰囲気になります。

IE6〜8に対応させるときには、CSS3 PIE: CSS3 decorations for IEなどのライブラリを導入してみれば、うまくいくと思います。
面倒なので自己責任でお願いします。

(X)HTML版コードとスタイルシート

参考までに、(X)HTMLで記載すると以下のようになります。

スタイルシートは以下になります。

  • 幅600pxのコンテンツで作成することを前提にしています。
  • CSS3の要素を多用しています。
    角丸、ドロップシャドウなどブラウザによっては対応しないプロバティがあります。
  • 最低限のスタイルしか記載していません。
    idやclassなどを付けてスタイルの優先順位を上げてください。

(X)HTMLでは使えない、<section>、<figure>タグを<div>タグに置き換えています。

まとめと次回予告

このスタイルをベースにフォントサイズや背景色、リンク色を入れ替えると見栄えのいい感じになるかと思います。IE6〜8あたりはちょっと残念なスタイルになりますが、そのあたりはご容赦ください。

作者の@hitoriblogさんが「デフォルトのFormatがしょぼいので、いいFormatを作ったら教えてください。」と言っていらっしゃるので、時間に余裕があったらFormatというか、3種類ほどテーマを作ってしまおうかな、と思います。これに関してはIE6/7/8にも対応するスタイル(角丸とかないと思うけど)で作成してみようと思います。

ゆめいろデザインへのお問い合わせやお見積もり依頼はこちらから。
お客さまのニーズにあった提案を行い、パートナーとして共に成長することを目指しています。