Spry（スプライ）縮小可能パネルのCSSを編集

タブ付きパネル Widget に続いて、Adobe Dreamweaver CS4 を使って Spry（スプライ） 縮小可能パネル Widget を編集してみたいと思います。

解説に使用するドリームウィーバーのバージョンは CS4 なので、CS3 か CS5 をお使いの方は、若干操作画面の違いがあるかも知れませんので、その際は微調整をお願いいたします。

ドリームウィーバーのメニューバー「挿入」から「Spry」へ進み、「Spry 縮小可能パネル」をクリックします。

クリックすると Spry 縮小可能パネル Widget が挿入されます。ドリームウィーバーでは、ほぼ全ての作業が自動で行われますので、後は「タブ名」と「コンテンツ」を入力して、SpryAssets フォルダを一緒にアップロードすれば使用できます。

Spry のデザインを変更しない方は、CSS を編集する作業は必要ありませんので、そのままアップロードして使用してください。

タブ名とコンテンツを入力しました。

プレビュー（F12）をクリックして、編集内容を確認します。ここからは個人的なデザインになりますが、タブの文字が小さいことなどが気になりましたので、SpryCollapsiblePanel.css からデザインの変更を行ないます。

縮小可能パネル全体の CSS ルールは「.CollapsiblePanel」、タブのみの CSS ルールは「.CollapsiblePanelTab」、コンテンツのみの CSS ルールは「.CollapsiblePanelContent」で編集します。

今回は、「.CollapsiblePanel」のボーダーの幅（width）とカラー（color）、タブのフォントサイズ・padding（パディング）・背景（オープン時の背景は「.CollapsiblePanelOpen .CollapsiblePanelTab」で設定します）、コンテンツの背景には フリー写真素材のPhoto Chips 様の四葉のクローバーの写真を設定しました。

CSS すべてのルール「SpryCollapsiblePanel.css」から、CSS ルール定義 ダイアログボックスを開いて確認すると、CSS のどの部分を編集したら良いかよく分かると思います。

こちらが編集後の、Spry 縮小可能パネル Widget です。タブをクリックで展開、もう一度クリックで縮小します。

Spry 縮小可能パネル が、ブラウザでアクセスしたときに開いた状態になっている場合は、縮小可能パネル全体を選択し、画像のように初期設定の状態「閉じた状態」を選択してください。

Spry 縮小可能パネル Widget は、ウェブサイトの小さなスペースにもコンテンツを格納できるので、お役に立つ場面があるかと思います。