Home > サイトいぢり > sIFRの設置方法

sIFRの設置方法

sIFRという技術があります。 ……という書き出しを以前もしたようなしてないような。

古いことは気にせずに、もう一度書くと、テキストをフラッシュに置き換えてくれる技術のこと。ちょっと読み込みが遅いかもしれませんが、このページも日付の部分が通常のフォントとは違って見えてるはず。（もし、Javascriptを切ってるならオンにしてみて下さい）

sifr-sample

sIFRを使えば、好きなフォントを使えるし、アンチエイリアスで表示することが出来ます。例えば、この日付部分には class=date と指定してますが、.dateに対してどういうフォントを割り当てるか一度設定してしまえば、あとは自動的にフラッシュに置き換えてくれて、javascriptを切っている人には通常のCSSでの表示で見せるという芸の細かさ。

自分の覚書も兼ねて設定方法を書こう書こうと思いつつ、結局、今回再度設置しようとしたらすっかり方法を忘れてたので今度こそちゃんと書き残しておきます。

この記事は sIFR 2 についての説明（覚書）です。

sIFRの設定・設置

1.sIFRのダウンロード

入手先は Mike Davidson -- sIFR 2.0: Rich Accessible Typography for the Masses

2.sifr.flaファイルの編集

.flaファイルを編集できる人はsifr.flaに好きなフォントを登録。
それ以外の人は FONTSMACK や sIFRFonts.com から好みのフォントをダウンロード。

3.sifr.jsを編集

sIFR.setup();

の下に以下のように記述。

sIFR.replaceElement(named({sSelector:"h1", sFlashSrc:"xxx.swf", sColor:"#000", sBgColor:"#FFF"}));

sSelectorにはsIFRを適用したい箇所の要素、クラス名、IDを記述。
h1, h2.date, h3#comment など。CSSの書き方と同じ。

sFlashSrc:"xxx.swf" はフォントを登録したフラッシュファイルまでのパス。
sColor:"#000" は文字の色。
sBgColor:"#FFF" は背景色。

複数の要素に適用させたい場合は、以下のように必要なだけ同じ書式で指定していく。

sIFR.replaceElement(named({sSelector:"h1", sFlashSrc:"xxx.swf", sColor:"#000", sBgColor:"#FFF"}));
sIFR.replaceElement(named({sSelector:"h2.date", sFlashSrc:"xxx.swf", sColor:"#000", sBgColor:"#FFF"}));

3.ファイルをアップロード

アップロードするファイルは、基本的には sifr.js 及び xxx.swf(フォントを登録してあるswf)の2種類。

4.(X)HTMLの編集

<head>～</head>間に以下のように記入。

<script src="sifr.js" type="text/javascript"></script>

5.cssの編集

screen.cssを参考にしますが、次の設定は絶対に必要。自分のサイトのCSSにコピペで追加します。

.sIFR-flash { visibility: visible !important; }
.sIFR-replaced { visibility: visible !important; }
span.sIFR-alternate
{
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
display: block;
overflow: hidden;
letter-spacing: 0;
}

さらに、sIFRを適用したい箇所へのCSSを追加。基本は

.sIFR-hasFlash h1 { visibility: hidden; }
letter-spacing や font-size などを適宜追加。

以上、思い出しながら書いたので、間違いや書き忘れがあったらすいません。

参考

sIFR Documentation & FAQ

関連記事

lush life* | sIFR 2 - Adblockのタブを表示させない設定

Comments:0

コメントはありません。
Comment Form
Remember personal info

Home > サイトいぢり > sIFRの設置方法

Ads
SiteSearch Google

Categories
Ads
Archives
Search
Feeds

Page Top