fdiary.cgiのスキン定義ファイルを作る・上

シンプルなスキンを改造してみる

このページは、HTMLに不慣れな方のためのページです。

得意な方は、見なかったことにして下さいまし。まだまだ、勉強中の身なのは自覚しつつお送りします（汗）。
fdiary.cgiをダウンロードしていただいて、ユーザー様のイメージに合わせてスキンを作っていただく場合で、HTMLに不慣れな方へちょっとだけご説明を…。

実は、こんなスキンでも一応機能するのです。

skin_UltraSimple.html

<HTML><BODY>
<A HREF="prev_page">prev</A>
$page_NO
<A HREF="next_page">next</A><HR>
<!-day_data-->
$date"y1年m2月d2日"
$title<BR>
$comment<BR>
<HR>
<!-/day_data-->
</BODY></HTML>

"ウルトラシンプル"のデモ
ですからお気軽に楽しんでみてくださいね！

＜HTMLタグ辞典購入のお勧め＞

　HTMLタグ辞典は1冊あるととても便利なので、まだの方は本屋さん店頭でパラパラと見て見易いと思われるものを、追々ご準備することをお勧めします。私は技術評論社の『最新実用HTMLタグ辞典』古籏一浩著1780円（平成12年3月25日初版）を買って、未だに便利に使用しています。新しいタグ辞典には新しいブラウザに対応する情報が増えているかもしれないのですが、古いブラウザ使っている方にも対応したいと言う気持ちから、結局古いブラウザで大丈夫なものを選んで使用するだろう、それなら古い本をもうしばらく使っていよう…と考えています（笑）。

＜スタイルシートについて＞

スタイルシートを使う・使わないで、あちらこちらで議論があるようなので一応調べてみたのですが、
<STYLE TYPE=”text/css”>
はタグ辞典で見るとIE3、NN4から使えるらしい（この辺の解釈も、バグがあるとかないとか調べれば調べるほど訳が分からなくなってしまうのですけれど…）こと。
また、本のオンラインショップで、“HTML　スタイルシート”で検索すると1997年に出版されたものから出てくるので、2003年現在、大丈夫そうなものは使っても良いのかなぁという判断で使ってみています。使いたくないという方は、使わない形でスキン定義ファイルを作成していただくことも可能です。

＜シンプルなスキン定義ファイルの改造＞

先ず、今回はシンプルなスキン定義ファイルをいじってみようと思います。
simple.htmlのソースに行番号と、必要な要素に赤、変更が効果的と思われる部分に青色で表示するように直したものをご覧下さい。
ここをクリックすると別枠で開きます　デモはこちら
上から順に変更が効果的な位置、必要な要素について説明してみたいと思います。

2行目

<TITLE>FreeDiary</TITLE>
はページタイトルを指定する部分です。このページをブラウザに読み込んだときにWindowのタイトルの表示場所に表示される言葉と、お気に入りに保存する場合の名前になります。『○○の日記』などの日記の名前を書いたり、『日記名－サイト名』などお好みの文字に打ち直してください。
4行目

<META NAME="robots" CONTENT="all">
はロボット検索による検索方法の制限を指定する部分です。
“none” “noindex” “nofollow” “index” “all”などを選択します。
このMETAタグというのは他にもいろいろ有りますので、お好みで追加してください。
7～9行目
   .title{font-size:110%;color:blue}
   .date{font-size:90%;color:green;text-align:right}
   HR{color:red;height:5px}

順にタイトル、日付、水平線のスタイルを指定しているスタイルシートです。
Color部分にそれぞれの色を指定するほか、font-size・font-weightなどいろいろなものを指定できます。
色の指定方法は、カラー名・カラーコードなどで指定します。カラー名は基本16色以外はブラウザによって利用できない場合がありますので、他の色はカラーコードの方が安心だそうです。
JavaScriptでカラーコードの入力によって色が確認できるミニツールを作りましたのでよろしかったらご利用ください。
色電卓はここをクリック

フォントサイズについては、例えば、font-size:110%とすれば、それはfont-sizeを指定していない部分の文字より1割り増しの大きさの文字になります。
お好みによって固定フォントなどいろいろな指定の仕方が有ります。

text-alignは行揃えの位置の指定です。right・left・centerから選択できます。
この指定をしたときは、<SPAN>タグでなく<DIV>タグや<P>タグを使用します。
<SPAN>・<DIV>・<P>タグで利用できるスタイルシートについてもっと知りたい方は、タグ辞典のそれぞれのタグのページをお調べになると良いと思います。

