Tipsメニュー

$log のカスタマイズ


$log部分は、直にはカスタマイズ出来ない部分なのですが、頑張ればカスタマイズも可能です。

「その1」ではスタイルシートを利用したカスタマイズ方法
「その2」ではJSでタグを生成する方法(記事番号ではなく、「〜ページ目」などの表示も可能。)

を紹介いたします。

 

〜その1〜

Sample

カスタマイズ前




カスタマイズ例






(注)NN4では適用されません。



☆ソース(その1)の解説☆

☆<head>〜</head>に入れるスタイルシート☆


<STYLE TYPE="text/css">
<!--
div.kako INPUT {border-color:#xxxxxx ;color:#xxxxxx ;……;position:relative;top:2px}
div.kako SELECT{margin-right:xxpx}
-->
</STYLE>


☆<body>〜</body>のソース☆

<div class="kako" > $log </div>


$logの部分は、直接ソースを記述できないので、カスタマイズしづらい部分です。そのため、過去ログの部分だけカスタマイズをあきらめてる人も多いはずです。でも、スタイルシートを利用することで、ぶっきらぼうなフォーム部品も生き生きとしてきます。ぜひお試し下さい。

スタイルシートの部分にある「div.kako INPUT」は、「kakoという名前のdivに囲まれたinput」という意味です。この部分でボタンの設定をします。詳しい記述方法は、別途にスタイルシートの本やHPを見ていただくことに致しますが…、上の例では position:relative;top:2px としています。これは、inputのボタンがポップアップメニューよりも若干上に配置されるのを防いでいるためで、気にならなければ必要ありません。他にもボーダーや背景色など変更できるので、お好みでどうぞ。
とりあえず、上の例では、
div.kako INPUT {letter-spacing:2px;border-style:ridge;border-color:#bbbbbb;color:#ffffff;background-color:#000000;position:relative;top:2px;border-width:5px}
としています。

div.kako SELECT{margin-right:xxpx} に関してですが、これはポップアップメニューとボタンの距離を離すためのものです。他にスタイルを記述しないのであれば、INPUT内にmargin-left:xxpxと書いても同じことです。「xx」の部分は好きな数字に設定して下さい。15ぐらいでちょうどいいと思います。

☆全体的な注意点☆

このカスタマイズはNN4以外で反映されます。NN4ではそもそもフォーム部品にスタイルが適応されないので、気にならないかとは思います。  …が、1つだけ。おそらくはバグでしょうが、borderを指定すると意味不明な四角形が出現します。いろいろ試行錯誤しましたが簡単には消すことは出来ませんでした。もしどうしても気になるのでしたら、
<script language="javascript">
<!--
if(document.getElementById || document.all){
document.write('<div class="kako">');
}
//-->
$log
<script language="javascript">
<!--
if(document.getElementById || document.all){
document.write('</div>');
}
//-->
としてやれば問題ないと思います。重くなるだけかも知れませんが…。

あるいは、フォーム部品に関する部分だけをcssファイルにまとめて、<head>のスタイル記述を次のようにしてやると問題なく動作します。

<style type="text/css">
<!--
@import url('〜.css');

XXX{…} //ここは従来のソース
-->
</style>



NN6では、きちんと反映はされますが、縦幅が狭くなります。掲示板訪問者にNN6ユーザーがいるようでしたら、やや大きめにボタンを設定すると良いでしょう。

 

 

 

〜その2〜

Sample

カスタマイズ前




カスタマイズ例




☆ソース(その2)の解説☆

挿入場所が記事の前か後かによってソースが変わってくるのですが、とりあえずここでは記事の直後に挿入することを前提に話を進めていきます。

☆重要な点☆
$logは<body>〜</body>のソースに記述しましたが、「その2」では、各表示記事のソース内に記述します。(以下、例としてtreeを考えていきます)

treeのソース

<!--tree start-->
[ここは今までのソース(この下が新しいソースです)]
$end{
<script language="JavaScript">
<!--
var kiji = 1;
var page = 1;
var max = $seq;
document.writeln('<form action="bbs_tree" method=GET">');
document.writeln('<input type=hidden name=range value=100>');
document.writeln('<select name=base>');

while(kiji < max - 100){
document.writeln('<option value=',kiji + 99,'>',page,'ページ目');
kiji = kiji + 100;
page = page + 1;
}
document.writeln('<option value=',kiji + 99,' selected>',page,'ページ目');
document.writeln('</select> <input type=submit value="過去のページを見る">');
document.writeln('</form>');
//-->
</script>
<noscript><a href="bbs_tree?base=$seq&range=100">前のページを見る</a></noscript>
}
<!--tree end-->

<body>〜</body>からは$logを消してください。

☆解説☆
上に書いたのは「〜ページ目」といったかんじで出力する場合のソースです。(サンプルのソース)
通常と同様のタグを生成する場合は次のソースになります。

<script language="JavaScript">
<!--
var kiji = 1;
var max = $seq;
document.writeln('<form action="bbs_tree" method=GET>');
document.writeln('<input type=hidden name=range value=100>');
document.writeln('<select name=base>');

while(kiji < max - 100){
document.writeln('<option value=',kiji + 99,'>',kiji,' - ',kiji + 99);
kiji = kiji + 100;
}
document.write('<option value=',kiji + 99,' selected>',kiji,' - </select>');
document.writeln('<input type=submit value="過去ログ">');
document.writeln('</form>');
//-->
</script>
<noscript><a href="bbs_tree?base=$seq&range=100">前のページを見る</a></noscript>


$seqで記事番号を受け取り、1-100, 101-200, 201-300 といった具合に繰り返しoptionタグを生成し、$seqまで届いたら終了 という仕組みです。

(注1)
ここでは過去ログ参照数を100としています。
それでは多すぎるという場合は、例えば50件表示にしたい場合は
100→50  99→49 のように変えてください。


(注2)
もちろんtree以外にも適用が可能です。
それぞれのtreeの部分をplainなどに変更してください。


(注3)
$seqには、表示している記事の一番最後の記事番号が代入されます。
もし、$end以外に当てはめたい場合は、少しソースを変更する必要があるかも知れません。
また、過去ログ参照後に元のページに戻れなくなるのが弱点です。


(注4)
このままでは、$logと全く同じソースになるので、カスタマイズするにはstyleを変更します。
<select>と<input>(ボタン)を <select style="…">のようにしてやればOKです。ただし、その1の「全体的な注意点」にも記しましたが、borderに関するスタイル指定をするとNN4でバグが生じ、さらにJSと組み合わせると、わけのわからない表示になってしまうので、@import url('〜.css');を利用するのが良いと思います。