文字に縁取りするノ Q&A

A.

最もおすすめの方法は、白抜き文字の画像を生成して、<img> タグでリンクすることです。このとき、画像を表示できないウェブブラウザーや目が見えない方向けに、代替テキストを alt で指定するのが好ましいです。

例: <img src="画像のURL" alt="テキスト">

白抜き文字画像は、文字に縁取りするノ で簡単に作成できます。

画像を使わない方法 その1

この方法は、IE 10 より前のバージョンでは白抜きが表示されないので、あまり、おすすめできませんが、IE10、Firefox、Chrome、Safari で表示できれば OK という方には満足いく結果が得られます。

サンプルコード

<h4 style="color:white;
text-shadow:
-1px -1px 0 black,
1px -1px 0 black,
-1px 1px 0 black,
1px 1px 0 black;">文字に縁取りするノ</h4>

※ ここでは、簡単のために、タグ内に style を指定しています。

↓この方法だと、IE 10 より前のバージョンなどでは、白抜き文字になりません。

---

文字に縁取りするノ

---

画像を使わない方法 その2 (Chrome, Safari)

この方法は、IE や、Firefox で白抜きが表示できないので、全くおすすめできませんが、Chrome と Safari で表示できれば OK という特殊な方向けです。

サンプルコード

<h4 style="color:white;
-webkit-text-fill-color:white;
-webkit-text-stroke-width:1px;
-webkit-text-stroke-color:black;">文字に縁取りするノ</h4>

※ ここでは、簡単のために、タグ内に style を指定しています。

↓この方法だと、Chrome, Safari 系でしか白抜き文字になりません。

---

文字に縁取りするノ

---

画像を使わない方法 その3

文字をずらして表示すれば、実現できそうですが、全くおすすめできない方法なので、あえて載せません。そのような方法を使うと、Google などの検索エンジンからスパム※と見なされて、検索の表示順位が下がってしまう危険性があるためです。

※ ここでいうスパムとは、検索順位を不当に上げるための仕組みのこと。意味もなく同じ言葉を羅列する行為は、スパムと見なされる場合がある。