マーカー(文字を隠す) | リアナのカスタマイズ日記(CSS編集用デザイン)

リアナのカスタマイズ日記(CSS編集用デザイン)

アメブロ 新CSS CSS編集用デザイン 無料
カスタマイズ アメブロカスタマイズ 初心者
CSS スタイルシート デザイン
javascript jQuery

★ マーカー(文字を隠す)


● 内容

① 指定した場所の文字にマーカーを付けます。
この時、文字の色と背景の色を同じにして文字を隠します。
② マーカー箇所をクリックすると文字が現れます。

● 例

今年は、午年です。


● やり方。

① 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);
});
}