このSKINはimgフォルダに入っているimg01.jpg/img02.jpg/img03.jpg/img04.jpg/img05.jpgをお好みの画像に差し替えることでオリジナルのFlash画像タイトルバナーになります、またFlashの設定ファイルtopics.txtを書き換える事で画像を増やす事もできます。
またバナーのタイトルはデフォルトではTopicsBoardになっておりますがTopics.txtの設定を変えることで変更できます
■解凍したcielskin06フォルダの中に
tmp.html,topiset.cgi,img,topics.txt,cielskin06.swf,cielskin06.js,style.css,form.jsとこのreadmeが入っています
KENT-WEBさんからダウンロードした元のtmp.htmlとtopiset.cgiとimgフォルダをcielスキンのものと入れ替えtopics.txtとcielskin06.swf,cielskin06.js,style.css,form.jsも同じ階層にアップロードしてください。
※KENT-WEBさんの元から入っている画像(GIFファイル)はアップロードする必要は有りません。
topics.cgi
topics.dat
cgi-lib.pl
jcode.pl
tmp.html
imgフォルダごと
topiset.cgi
cielskin06.js
(Flash(swf)ファイルに関する外部Javascriptファイルです)
topics.txt
Flash(swf)ファイルのタイトル、背景画像、サイト説明文字を差し替えるファイルです
cielskin06.swf
(Flashバナー本体です)
style.css
(外部CSSファイルです)
form.js
(書き込みフォーム表示用の外部JavaScriptファイルです)
すべて同じディレクトリに入れる一例です
cgi-bin | ||
┗ | topicsboard(cielskin06) | |
┣ | topics.cgi | |
┣ | topics.dat | |
┣ | cgi-lib.pl | |
┣ | jcode.pl | |
┣ | topiset.cgi | |
┣ | tmp.html | |
┣ | topics.txt※ | |
┣ | cielskin06.js※ | |
┣ | form.js※ | |
┣ | cielskin06.swf※ | |
┣ | style.css※ | |
┗ | imgフォルダ | |
┗各種GIF画像 | ||
┗(swfファイル用背景画像) img01.jpg/img02.jpg/img03.jpg/img04.jpg/img05.jpg |
※topics.txtとcielskin06.swfは同じ階層にないと設定が反映されません
またimg01.jpg/img02.jpg/img03.jpg/img04.jpg/img05.jpgの入ったimgフォルダもcielskin06.swfと同じ階層に無いとFlashタイトルバナーに画像が反映されません
※BiglobeやHIHO等サーバーによってはcgi本体と画像ファイルを別のディレクトリに置けなければならない場合はswfからのパスが通らないので設置は無理だと思います
■topics.cgiについて
# 1ページあたり表示件数 $pagelog = 1;
もちろんお好みの表示件数で使った頂いてかまいませんがtopics.cgiの青字の部分表示件数を1として長めのテキスト中心のページにいいのではないかと思い作ってみました。
■topics.txtについて
Flashのタイトルバナーの設定ファイルです
topics.txtをテキストエディタで開いて青字の部分を書き換えることで各項目を変更できます
画像は増やす事が出来ます、詳しくは下記に説明していきます。
imgdata=img01,img02,img03,img04,img05&
現在は上記のようになっています。
連番で,img06,img07と増やしていきswfファイル用背景画像をjpgで増やしてゆけば自動的に画像が読み込まれスライドショーで画像が展開していきます。
画像は連番でimg06.jpg,img07.jpg,img08.jpgとimgと同じようimgフォルダ内に増やしてください
末尾には&を入れておいてください
画像の大きさは縦250px,横750pxですがどちらか片方の大きささえそろえていれば自動的にスライドして収まります。
&title=
&title2=Topicsboard
(タイトルはtitle上とtitle2下で文字の大きさが違います、タイトル文字を変えることができます、使えるのは英語のみです、日本語は入りませんのでご注意下さい)
&message01=ここにテキストを入れます。
(タイトルバナー下の部分の文字です、一部のタグが使えます<a>、<b>、<br>、<font size>、<font color>、<i>、<p>、<u>等)
■cielskin06.jsについて
閲覧者のブラウザにプラグインのFlashPlayer6.0以降が入っていないとFlashタイトルバナーの代わりにimg01.jpgが代替として表示されるようにJavaScriptを外部ファイルに記述したものです
代替する画像を変更する場合はcielskin06.jsをテキストエディタで開いて以下の部分
else{document.write('<img src="img/img01.jpg" alt="バナー画像" width="750" height="250" border="0">');
青字部分を変更してください■form.jsについて
記事投稿画面に入室するにはページ下部Topics Board-Skin by Web Studio Ciel- Admin部分のAdminをクリックしていただくとか記事書き込みページ入室用のフォームボタンがJavaScriptで表示されます
※管理者はNetScape7.1等ブラウザでJavaScriptが正常に動作せず書き込み用フォームが表示されませんので他のブラウザを使用してください。
■JavaScriptを無効にした閲覧者に対する配慮
JavaScriptが無効の場合の設定はtmp.htmlの<noscript><img src="img/img01.jpg" alt="バナー画像" width="750" height="250" border="0"></noscript>の青字部分を書き換えてください
デフォルトではimg01.jpgが表示されるようになっております
■img01.jpg,img02.jpg,img03.jpg,img04.jpg,img05.jpg,について
imgフォルダに入っている
img01.jpg,img02.jpg,img03.jpg,img04.jpg,img05.jpg
を同じファイル名でお好みのものに替えて頂くことでオリジナルのFlashタイトルバナーになります
画像はjpgで高さ250px幅750px
です
jpg以外の画像は使えません
またプログレッシブjpgで保存するとFlashPlayerのバージョンによっては表示されませんのでこちらもお気をつけ下さい
MacroMedia社のテクニカルノート
記事書き込みの際に3枚アップロードできる画像のサイズは横幅をあまり大きくするとはみ出してしまいレイアウトが崩れてしまいますので書き込みの際にアップロードする画像の横幅をtopics.cgiで300~350px位までに設定することをおすすめします
以下を参考にしてください
------topics.cgiの設定-------
# 画像ファイルの最大表示の大きさ(単位:ピクセル)
# → これを超える画像は縮小表示します
$MaxW = 300; # 横幅
$MaxH = 200; # 縦幅
※赤字の部分画像現在は横幅は300です
縦幅は任意です
テーブルではなくCSSでレイアウトしておりますので古いブラウザ等で崩れる可能性があります。
現在のところWindowsIE6,Firefox2.0.0.3,MacFirefox1.5.0.11,Safari1.3.2で表示確認しております。
Mac版IE5.17ではレイアウトが崩れます、表示確認及びCSSの不備、カスタマイズ等によりCSSレイアウトが崩れる事も有りますので各自で修正等ご自由にお願い致します。
左メニュー部分はhtmlソースの中程あたり以下の部分
<!-- メニュー項目始め-->
<ul class="link-menu">
<li><a href=" #">HOME</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
<!-- メニュー項目終わり-->
青字部分<li><a href="#">xxxx</a></li>部分を書き換えてください
下に追加する事も出来ます
■cgiの設置やパーミッションの設定に関してはKENT-WEBさんのところの解説ページを参考にしてください
設置が完了したらtopicsboard(cielskin06)/topics.cgiにアクセスして動作確認をしてください
■本テンプレート(cielskin06)を使用したことによっていかなる不利益が生じようとも、著作権者は一切の責任を負いません
■カスタマイズはご自由にしていただいてかまいませんが著作権表示は外さないようにお願いします
■配付のスキンについてはWeb Studio Cielにお問い合わせ下さい
けっしてKENT-WEBさんのところへはお問い合わせなさらないようお願いします