現在位置:E-riverstyle Design ホーム
Development
JavaScriptライブラリ

blockquoteの表示に引用元を表示するためのjQueryプラグインです。
1.4.3 最低限のコントラスト: テキスト及び画像化された文字の視覚的な表現には、少なくとも 4.5:1 のコントラスト比をもたせる。(レベルAA)
本プラグインは、jQuery 1.5.1で動作検証をしています。jQuery 1.5.1以上が必要です。公式サイトから入手してください。入手したら、head要素の範囲以内にjQueryを設置してください。
<script type="text/javascript" src="jquery.js"></script>
また以下のような指定でもかまいません。
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
必要ファイルをダウンロードして、JSファイルを同じくhead要素の範囲以内に設置してください。
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="quoteeffect.js"></script>
また、下記のように本jQueryプラグインを動作せるために、head要素に設置してください。
<script type="text/javascript">
$(function(){
$("blockquote").quoteEffect();
});
</script>
下記のようにblockquote要素には、cite属性とtitle属性を必ず入れてください。どちらかが無ければ本プラグインは適用されません。
<blockquote cite="引用元のURL" title="引用元のタイトル">
<p>引用文/<p>
</blockquote>
本プラグインはoptionでblockquoteのデザインの変更ができます。それぞれのオプションは下記表となっています。
| オプション | 意味 | 値 |
|---|---|---|
| citeshowBorderWidth | blockquoteの範囲の左枠線のサイズ | 数値(px、em、%) |
| citeshowBorderStyle | blockquoteの範囲の左枠線のスタイル | solid、dotted(枠線のスタイル) |
| citeshowBorderColor | blockquoteの範囲の左枠線の色 | カラーコード |
| citeshowQuote | blockquoteの背景画像、デフォルトでは’の画像が表示される | 画像のパス |
| citeshowRepeat | 背景画像を繰り返し表示するか | no-repeat、repeat-x、repeat-y |
| citeshowBgPosition | 背景画像の位置 | 数値(%)、top、bottom、center、left、right |
| citeshowBgColor | blockquoteの背景色 | カラーコード |
| citeshowPadding | blockquoteのパディング | 数値(px、em、%) |
| citeshowFontWeight | blockquoteの文字の太さ | bold、normal |
| citeshowAlign | cite要素の位置 | left、center、right |
| citeshowLineHeight | blockquoteの行間 | 数値(px、em、%) |
| citeshowLineHeight | cite要素の文字の太さ | bold、normal |
| citeshowFontSize | cite要素の文字のサイズ | 数値(px、em、%) |
| citeshowPaddingTop | 上パディング | 数値(px、em、%) |
背景色と文字色を変更したい場合は下記のように指定してください。
<script type="text/javascript">
$(function(){
$("blockquote").quoteEffect({
citeshowBorderWidth : "10px",
citeshowBorderColor : "#999999"
});
});
</script>
本プラグインは、MITライセンスにてリリースしております。
ライセンス部分を改変しない限り個人商用問わず利用することができます。
フィードバックを受け付けています。フィードバックは下記リンクからお願い致します。