はてなブログのドックを開発していく1
下部にドックを追加するスクリプト
Sample
<span id="docModule"style="position:fixed;bottom:-2px;left:20px;width:90%;height:46px;background:#000;filter:alpha(opacity=90);-moz-opacity:0.90;opacity:0.90;border-top-left-radius:20px;border-top-right-radius:20px;border: groove #AAA 2px;color:#FFF;background: -webkit-gradient(linear, left top, left bottom, from(#555), to(#000)); background: -moz-linear-gradient(#555, #000); "></span> <script type="text/JavaScript"> function clearDoc(){ document.getElementById("docModule").style.display = "none"; } document.getElementById("docModule").innerHTML += ' <span id="clear_doc" onClick="clearDoc()" style="font-size:20px;border:1px solid #AAA; background:#000;">☓</span>'; document.getElementById("docModule").innerHTML += '<span style="font-size:0.8em;padding:10px;">flandle\'s scarlet</span>'; document.getElementById("docModule").innerHTML += '<img src="http://cdn-ak.f.st-hatena.com/images/fotolife/f/flandlescarlet/20120119/20120119192047.png" style="float: right;" onClick="Scroll_to_the_top()">'; document.getElementById("docModule").innerHTML += '<br><span style="font-size:0.8em;padding:10px;" >Copyright © 2012 id:flandlescarlet</span>' </script>
久しぶりの開発となります。
前回までスクロール関係に関して、考えていましたが今回はドック製作していこうと思います。
上部のスクリプトをそのままモジュール欄に追加すれば機能しますが、一部前回のスクロールアップの分も含んでおりますので、無い場合はそちらも別途に追加
またその部分をこのスクリプト本体から抜けば大丈夫です。
青字の部分がそのソースとなります。
とりあえず次回から追加する内容とかいろいろ考えていこうと思います。
ドックの概要を記述しておきます。
推奨順ブラウザ
ですOS関係で表示が変わることもありますがMac以外での動作は確認済みです。
その他の注意
CSSの編集
スクリプトは出来る限り貼り付けで済むようにCSSのデザイン全部をインライン要素に組み込んでます。
span要素にかなりのプロパティと値を追加したのでCSSに移し変えたい場合はこちら
span#docModule{position:fixed;bottom:-2px;left:20px;width:90%;height:46px;background:#000;filter:alpha(opacity=90);-moz-opacity:0.90;opacity:0.90;border-top-left-radius:20px;border-top-right-radius:20px;border: groove #AAA 2px;color:#FFF;background: -webkit-gradient(linear, left top, left bottom, from(#555), to(#000));background: -moz-linear-gradient(#555, #000);}
追加した場合はjs側のstyle属性をそのまま消してください。
テキストの要素
一応このブログにあるドッグそのままを引用しております。
コピーライトや名前に関しては書き換えてください。