バレンタインデー直前！すぐに試せるCcSSのブックマークレット＆ブログパーツ

2013-02-12 10:13

この記事は約 8 分で読めます。

みなさんご存じ(?)のCcss = 『Chocolatecoating Style Sheet』をいろいろなサイトやご自身のサイト、ブログで簡単に試せるブックマークレット＆ブログパーツをご紹介します。
CcSSについての詳細はこちら↓
・「バレンタインデーにまだ間に合う！ブログやサイトをチョコレート色に彩るCcSSの実装」

見出しがチョコレートに！CcSS ブックマークレット

chocott_yahoo
見ているサイトの見出し(h1,h2,h3)がチョコレートに変身するブックマークレットです。まずは、下のリンク「Chocott!」をクリックしてみてください。当サイトの見出しがチョコレートに変化します。もう一度クリックすると元に戻ります。

Chocott!

上記のリンクをブックマークバーまでドラッグします。その他のWebページを閲覧中にこのブックマークレットをクリックすると、3つのWebサービスへのリンクが表示されます。(右クリックし、「お気に入り（ブックマーク）に登録（追加）」でも登録することが出来ます。)

チョコレートでおもてなし！CcSS ブログパーツ

chocott_SQUEEZE
当サイト右下部に設置してある「Chocott!」ボタンをご自身のサイトやブログに設置することができます。
chocott.js
上記、Jsファイルをダウンロードし、ご自身のサイトにアップロードして以下のタグを設置したいページの</body>直前に配置してください。(タグ位置は任意)

1	`<script type="text/javascript"` `src="/PATH/TO/chocott.js"></script>`

(Jsへのパス(/PATH/TO/)はアップしたディレクトリに合わせて変更してください。)

または、以下のコードを直接設置したいページの</body>直前に配置することで設置することができます。

<script type="text/javascript">
<!--
var hd0 = 'h1,'+
'h2,'+
'h3,'+
'#chocotted a,';
 
var ch0 = '#chocott a{'+
'  position:relative !important;'+
'  margin:5px !important;'+
'  padding:3px 10px 3px 35px !important;'+
'  text-decoration: none !important;'+
'  font-size: 20px !important;'+
'  font-weight: bold !important;'+
'  border-width: 3px 5px 12px 5px !important;'+
'  border-style: solid !important;'+
'  border-color:#7E534C #542916 #542916 #7E534C !important;'+
'  border-radius:4px !important;'+
'  color:#934D4A !important;'+
'  background:none #441302 !important;'+
'  box-shadow:0 4px 4px 0px rgba(0,0,0,.2) !important;'+
'}';
 
var hd1 ='h1:before,'+
'h2:before,'+
'h3:before,'+
'#chocotted a:before,';
 
var ch1 ='#chocott a:before{'+
'  position: absolute !important;'+
'  content:" " !important;'+
'  top:0 !important;'+
'  left:20px !important;'+
'  height:100% !important;'+
'  border-width:3px 3px 3px 0 !important;'+
'  border-style:solid !important;'+
'  border-color:transparent #350F02 transparent transparent !important;'+
'}';
 
 
var hd2 = 'h1:after,'+
'h2:after,'+
'h3:after,'+
'#chocotted a:after,';
 
var ch2 ='#chocott a:after{'+
'  position: absolute !important;'+
'  content:" " !important;'+
'  top:0 !important;'+
'  left:23px !important;'+
'  height:100% !important;'+
'  border-width:3px 0 3px 3px !important;'+
'  border-style:solid !important;'+
'  border-color:transparent transparent transparent #542916 !important;'+
'}'+
'#chocotted a:hover,'+
'#chocott a:hover{'+
'  margin:7px 6px 5px 6px !important;'+
'  border-width: 2px 4px 11px 4px !important;'+
'  box-shadow:0 2px 4px 0px rgba(0,0,0,.2) !important;'+
'}'+
'#chocotted a,'+
'#chocott a{'+
'  position:fixed !important;'+
'  display:inline-block !important;'+
'  bottom:10px !important;'+
'  right:10px !important;'+
'  font:bold 16px/1.6 Arial, Helvetica, sans-serif !important;'+
'}';
 
    var i0 = 'chocott';
    var i1 = i0 + 'ed';
    var d = document;
    var s;
 
    function chclear(){
        var v = d.createElement('div');
        v.id = i0;
        d.getElementsByTagName('body')[0].appendChild(v);
        v.innerHTML = '<a href="javascript:chocott();">Chocott!</a><style type="text/css">'+ ch0 + ch1 + ch2 + '</style>';
    }
 
    function chocott(){
 
        if(s = d.getElementById(i1)){
 
            d.body.removeChild(s);
            chclear();
 
        }else{
 
            s = d.getElementById(i0)
            d.body.removeChild(s);
            var v = d.createElement('div');
            v.id = i1;
            d.getElementsByTagName('body')[0].appendChild(v);
            v.innerHTML = '<a href="javascript:chocott();">Chocott!</a><style type="text/css">'+ hd0 + ch0 + hd1 + ch1+ hd2 + ch2 + '</style>';
 
        }
    }
     
    chclear();
 
-->
</script>