sripemania
バックグラウンド等でよく使われるストライプをオンラインで作成できるサイト。
バックグラウンド等でよく使われるストライプをオンラインで作成できるサイト。
- stripwidthで線の太さ
- spacingwidthで線と線の間隔
- stripeorientationでストライプの方向
- backgroundcolorで背景色
- stripecolor(s)でストライプの色を設定左右で色を変えてgradientをonにするとグラデーションの線でストライプを作れます。
概要
- ソースにはテキストを書くが、ブラウザで出力されるのは画像。
- <h2>heading01</h2>がソースは<h2>heading01</h2>のまま<h2><img src="heading01" /></h2>として出力される
メリット
- ソースは<h2 id="heading01" class="jqir">javascriptでソースを汚さずテキストを画像へ</h2>のようにテキスト情報を入れられる。
- 従来のCSSで背景で実現するものとは違い、印刷時にも問題なく、ブラウザで画像を表示しないようにしていてもテキストが表示される。
- idで画像のファイル名を適応させていくので同一ページ内に同じものを使うとidが重複してしまってvalidにならない。
- jqueryライブラリ・JQIRをダウンロードしてきて、解凍し任意のフォルダに置く。
- htmlのheadに
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-jqir.js"></script>
のように記述し、jqueryライブラリ・JQIRを読み込む。 - jquery-jqir.jsの最後に$(function(){
$(".jqir_jpg").jQIR("jpg", "img/");
});
のように記述する。
$(".jqir_jpg")は任意のCSSクラス名
.jQIR("jpg", "img/")の
"jpg"は適応させる画像フォーマットPNGに適応させる場合"png"となる。
"img/"は画像までのパスを記述。
例えば、JQIRを同階層のimgというフォルダの中にあるpngにjqir_pngというクラス名で適応させたい場合は
$(function(){
$(".jqir_jpg").jQIR("jpg", "img/");
$(".jqir_png").jQIR("png", "img/");
});
となる。 - html側への記述は
<h2 id="welcometoboplog" class="jqir_jpg">welcome to boplog</h2>
とする。
classを入れることでjqirが適応される。
idで画像を指定するので、上記の場合welocometoboplog.jpgという画像がこのh2に対して置換される。
例えば、helloboplog.pngという画像に置換したい場合は、
<h2 id="helloboplog" class="jqir_jpg">hello boplog</h2>
という形になる。
