実体参照文字コンバーター
実態参照と記載する場合もあるが、これは実体参照の誤字。
Wordなどでは表示可能だが、HTMLで表記する時にテキストやメモ帳に書くと勝手に「？」に置き換えられちゃったりする。
一例をあげると、中国語の発音を表す記号の、ピンイン（拼音）。
ピンインで「東京」と表記すると、
「Dōngjīng」
となる。
しかしこれをメモ帳などにコピペすると文字化けして
「D?ngj?ng」
となってしまう。
それを防ぐには、「ō」や「ī」の部分をテキスト上で、
ō や ī
と実体参照文字で記述する必要がある。
例えば、「馄饨」は実体参照文字では、
馄饨
になる。
実態参照文字への変換器を使って、文字列を特殊参照文字に置き換え、HTMLに記述するようにしておこう。
↓まとめてダウンロード↓
・デモセットのダウンロード
HTML
<head>と</head>の間で、cssとjQueryを呼び出す。
<head>
<link rel="stylesheet" type="text/css" href="css/styleflashy.css" />
<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
var shinyObj = '.button a span.shiny';
var shinySpeed = 800;
var interval = 2000;
$(function() { setTimeout('shinybutton()', 500 ); });
function shinybutton(){
$(shinyObj).animate({left:'+=630px'},shinySpeed).animate({left:'-120px'}, 0);
setTimeout('shinybutton()',interval);
}
</script>
</head>バナーを表示したい場所に、下記の記述を。
<div class="button"> <a href="#"> <span class="shiny"></span> <span class="btn"><img src="img/banner.png" /></span> </a> </div>
これだけ。
「#」は、リンク先を指定すること。banner.pngは任意の画像ファイルに変更可能。
var shinySpeed = 800;
var interval = 2000;
$(function() { setTimeout('shinybutton()', 500 ); });
function shinybutton(){
$(shinyObj).animate({left:'+=630px'},shinySpeed).animate({left:'-120px'}, 0);・shinySpeed は光のエフェクトが動くスピード
・interval は光のエフェクトが出てこない時間帯の長さ
・{left:’+=630px’},shinySpeed).animate({left:’-120px’} ここは、画像バナーの横幅に合わせて変更すること。
flashystyle.css の
.button a
.button a span.shiny
の2か所の width:、height:、left:、top:、のサイズも画像バナーに合わせて変更すること。
・button.css
・fontセット font-awesome.zip
DL元：fontawesome.io
↓まとめてダウンロード↓
・デモセットのダウンロード
HTML
<head>と</head>の間で、cssとフォントを呼び出す。
<head> <link rel="stylesheet" type="text/css" href="css/button.css" /> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> </head>
バナーを表示したい場所に、下記の記述を。
<div class="btn-yuya"> <a href="#">アニメーションバナーのデモ</a> </div>
これだけ。
「#」は、リンク先を指定すること。
青いバナー、キラキラ、矢印が動くバナーはこんな感じで↓
<div class="btn-yuya is-blue is-reflection is-trembling"> <a href="#">アニメーションバナーのデモ</a> </div>
青いバナー、キラキラ、矢印が動くバナーのデモはこちら。
| クラス名(記述) | 説明 |
| btn-yuya | 基本クラス(色指定しなければ緑) |
| is-red | 赤色バナー |
| is-blue | 青色バナー |
| is-black | 黒色バナー |
| is-reflection | キラキラ |
| is-trembling | バナー右の矢印を動かす |
| is-bounce | バウンド |
| is-purun | ぽよぽよ動く |
赤色で、全てのクラスを指定して動かすアニメーションバナーのデモはこちら
バナーのサイズ、フォントの大きさ、バナーの色やグラデーションをカスタマイズするには、 button.css の各クラスの部分をカスタマイズすればOK。
