サイトパーツ


GsCMSでは、バナー画像やタイトル画像、ロゴマーク、favicon、ボタン画像など、サイトを構成するためのデータ(ファイル)をサイトパーツと呼びます。ウェブサイトを構成するために必要な部品であるという考え方からですが、一般的な呼び方ではありませんし、厳密な定義があるわけでもないので、トピックに添付する画像やPDFなどのファイル以外の画像・ファイルをこのように呼ぶというくらいに考えて下さい。

<サイトパーツの編集>

この画面では、サイトパーツをアップロードしたり削除したりすることができます。

cp_siteparts

サイトパーツファイルをアップロードするには、「新しいパーツファイルのアップロード」フォームでPC上のファイルを選択して送信ボタンを押します。送信されたファイルはサーバ上で自分のサイト独自のディレクトリにそのままのファイル名で格納されます。従って、同じ名前のファイルがあると上書きされてしまいますのでご注意下さい。また、ファイル名には半角英数字などを使用し、日本語のファイル名などは避けるようにして下さい。

アップロードに成功したファイルはこのページのリストに加えられます。リストは上からファイル名順(アルファベット順)に並んでいます。パーツファイルを削除したい場合は左のチェックボックスにチェックを入れてリスト最下部の「削除」ボタンを押して下さい。


サイトパーツの利用方法

では、アップロードしたパーツファイルを実際にサイトのページ上に配置するにはどのようにすれば良いか、いくつか例をあげながら説明します。

タイトル部分の背景に画像を配置したい

何もデザイン変更していないサイトのタイトル部分(下の画像)は以下のような感じになっているはずですので、ここに部分の背景に画像を貼り付けてみましょう。

cp_partst1

まず、使用する画像を用意し、アップロードします。アップロードが成功すると下のようにメッセージと保管場所が緑色で表示されます。

cp_parts_1

この例では「jet.jpg」という1000×750ピクセルの画像ファイルをアップロードしました。リストには以下のように表示されます。

cp_parts_list

これでファイルはサーバ上にアップロードされましたが、サイトのタイトル部分にこの画像を表示させるにはCSSのカスタマイズが必要になります。CSSの編集方法は
スタイルシート の項を参照していただくとして、どのようにCSSソースに記述すれば良いかを説明します。

この例では「タイトル部分の背景に画像を表示したい」のですから、使用しているテンプレートHTML(XHTML)の中で「タイトル部分」がどこにあたるのかを考えます。defaultテンプレートでは、タイトル部分は「<div id="header"></div>」というdivタグで表されています。このマニュアルを作成している時点での標準CSSでは、このタイトル部分は

#header {
width: 860px;
background-color: #576fab;
-webkit-border-top-left-radius: 15px;
-webkit-border-top-right-radius: 15px;
-moz-border-radius-topleft: 15px;
-moz-border-radius-topright: 15px;
}
というように記述されています。
この部分の background-color のところを消去し、以下のように書き換えます。
#header {
width: 860px;
height: 400px;
-webkit-border-top-left-radius: 15px;
-webkit-border-top-right-radius: 15px;
-moz-border-radius-topleft: 15px;
-moz-border-radius-topright: 15px;
background-image: url(pfiles/00/00/00/00/01/jet.jpg);
background-repeat: no-repeat;
background-position: center center;
}
これで下のような表示に変わります。
この例では大きな画像を配置したため、タイトル部分の高さも変更しています。

cp_partst2

このように、CSSの中からアップロードされたパーツファイルを利用するためには、パーツファイルリストの「PATH:」で表されてる文字列を指定します。また、このPATHはCSSだけではなく、ブログやコンテンツ、お知らせといったトピックの本文でも、ソースコード の中でも利用できます。ただしその場合はHTMLの理解が必要になるでしょう。

残念ながら、CSSやHTMLの知識をまったく持たない方にこのような作業を短い時間で説明し理解していただくことはほぼ不可能です。この「サイトパーツ」機能はある程度ウェブサイトの構築に関する知識のある方向けのものだとご理解下さい。