● 内容
① 指定した場所の文字にマーカーを付けます。
この時、文字の色と背景の色を同じにして文字を隠します。
② マーカー箇所をクリックすると文字が現れます。
● 例
今年は、午年です。
● やり方。
① CSSの一番下へ下記を追加します。
(色は調整してください)
/* --------------------------------- */
/* マーカー */
/* --------------------------------- */
.marker_c{
color:#ff0000; /* 文字の色 */
background-color:#ff0000; /* 背景の色 */
}
② 下記をフリープラグインへ追加します。
<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
<script type='text/javascript' src='http://usrcss.ameblo.jp/skin/templates/6d/7d/10030757386.css'></script>
<script type='text/javascript'>
$(document).ready(function(){
Marker_C(".marker_c","#ffff00","#000000");
});
</script>
■ 説明
・ 下記はフリープラグインに既にあれば不要です。
<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
<script type='text/javascript' src='http://usrcss.ameblo.jp/skin/templates/6d/7d/10030757386.css'></script>
・ Marker_C(".marker_c","#ffff00","#000000");
".marker_c" ・・・ クラス名を指定します。
"#ffff00" ・・・ クリックされた時の文字の色を指定します。
"#000000" ・・・ クリックされた時の背景の色を指定します。
③ 記事の書き方
HTMLモードにして該当箇所を <span class="marker_c"> と </span> で囲みます。
例
今年は、<span class="marker_c">午年</span>です。
HTMLモードは、HTMLタグを表示をクリックしてください(標準エディタの場合)
● ソースコード
function Marker_C(selectors,f_color,b_color){
$(selectors).click(function(){
$(this).css("color",f_color).css("background-color",b_color);
});
}