HR{…}という指定の仕方は、<BODY>…</BODY>間の全ての<HR>について効果が有ります。
この場合は色（赤）と幅（5px）について指定しています。色と幅、いろいろ変更してリロードして見ると面白いと思います。下に本文の背景色を指定する方法を説明していますので、それにあわせて白い水平線を使うというのも面白そうです。
10行目
BODY{line-height:150%;margin:1.5cm}
line-height:150%は行間を少し広げるためのものです。この数値をいろいろ変更してリロードしてみてください（といってもスキン定義ファイルでは文字が少なすぎてよく分かりませんが…笑）。指定が無くても英文は適度の行間があって良いのですが、和文は読みにくいと思われます。　

margin:1.5cmはブラウザ枠と本文との間の空間の広さを1.5cmに指定するものです。この空間を作るために本文をテーブルタグに入れてセンタリングするとか、様々な方法が有るようです。スキン定義ファイルには大抵の方法を使うことが出来ます。

その他、<BODY>のスタイルとしては、背景色の指定をすることが多いと思います。私は良く忘れるのですが（す…すみません、せめてこのページだけでも付け置こう…）、背景色を指定した場合は、文字色、LINK文字の色全てを指定しないと、文字色を指定する独自CSSを読み込んでいる方には読めない場合があるそうです（難しいですね、そういう問題を網羅したらどんなことになるのでしょう？）。
14行目
<BODY>
<BODY>タグで、ここから本文が始まることを示しています。
　背景色、文字色、LINK文字の色を全て指定する場合は、
background-color、colorなどをスタイルシートに追加、LINK、ALINK、VLINKを<BODY>タグの中に入れます。
例）
<BODY LINK="blue" ALINK="red" VLINK="purple">
など。
15行目
<B>$page_NO</B>　<A HREF="#page_bottom">[一番下へ]</A><BR>
$page_NOはページ番号の表示位置の指定です。ここに左0詰め3桁のページ番号が入ります。色や文字のサイズなど自由に指定してください。もちろん、ページ番号の表示位置自体を別の場所に移動することもできます。ただし、ページ内に1箇所は必須です。
<A HREF="#page_bottom">[一番下へ]</A>は最新記事へのジャンプをするためのLINKです。必須項目では有りません。
17～19行目
<CENTER>
<FONT SIZE="+2">シンプル</FONT><BR>水平線で区切ったことと、背景、タイトル、日付に色を着けたこと。
</CENTER>
は実際にブラウザ上で表示される方のタイトルの部分です。
シンプルと書いてある部分を実際の日記の名称などに打ち直していただくのはもちろんですが、色や字の大きさ見出し用のタグを使う、文字の背景色を変えるなど、お好きなように直してくださいね！
21行目
<A HREF="prev_page">前頁へ</A>　　<A HREF="next_page">次頁へ</A><BR>
前頁と次頁に対するLINKの部分です。前頁へ、次頁へという文字をお好きな言葉に置き換えて文字の大きさなども調整してください。
このLINKは、ページ内に1箇所必須、2箇所まで置くことが出来ます。HOMEへのLINKの左右にも置いてみるなどレイアウトを変えてみてくださいませ。

23～28行目

<!-day_data-->
<SPAN CLASS="title">$title</SPAN><BR>
$comment<BR>
<DIV CLASS="date">$date"y1/m1/d1(w1)"</DIV>
<HR>
<!-/day_data-->

いよいよ日記本体の挿入位置です。
スタイル定義ファイルでは、<!-day_data-->…<!-/day_data-->間に一日分の日記の要素、日付、タイトル、コメントの位置や表示スタイルを書き込みます。このスキンでは、タイトルとコメントは<SPAN>タグで囲んでスタイルシートを取り込んでいます。
日付については、右寄せしたかったので<DIV>タグを使用しています。
また、日付については表示にかなり自由度がありますので、よろしければy1/m1/d1以外の指定方法もお試しになって下さい。
曜日や月名を用意されたもの以外に変えたい場合はfdiary.cgiのソースを変える必要があります。やってみたい方は、fdiary.cgiをテキストエディタで開いて、以下の行をを捜して使わない月名・曜日名を書き換えてください。
“睦月（一月）”,”如月（二月）”,”弥生（三月）”などと変えると雅ですね！

fdiary.cgiの月名、曜日名を変更したい場合に書き換える部分

@April=("","January","February","March","April","May","June",
"July","August","September","November","October","December");
@Apr=("","Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Nov","Oct","Dec");
@nichi=("日","月","火","水","木","金","土");
@Sunday=("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");
@Sun=("Sun","Mon","Tue","Wed","Thu","Fri","Sat");

30行目
<BR><CENTER><A HREF="../index.html">[HOME]</A></CENTER>
ホームへのLINKです。無くても大丈夫ですが、ロボット検索などでホームより先に日記にたどり着いた場合などには有った方が便利だと思います。
アドレスや、文字の大きさ、場所の変更はもちろんお好みで！！

このページに書いたことの応用例１

次回は、画像有りのスキンの画像の取り替えをしてみます。

2003.06.28

[HOME][とまて週報TOP]