こういうブログにて描いたドット絵を掲載したいというときに、ドット絵のギザギザをそのままに拡大表示したいと思う事は多いと思います。

そういうときにちょっとしたCSSを追加することで簡単にドット絵をブログで掲載することが可能になります。

---

まずはCSSの書き方

書き加えるCSSは1つだけです。ちょう簡単です。

img.pixel-art {
  image-rendering: -moz-crisp-edges;          /* Firefox */
  image-rendering: -webkit-crisp-edges;       /* Webkit (Chrome, Safari) */
  image-rendering: pixelated;                 /* W3C標準 */
  image-rendering: crisp-edges;               /* 古いブラウザ向け */
}

CSSの image-rendering を使用することで、拡大してもドットがスッキリ。

WordPress等で使用する場合、直接imgに指定することは出来ないので、特定クラスの中にあるimgに作用させるように設定します。

.pixel-art img {
    image-rendering: -moz-crisp-edges;          /* Firefox */
    image-rendering: -webkit-crisp-edges;       /* Webkit (Chrome, Safari) */
    image-rendering: pixelated;                 /* W3C標準 */
    image-rendering: crisp-edges;               /* 古いブラウザ向け */
}

必要であれば、画面の横幅いっぱいまで拡大するcssも追加しましょう。

.fitimage img {
  width:100%;
  height:auto;
}

imgに対してwidth:100%を指定すると、画像は強制的に横幅いっぱいまで拡大します。

アスペクト比をあわせる場合は、height:autoを設定すればそのままの比率で拡大縮小します。

このような感じで、ドット絵もきれいに掲載できるようになります。