Chrome Web Store 用の宣伝用タイル画像をHTMLとCSSで作る

前に作った「CPAN Helper」、「Social!Social!Social!」用に応急処置的に作ってみたら結構良かったので。

最近（結構前）の Chrome Web Store のリニューアルで、app / extension 開発者はスクリーンショットの他に、「宣伝用タイル画像」というのを icon 画像などとは別に用意しなきゃいけなくなった。でも画像編集ソフトとか起ち上げて作るのも面倒くさい。かといって普通に無地にロゴだけというのも他の app / extension と並べられたときにちょっと…という感じ。そこで別に hack でも何でも無いんだけど、HTMLとCSSで形を作って、それを画像に変換、という方法をやってみた。

ブラウザでHTMLファイル開きながら調節して、出来たら適当に Jing.app とかで指定サイズ（タイル（小） - 440x280）に切り取って .jpg で保存するだけ！

Social!Social!Social!

<html>
<head>
<style>
html, body{
margin:0 auto;
padding:20px 0;
color:#666;
width:1000px;
font-family: "Helvetica Neue", "Lucida Grande", Arial, Helvetica, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, sans-serif;
text-align:center;
background:white;
}
[id*="tile"] {
padding:20px 0;
}
[id*="tile"] h1 {
font-weight:100;
letter-spacing:-1px;
line-height:80%;
}
#tile-s {
width:442px;
height:242px;
box-shadow:1px 1px 200px rgba(0,0,0,0.4) inset;
}
#tile-s h1 {
margin-top:40px;
font-size:50px;
}
</style>
</head>
<body>
<div id="tile-s">
    <h1>Social!Social!Social!</h1>
    <img width="100px" src="icon_128.png" />
</div>
</body>
</html>

• Jing
• iPhone-like icon maker
• Social!Social!Social!
• CPAN Helper