====================================== 懸賞生活日記:カスタマイズマニュアル 作成: hige MAIL: hige@deneb.freemail.ne.jp HOME: CGIのかんづめ http://www.dab.hi-ho.ne.jp/appletea/cgikan/ ====================================== ────────────────────────────────────── ■ 目次 ────────────────────────────────────── ・はじめに ・どうやってカスタマイズするか? ・CGIスクリプト本体の変数を変更する ・スタイルシートを変更する ・テンプレートファイルを変更する ・スタイルシート初心者の方へ ────────────────────────────────────── ■ はじめに ────────────────────────────────────── 懸賞生活日記の設置は終わりましたか?まだ設置していない人は install.txt を読 んで CGI を設置してください。 また、カスタマイズに関する項目を理解するには、懸賞生活日記を実際に使って、こ の CGI の画面構成や考え方に慣れておかないと難しいです。一通り操作して、懸賞 生活日記に慣れておいて下さい。 ────────────────────────────────────── ■ どうやってカスタマイズするか? ────────────────────────────────────── 懸賞生活日記をカスタマイズするにはいくつかの方法があり、それぞれできることが 違います。 1. CGIスクリプト本体の変数を変更する 日記の名前、マーカー(「■ 2003年01月」のような表示をするときの「■」)、 使用するテンプレートファイルなど、基本的な情報を変更します。変更できる 項目はわずかしかありません。 2. テンプレートファイルのタグ内のスタイルシートを変更する フォントの色やサイズ、背景色などを調整するのに使います。一番変更する機 会が多いと思います。 3. テンプレートファイルのタグ内を変更する 自分のサイトの他のページと共通のメニューを上や左に表示するなど、HTMLの 内容を大幅に変えることができます。 これらで対応できないものは、CGIスクリプト本体のプログラムを改造することにな ります。プログラムの改造についてはこのマニュアルでは触れませんし、お手伝いす ることも出来ません。 ※1 簡単な改造であればヒントを提供することはあります。 ※2 有償で改造依頼を受けますが、時間の都合でお断りする場合もあります。 ────────────────────────────────────── ■ CGIスクリプト本体の変数を変更する ────────────────────────────────────── CGIスクリプト本体(prenikki.cgi)の 45 行目〜 104 行目にデザインや処理を決める 変数が定義されています。設定の方法はスクリプト本体を見れば分かると思います。 日記の名前とテンプレートファイルは、日記モードと集計モードのそれぞれに設定で きます。「日記モードは青を基調に、集計モードは赤を基調に。」というような使い 分けも別のテンプレートファイルを指定すれば簡単に実現できます。 -------------------------------------------------------------------- 変更できる項目 | 対応する変数 -------------------------------------------------------------------- 日記(日記モード)の名前 | $diaryTitle 日記(集計モード)の名前 | $sumTitle | 日記タイトル前の記号 | $diaryTitleMarkerType 〜 日記のサイト名の前の記号 | $diarySiteMarkerType 〜 目次の各項目前の記号 | $contentsMonthMarkerType 〜 集計カテゴリの前の記号 | $sumCategoryMarkerType 〜 | 頁モードのときに表示する | $articleInPage 1頁内の記事数 | | テンプレートファイル | $diaryTemplateFile (日記モード用) | テンプレートファイル | $sumTemplateFile (集計モード用) | | 一つの記事内で記述できる | $maxIncome 収入情報の数 | | コメントにHTMLを使用する | $useHtmlComment か? | | コメント中のURLを自動 | $doAutoLink リンクするか? | -------------------------------------------------------------------- 下記の項目も変更できますが、通常は変更しないで下さい。 -------------------------------------------------------------------- 変更できる項目 | 対応する変数 -------------------------------------------------------------------- OSの文字コード | $osCode 出力文字コード | $outputCode データディレクトリ | $dataDir ロック用のディレクトリ名 | $lockDir -------------------------------------------------------------------- ────────────────────────────────────── ■ スタイルシートを変更する ────────────────────────────────────── テンプレートファイルのスタイルシートが記述部分には、懸賞生活日記用のクラスが 定義されています。変更するにはスタイルシートの知識が必要です。 スタイルシートなんて分からない!という人でも、色の変更程度であれば簡単にでき ます。マニュアルの最後に初心者向けの解説を用意したので、そちらを読んでチャレ ンジしてください。 懸賞生活日記用のクラスとしては以下のものが用意されています。 -------------------------------------------------------------------- 変更できる項目 |日記mode |集計mode | 対応するクラス名 |月毎|目次|月毎|目次| -------------------------------------------------------------------- 日記のタイトル | ○ | ○ | ○ | ○ | pageTitle メニュー領域 | ○ | ○ | ○ | ○ | menuArea 1個のメニュー項目 | ○ | ○ | ○ | ○ | menu サブタイトル | ○ | ○ | ○ | ○ | pageSubTitle 前月移動ボタン | ○ | × | ○ | × | prevMonth 次月移動ボタン | ○ | × | ○ | × | nextMonth 記事1件を囲む枠 | ○ | × | × | × | diaryFrame 記事のタイトル領域 | ○ | × | × | × | diaryTitleArea 記事タイトルの前の記号 | ○ | × | × | × | diaryTitleMarker 記事のタイトル | ○ | × | × | × | diaryTitle 記事の日付 | ○ | × | × | × | diaryDate 記事のコメント | ○ | × | × | × | diaryComment 記事の関連サイト一覧領域 | ○ | × | × | × | diarySiteArea 記事の関連サイト名の前の | ○ | × | × | × | diarySiteMarker 記号 | | | | | 記事の関連サイト名 | ○ | × | × | × | diarySite 目次領域全体 | × | ○ | × | ○ | contentsArea 目次の表 | × | ○ | × | ○ | contentsTable 目次の小計・合計の上に | × | × | × | ○ | contentsLine 引く横線 | | | | | 目次のヘッダ行 | × | ○ | × | ○ | contentsHead 目次のデータ行 | × | ○ | × | ○ | contentsData 目次の小計行 | × | × | × | ○ | contentsSum 目次の合計行 | × | × | × | ○ | contentsSumAll 目次の年度行 | × | × | × | ○ | contentsYear 目次の月の前の記号 | × | ○ | × | ○ | contentsMonthMarker 目次の月 | × | ○ | × | ○ | contentsMonth 集計のカテゴリ領域 | × | × | × | ○ | sumCategoryArea 集計のカテゴリ名の前の | × | × | × | ○ | sumCategoryMarker 記号 | | | | | 集計のカテゴリ名 | × | × | × | ○ | sumCategory 集計のテーブル | × | × | × | ○ | sumTable 集計のヘッダ行 | × | × | × | ○ | sumHead 集計のデータ行 | × | × | × | ○ | sumData 集計の合計表示部 | × | × | × | ○ | sumSum -------------------------------------------------------------------- ○ 関係する画面 / × 無関係の画面 ※日記モード頁表示、SSIモードは日記モード月毎表示と同等です。  (一部未対応のスタイルがあります) ────────────────────────────────────── ■ テンプレートファイルを変更する ────────────────────────────────────── テンプレートファイル(標準ではsimple.html)は普通のHTML文書なので、HTMLが分か る人であれば自由に修正できます。ホームページビルダーのようなHP作成ソフトで修 正することもできると思いますが、後述する「特殊コメント」が消えたり変な位置に 移動しないように気をつけてください。 テンプレートファイルには懸賞生活日記にとって特別な意味を持つコメント(=特殊 コメント)を書いておくことができます。このようなコメントは懸賞生活日記によっ て、置き換えられて画面に表示されます。 ------------------------------------------------------------ コメント | 置き換わるデータ ------------------------------------------------------------ | 日記のタイトル | 日記のサブタイトル(「xxxx年xx月」など) | メニュー | 次の月を表示するためのボタン | 前の月を表示するためのボタン | 日記の記事、集計データ、目次など、その | ページのメインの情報。 ------------------------------------------------------------ これらのコメントを表示したい場所に書くこと以外は、通常のHTMLの作成と何も変わ りません。 もちろん、部分だけでなく、部分も書き換えて構いません。スタイルシ ートを外部スタイルシートとして切り離すのもいいでしょう。この場合は以下の点に 注意してください。 ・パス テンプレートファイルからの相対パスではダメです。テンプレートファイルと CGIスクリプト本体が別のディレクトリにあるためです。絶対パスで書くか、 CGIスクリプト本体からの相対パスにして下さい。 ・文字コード 設置マニュアル通りに設置した場合、テンプレートファイルはEUCで保存されて いますが、実際に表示されるときはCGIスクリプトによってシフトJISに変換さ れます。そのため、スタイルシートはシフトJISにして下さい。 ────────────────────────────────────── ■ スタイルシート初心者の方へ ────────────────────────────────────── スタイルシートについて本やインターネットで勉強するのが一番ですが、知らなくて も大丈夫です。ここでは懸賞生活日記のカスタマイズに必要なことだけ説明します。 中級・上級の方も懸賞当選日記のスタイルシート変更に独特なコツがあるので、さっ と目を通してください。 ---------------------------------------- 【1】スタイルシートの見方 ---------------------------------------- 1. スタイルシートはどこに書いてあるの? で囲まれた部分です。 2. どういう意味か分からない! スタイルシートには「クラス」が定義してあります。クラスとは何か?は正確に知 らなくてもいいです。例を見れば何となく分かるはずです。 ------------------------------------------------------------------------- 例 | 意味 ------------------------------------------------------------------------- /* 日記のタイトル */ | ← どの部分が変わるのか?を表しています .pageTitle { | ← 変わる部分を見分けるための名前(=クラス名) color:#390; | ← 前景色(=フォントの色) #339900 は #390 に省略可 font-weight:bold; | ← フォントの太さ(bold=太字) font-size:12pt; | ← フォントの大きさ margin-top:30px; | ← 余白(外側) } | ------------------------------------------------------------------------- どうですか?だいたいの意味はつかめましたか?スタイルシートの見方が分かったら 次はスタイルシートを変更してみましょう。 ---------------------------------------- 【2】スタイルシートの変更方法 ---------------------------------------- 「日記のタイトル」が以下のように定義されていたとします。濃い緑色で12ptの太字 で表示されます。 /* 日記のタイトル */ .pageTitle { color:#390; font-weight:bold; font-size:12pt; margin-top:30px; } まず、フォントの色を赤にしてみましょう。赤は「#FF0000」ですね。スタイルシー トの場合は、#FF0000 -> #F00 に省略できます。 /* 日記のタイトル */ .pageTitle { color:#F00; /* ←変更したところ。#FF0000でもOK。*/ font-weight:bold; font-size:12pt; margin-top:30px; } どうでしょうか?テンプレートを表示しても確認できないので、次の方法で確認しま す。 [方法1] CGIで処理させる テンプレートをサーバに転送して、実際に懸賞生活日記で表示させます。 確実ですが面倒ですね。 [方法2] 確認用のHTMLを用意する 次の確認用にHTMLを保存します。 1. 懸賞生活日記で日記モード・月毎表示する。 2. 表示されたHTMLを保存する。(Win+IEなら右クリックして「ソースの表示」 →メモ帳が開く→保存) これらの確認用HTMLでスタイルシートを変更すると、どういう表示になるのか 確認できます。スタイルシートが決まったら、その部分をテンプレートにコ ピーします。他の画面も同じように表示を確認します。 こちらも面倒ですが、サーバに転送しなくてよいので、環境によっては楽かも しれません。 どちらの方法でもいいですが、スタイルの変更結果を確認してください。 次に日記のタイトルを枠で囲ってみましょう。赤い枠を書くには、下のように書式 指定を追加します。このように書式指定は増やしたり減らしたりできます。 /* 日記のタイトル */ .pageTitle { color:#F00; font-weight:bold; font-size:12pt; margin-top:30px; border-style:solid; /* ←追加。直線の枠にする。 */ border-width:1px; /* ←追加。枠の太さを1pxにする。 */ border-color:#F00; /* ←追加。枠の色を赤にする。 */ } ついでに幅と余白(内側)も指定してみましょう。 /* 日記のタイトル */ .pageTitle { color:#F00; font-weight:bold; font-size:12pt; margin-top:30px; border-style:solid; border-width:1px; border-color:#F00; width:300px; /* ←追加。タイトル表示領域の幅を300pxにする。 */ padding:20px; /* ←追加。枠の内側の余白を20pxにする。 */ } やり方は簡単ですよね?あとはどんな指定ができるのか分かればいろいろできます。 ---------------------------------------- 【3】よくある変更項目 ---------------------------------------- よくある変更項目についてリストアップします。はじめはこのあたりから書式を変更 するのがいいと思います。 ※注意: クラスがどのタグに設定されているかによって、使えない項目もあります。例えば で定義されているなら幅や余白は無効です。前節で説明した確認用HTMLで、 どのタグにクラスが設定されているのか確認できます。 -------------------------------------------------------------- 指定できる項目 | 変更される個所 -------------------------------------------------------------- color | 前景色。たいていはフォントの色になる。 font-weight | フォントの太さ。bold など。 font-size | フォントのサイズ。10pt など。 | background-color | 背景色。 background-image | 背景画像。 | border-style | 枠の種類。solid(直線)/dotted(点線)など。 border-width | 枠の幅。10px / 100% など。 border-color | 枠の色。#336699 / #369 など。 | margin | 枠の外側の余白。10px など。 padding | 枠の内側の余白。10px など。 -------------------------------------------------------------- スタイルシートについて詳しく説明すると本になってしまうので、ここでは書きま せん。本を見たりインターネットで解説ページを探すといいでしょう。私は「とほ ほのWWW入門」を参考にしていますよ。 以上