Spry タブ付きパネルのカスタマイズ方法

Spry（スプライ）のタブ付きパネル Widget を編集してみたいと思います。

Spry とは、高度なウェブページの作成を簡単にする JavaScript および CSS ライブラリです。ブラウザにダウンロードさせることで、ページ全体を更新せずに動的データを表示できます。Spry を活用することで、コードを一行も書かなくても必要な機能を実装できます。

当サイトでは、トップページの上部に タブ付きパネル Widget を実装していました。

またパートナー様向けコンテンツ（移転済み）のページには、メニューバー Widget と アコーディオン Widget を搭載しています。

当方のバージョンは CS4 なので、CS3 か CS5 をお使いの方は多少操作が異なりましたら調整をお願いいたします。

Adobe Dreamweaver CS4 ユーザガイドはこちらです。
Adobe Dreamweaver CS4 * Spry ページの視覚的作成

手順１「Spry タブ付きパネルの挿入」

Spry を挿入したい位置をカーソルで選択し、ドリームウィバーのメニューバー「挿入」-「Spry」-「Spry タブ付きパネル」をクリックします。

この操作だけで、後はコンテンツを入力するだけで使用できる Spry タブ付きパネルが表示されます。

タブ1 タブ2 にタブ名を入力、コンテンツ1 コンテンツ2 を入力して、SpryAssets フォルダを一緒にアップロードすれば使用できます。

手順２「Spry タブ付きパネルのパネルを増やす」

パネルを増やす必要がない方は、必要ない作業です。

Spry タブ付きパネルの全体を選択し、＋ （パネルの追加）をクリックします。必要な数だけ操作を繰り返します。

手順３「Spry タブ付きパネルのカスタマイズ」

これまでの手順でも動作自体に支障はありませんが、今回はデザインをカスタマイズしてみたいと思います。

デザインのカスタマイズは、SpryTabbedPanels.css ファイルで行ないます。

SpryTabbedPanels.css ファイルのコードを、ドリームウィーバーで直接編集してもOKです。

今回は「スタイルの編集」をクリックして、「CSS ルール定義」ダイアログボックスからカスタマイズしていきたいと思います。

SpryTabbedPanels.css ファイルの編集も他の CSS ファイルと編集方法は同じなので簡単にカスタマイズできるかと思います。

タブ内の文字を大きくしたい場合は、
.TabbedPanelsTab の font-size: 0.7em; を font-size: 0.8em; に変更します。

選択してるタブの背景を変えたい場合は、
.TabbedPanelsTabSelected { background-color: #EEE;
を
.TabbedPanelsTabSelected { background-color: #FCF;
というように変更します。

「CSS ルール定義」ダイアログボックスの「適用」をクリックして確認しながらカスタマイズすると分かりやすいと思います。

テキストのサイズ、各パーツの背景色、マウスポインタが上にあるときの背景色など様々なカスタマイズが可能です。

以下の画像ように、デフォルトの Spry タブ付きパネルよりカラフルになりました。※画像なので動作しません。

ブラウザでプレビュー（F12）で確認して問題なければ、Spry タブ付きパネルを挿入したページと SpryAssets フォルダ（自動で生成されます）をアップロードして作業完了です。

このようにドリームウィーバーの Spry 挿入には、専門知識はほとんど必要ありません。タブ付きパネルを挿入すれば、ほとんど全ての作業は自動で完了していますので、コンテンツを入力して必要なデザインを CSS でカスタマイズすれば作業完了です。

タブ付きパネルのメリットとして、少ないスペースに多くのコンテンツを掲載できることがあります。多くのコンテンツをスッキリとまとめたい方は、Spry タブ付きパネルを利用していみてはいかがでしょうか。