追加したボタンに対するCSS設定
ツールバーにボタンを追加した場合、それに対してCSSによる設定が必要になる。具体的には、ボタンの枠線をダブらせない、ボタンに表示させるアイコン、ボタンのクリック後に表示させる部分、の3つが必要になる。
特に重要なのは、ボタンに設定した値（value）と同じ値をCSSにも記述しなくてはならないことだ。たとえばボタンにcustom1という値を設定したら、アイコンの設定では.yui-toolbar-custom1というクラス名を記述しなくてはならない。また、ボタンのクリック後に表示される部分には同じ値のIDが設定されるので、それに対して色や枠線の有無などを設定しなくてはならない。
ツールバーにボタンを追加する際には、JavaScriptとCSSの設定とがうまく連携しているかに注意してコーディングしていただきたい。
リスト4 追加したボタンに対する設定（CSS）（例）
<style>
/* ボタンの枠線がダブらないようにする */
.yui-skin-sam .yui-toolbar-container .yui-toolbar-insertimage {
border-right: none;
}
/* ボタンにアイコンを表示させる */
.yui-skin-sam .yui-toolbar-container .yui-toolbar-custom1 span.yui-toolbar-icon {
margin : 0px;
padding : 0px;
background-image: url（ アイコンのファイル名 ）;
background-position: 1px 0px;
}
/* クリック後に表示される部分 */
#custom1 {
background-color : #00FFCC;
padding : 3px;
font-weight : bold;
border-color : black;
border-style : solid;
border-width : 1px;
}
</style>
ブログの投稿画面では、Rich Text Editorのような入力インターフェースが一般的になっていることもあり、単なるプレーンテキスト入力に飽き足らないユーザーには歓迎されるコンポーネントだろう。まだbetaの段階にあるので、今後の発展を楽しみにしたい。紹介できなかったメソッドやパラメータについては、コンポーネントのドキュメントを参照していただきたい。
次回は、コンポーネントに必要なJavaScriptやCSSを簡単にロードできるYUILoaderを紹介したい。<link>や<script>の記述が多くなりそうな場合には、これを使ってソースコードをシンプルにすることを薦めたい。
