Joy CMSのオンラインマニュアルです

背景画像を指定する

背景に画像を指定して表を作成するサンプル

上のような、表示をしたい場合には、表を作成してその背景に画像を指定します。

まず、表を作成するためにツールバーから「表の作成」ボタンをクリックします。

表の作成ボタン

「表の作成/編集」ダイアログで「列」と「行」を1に、「cellpadding」を10に「配置」を中央揃えにして「挿入」ボタンをクリックします。

尚、cellpaddingとは、表の外枠とテキストとの余白のことで0を指定すると外枠にテキストがへばりつく形となりますので適当な値にします。

表の作成/編集ダイアログ

エディターの画面jに表が表示されますので、表の中を左クリックした後に右クリックします。

プルダウンメニューから「表のプロパティ」をクリックします。

表のプロパティ

「表の挿入/編集」ダイアログの「上級者向け」タブをクリックして「参照」ボタンをクリックします。

参照ボタン

予め登録されている背景画像の一覧がポップアップで表示されますので、画像の右側にある「挿入」ボタンをクリックします。

あらかじめ登録されている背景画像

「表の作成/編集ダイアログ」の背景画像のフォーム欄に画像ファイルのアドレスが入力されますので 「更新」ボタンをクリックします。

画像ファイルのアドレスを確認

エディターの画面上に画像を背景とする表が表示されますので、テキストを入力します。テキストの文字の大きさ、色などの指定は、メニュー「フォントの装飾」をご覧ください。

テキストの入力

もう少し複雑な例

上記の例は、背景画像を1つ使う方法を説明しましたが、こんどは背景画像を2つ使った、下図のようなもう少し複雑な例を挙げます。

これは、背景画像を2つ使ったサンプルです。
 
表の高さは背景画像で調整します。因みにこの表の高さは80pxです。

最初に行うことは、表の作成ですが今度は行数はそのままに列数を3にします。また、Cellpadding、Cellspacingは0に設定します。

画像の挿入/編集ボタン

一番左のセル内にカーソルを置き、右クリックで表示されるプルダウンメニューから、「セルのプロパティ」を選択します。

セルのプロパティ

セルの幅を240に設定して、「更新」ボタンをクリックします。この操作を同じように一番右側のセルにも行います。

セル幅の指定

再び、右側のセルのプルパティを開き、「上級者向け」タブをクリックします。

上級者向けタブ

背景画像の一覧から画像を選択して「挿入」ボタンをクリックします。

画像の一覧

背景画像の入力フォームのアドレスが表示されたら、「更新」ボタンをクリックします。

更新ボタンをクリック

背景画像の指定は、右側のセルにも同じように行います。こんどは、左側のセル内にカーソルを置き、右クリックして表示されるプルダウンメニューから、「表を挿入」を選択します。

表を挿入

列、行を1に、Cellpaddingを10に、配置を左揃え、幅を240に設定して更新ボタンをクリックします。この処理はやはり、右側のセルにも行います。

セルの設定

新しく追加されたセル内にテキストを入力していきます。

テキストの入力