ウェブサイトでの使い方

ウェブサイト、ブログでのico電の使用方法をを説明します。

とはいえサイトやブログを運営している人なら説明は不要だとは思いますがico電の画像サイズが大きいためその補足です。

ico電をキレイに表示させる

ico電は192×192で作られています。これをそのまま表示すると

この大きさになります。サイトで利用するにはちょっと大きすぎるかと思います。

なので、画像を表示するimgタグの数値をいじります。

<img src="http://〜（アドレス）/S_JREXP_E7.png" width="96" height="96">

と、widthとheightのところを96にすることで

元の半分でこの見た目になります。画像自体のサイズはそのままなのでratinaディスプレイや4kディスプレイ、スマホからでは滑らかな見た目になります。ico電ひろばでもこの大きさで表示させており、これがico電の本来想定している大きさです。

これでも大きい場合は

<img src="http://〜（アドレス）/S_JREXP_E7.png" width="48" height="48">

<img src="http://〜（アドレス）/S_JREXP_E7.png" width="24" height="24">

が良いかと思います。

数値は自由に決めてもいいんですが、これら（24・48・96）整数倍の数値を入れることで美しく表示できます。

注意点

ico電は輪郭線を描いていません。なので、背景が白いサイトでは、

こんな風にJRの周りが白い車両などは、多少色を入れていますが背景と同化して見えてしまうのでご注意ください。

その場合は↑のようにCSSのfilter: drop-shadow()を使うことで影を付けることで輪郭をはっきりさせることができます。

丸いico電-Rでもちゃんと形に沿って影が付きます！

<img src="http://〜（アドレス）/S_JR211A.png" width="96" height="96" style="filter: drop-shadow(0px 0px 5px rgba(0,0,0,0.5));">

filter: drop-shadow()の簡単な説明

filter: drop-shadow(左右の位置px 上下の位置px ぼかし具合px 色)
となるのでの↑の画像に入れた
filter: drop-shadow(0px 0px 5px rgba(0,0,0,0.5))
は影の位置はそのままにぼかしが5pxで透明度50%の影が入ります。

filter: drop-shadow(0px 0px 1px rgba(0,0,0,1))

とすると輪郭を入れたような感じになります。

※ちなみに、filter: drop-shadow()はIEには対応していません。