Movable Type 備忘録

Ajaxによる投票をやってみる - 補足 -

Jul162007
Author: bzbell
Categories: Customize
Tags: Ajax, Customize, MovableType, Vote

以前、わたしの友人のブログにこちらのAjaxによる投票をやってみるによるスターレーティングを設置してあげたことがありました。

先日、わたしのサイトでは星のデザインを一新しました。
それを見た友人から連絡があって、変更の仕方を教えて欲しいとのことで説明したのですが、その方法についてご紹介します。

星のデザインを変更する

デザインを変更するのはそれ程ムズかしくないです。
あえてムズかしいというなら、イメージファイルを作ることでしょうか。

今回は左のイメージ(16x16)に変更してみたいと思います。

変更するファイルは以下の通りです。

ajaxstarrater/_config-rating.php
各自のデーベースにアクセスするためのコンフィグファイルです。
ajaxstarrater/css/rating.css
マウスカーソルに合わせて星のイメージを変更している、スタイルシートですね。

変更するのは上記2つのファイルのみです。

コンフィグファイル(_config-rating.php)を修正します。
以下の箇所をイメージファイルのサイズに合わせて変更します。
_config-rating.php
1. $rating_unitwidth = 16;
今回は 16x16 のイメージに置き換えるので、'30' を '16' と置き換えます。
置き換えたら保存します。
次にスタイルシートを変更します。
変更箇所は以下の通りです。
css/rating.css
1. .loading {
2. height: 16px;
3. background: url('../images/working.gif') 50% 50% no-repeat;
4. }
6. .unit-rating { /* the UL */
7. list-style:none;
8. margin: 0px;
9. padding:0px;
10. height: 16px;
11. position: relative;
12. background: url('../images/starrating.gif') top left repeat-x;
13. }
15. .unit-rating li{
16. text-indent: -90000px;
17. padding:0px;
18. margin:0px;
19. /*\*/
20. float: left;
21. /* */
22. }
24. .unit-rating li a {
25. outline: none;
26. display:block;
27. width:16px;
28. height: 16px;
29. text-decoration: none;
30. text-indent: -9000px;
31. z-index: 20;
32. position: absolute;
33. padding: 0px;
34. }
36. .unit-rating li a:hover{
37. background: url('../images/starrating.gif') left center;
38. z-index: 2;
39. left: 0px;
40. }
42. .unit-rating a.r1-unit{left: 0px;}
43. .unit-rating a.r1-unit:hover{width:16px;}
44. .unit-rating a.r2-unit{left:16px;}
45. .unit-rating a.r2-unit:hover{width: 32px;}
46. .unit-rating a.r3-unit{left: 32px;}
47. .unit-rating a.r3-unit:hover{width: 48px;}
48. .unit-rating a.r4-unit{left: 48px;}
49. .unit-rating a.r4-unit:hover{width: 64px;}
50. .unit-rating a.r5-unit{left: 64px;}
51. .unit-rating a.r5-unit:hover{width: 80px;}
52. .unit-rating a.r6-unit{left: 80px;}
53. .unit-rating a.r6-unit:hover{width: 96px;}
54. .unit-rating a.r7-unit{left: 96px;}
55. .unit-rating a.r7-unit:hover{width: 112px;}
56. .unit-rating a.r8-unit{left: 112px;}
57. .unit-rating a.r8-unit:hover{width: 128px;}
58. .unit-rating a.r9-unit{left: 128px;}
59. .unit-rating a.r9-unit:hover{width: 144px;}
60. .unit-rating a.r10-unit{left: 144px;}
61. .unit-rating a.r10-unit:hover{width: 160px;}
赤い字の部分を 16x16 のイメージに合わせて変更します。
18行目の '../images/working.gif' は、今回は 16x16 なので同サイズとなってしまいますので、透過 GIF ファイルを用意していますが、基本的には星のイメージより小さいサイズのイメージを用意しておきます。

変更したら保存します。
最後に各イメージファイルおよび、変更ファイルをそれぞれの場所にアップロードします。
その際、オリジナルはバックアップなど取っておくことをオススメします (￣∇￣)b