バレンタインデー直前！すぐに試せる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>直前に配置してください。(タグ位置は任意)

<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>

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

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