画像をCSSに変換してくれるという面白いジェネレーターがありました。
CSSと言うか、ソースはテーブルタグで作成されています。
・ 画像のサイズを調べる → テーブルの横・縦幅を決定
・ 1ピクセルずつの色を調べる → 各セルに塗っていく
これだけ。
かなり強引です。
私のTwitterアイコンで試してみました。
| Before（画像） | After（Img to CSS） | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
画像を角丸にさせる方法です。
CSS（Cascading Style Sheets）を使えば簡単に出来ます。
ポイントはイメージタグで貼るのではなく、CSSのバックグラウンドで貼る点にあります。
普通に画像を貼ると、以下のようになります。
（画像はiPhoneアプリのポケットベガスを例にしています）
WEB上のApp Storeで画像のURLアドレスを調べます。
ちなみにポケットベガスのURLアドレスは以下のコードになります。
http://a1.phobos.apple.com/us/r1000/015/Purple/68/a8/87/mzi.pkppkuxy.175x175-75.jpg
http://a1.phobos.apple.com/us/r1000/015/Purple/68/a8/87/mzi.pkppkuxy.100x100-75.jpg<img src="http://a1.phobos.apple.com/us/r1000/015/Purple/68/a8/87/mzi.pkppkuxy.175x175-75.jpg" alt="ポケットベガス" title="ポケットベガス" /><div class="app_icon_175" style="background-image:url(http://a1.phobos.apple.com/us/r1000/015/Purple/68/a8/87/mzi.pkppkuxy.175x175-75.jpg);"></div>.app_icon_175 {
width: 175px;
height: 175px;
-moz-box-shadow: 0 1px 2px #333;
-webkit-box-shadow: 1px 1px 1px #333;
border-radius: 30px;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
background-position: 0 0;
background-repeat: no-repeat;
}.app_icon_100 {
width: 100px;
height: 100px;
-moz-box-shadow: 0 1px 2px #333;
-webkit-box-shadow: 1px 1px 1px #333;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
background-position: 0 0;
background-repeat: no-repeat;
}
テーマにもよると思いますけど、私の使ってる 『CognoBlue 1.0』 では、半角英文字の小文字で書いたのに、なぜか大文字で表示される。
「なんでやーーー！？」 と悩みましたが、理由を知ってしまえば簡単。
テーマ内の 『style.css』 内の 『text-transform』 を全て削除しましょう。
CSSのtext-transformには、以下の役割があります。
例としてエントリー内にHTMLとかのコードを書く事がありますが、いざブラウザ上で見たら 『’』 （シングルクォーテーション）や 『”』 （ダブルクォーテーション）が大文字になってしまう。
『 ' 』 → 『 ’ 』 、『 " 』 → 『 ” 』 。
それをそのままHTML内のコードにコピーしようものなら、エラーが出る事間違いなし。
ちゃんと表示される時もあるし、されない時もある。
どーいった仕組みでなってるか分かりませんが、ちゃんと表示されない事を前提にした場合、これはまずいって事で調べてみました。
WordPressにはエントリーを書く所に 『CODE』 のボタンがあるのでそれだけを使用しがちですが、一般的には 『PRE』 タグも使わないといけないみたい。
使用例 （＆は大文字で表示しています）
<pre><code>＆lt;div id="wrapper"＆gt;～～～＆lt;/div＆gt;</code></pre><div id="wrapper">～～～</div>pre {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
