Blog
Webデザイン

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

2013-02-12 10:13
この記事は約 8 分で読めます。

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

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

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

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

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

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

[javascript] <script type="text/javascript" src="/PATH/TO/chocott.js"></script> [/javascript]

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

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

[javascript] <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> [/javascript]

仕組みとしては、リンクをクリックするたびに、スタイルシートの追加/削除を繰り返しています。

いかがでしたでしょうか?「試してみたよ」なんていう方がいましたら以下のfacebookコメントやシェアから感想やご意見いただけると嬉しいです。よろしくお願いします。

> Blog > Webデザイン >
あわせて読みたい