文字に縁取りするノのアイコン

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

Q.

HTML のタグで文字に縁取りするには?

A.

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

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

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

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

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

サンプルコード

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

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

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


文字に縁取りするノ


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

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

サンプルコード

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

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

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


文字に縁取りするノ


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

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

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

今すぐ、無料ダウンロード

文字に縁取りするノ ダウンロード

ご意見・ご要望など

ご意見・ご要望などは フォームメール から送信してください。
更新情報は、 ブログ でも配信してます。

共有