.

information



blog:毎日更新!

時計台

↓カスタマイズ前
BLOGアクセサリー用の時計で簡単にカスタマイズできるものはないかな?と探していた時に見つけた clock-widgetsのブログパーツ時計。 こちらのDIGITAL/SIMPLE/MONOTONEは背景が透明なので、背景画像を変えれば自分好みの時計に簡単にカスタマイズできます!
↓背景を設定
バイオレット小桜とすみれの花をあしらった背景を設定してみました。でも、気になるのが「ブログパーツ時計」の文字。文字の位置が中途半端だし、設置箇所の背景によっては見づらい。これはclock-widgetsへのリンクになっているので削除するのはマナー違反だと思うので、削除せずにマウスオーバーした時に表示するようにカスタマイズ!

↓カスタマイズ完了!
←マウスオーバーした時の画像です。「ブログパーツ時計」の文字背景色もつけてhover時にリンクをクリックできるようにして完成。これをblogサイドバーなどに設置すれば自分なりにカスタマイズした時計が設置できます!(複数設置するとエラーになるのでこちらでは実際のものは設置していません。サイドバー付近の時計が設置したものです)

設置してみたい方がいましたら下記の画像と方法を参考にチャレンジしてみてくださいね!
 幅160px以上のサイドバーなどに設置できます。

※質問は受けておりません。わかる方のみお願いいたします。
 画像を使用した方はできればリンクをどこかに入れてくださると幸いです。
カスタマイズ方法
←背景画像(ダウンロードして使用してください)
直リンクは禁止です
カスタマイズ前にはバックアップをしてから作業してください。
下記のタグを設置したい所に記述(ピンク文字:変更箇所)
<div class="clockbg1">
<!--ここに、clock-widgetsで配布しているコードをペースト-->
</div>
下記をCSSファイルの最後に追加(ピンク文字:変更箇所)
/*時計*/
.clockbg1
{
background: url("画像URL") no-repeat scroll 0 0 ;/*画像urlを指定。ここはかならず変更!日本語のままではエラーになります*/
padding-top: 14px;
margin: 10px auto;
width: 160px;
position: relative;
}
.clockbg1 a{
display: none;
}
.clockbg1:hover a{
background-color: #AB7DA1;
display: block;
padding:5px;
position: absolute;
top:40px;
left:30px;
color:#fff;
background-color: rgba(171,125,161,0.5);
background-color: rgba(171,125,161);/*IE用*/
/*※box-shadowはIE8以下は未対応です*/
-webkit-box-shadow:2px 2px 3px #ABA090;
-moz-box-shadow:2px 2px 3px #ABA090;
box-shadow:2px 2px 3px #ABA090;
}
/*時計end*/
 ※/*コメント部分は削除可能です*/