このページはCGIとして動作しません。スタイルの表示調整例と、それを含むいくつかの事柄についての解説が書かれています。
これはCSSによる表示例を示すためのものです。
右に検索部が表示されていてわかりにくいと思いますが、このサイト情報部分は“中央寄せ”になっています。
tbp.cssには.one_dataというセレクタが二つあり、最初は上側のものが有効になっています。下側の/*←◆と◆→*/を消すと、こちらが有効になって枠や背景がつきます。幅はwidth属性に380pxとか60%とか値を指定すると絞ることができます(表示例では380px)。
表示位置調整は左右のmargin属性です。左寄せの場合は次のようにします。
margin-left: 0px;margin-right: auto;左の値をいくらか指定すると、その分のマージンを取って表示されます(表示例では左マージン12%)。
中央寄せのときの値は左右autoです。しかしこれだとIEが言うことを聞かないので、#result_positionセレクタに“text-align: center;”を指定します(中央に配置しないときは値をnoneにしてください)。
/*特にIEのための中央寄せなどの表示位置指定*//*正しくCSSを解釈するブラウザでは、“サイトデータ一件分の括り”の左右marginプロパティで調整します*/#result_position {text-align: center;}/*サイト情報表示のマージン*/#listmgn {margin-top: 1em;margin-left: 8px;margin-right: 8px;}/*▼サイトデータ一件分の括り*//*背景白【次項と切替選択】*/.one_data {padding-bottom: 2.5em;text-align: left;}/*枠と背景あり(←◆と◆→の行を消すとこちらが有効になります)*//*表示位置調整はwidthの値を適宜狭めて、左右のmarginの値で*//*←◆.one_data {background: #CCFFCC;padding: 6px 6px 6px 6px;border: 1px solid #663399;margin-left: auto;margin-right: auto;margin-bottom: 1em;width: auto;text-align: left;}◆→*//*▲サイトデータ一件分の括り*/.g_flt/.g_nofセレクタのwidth属性を調整します。初期値は7emです。最も字数の多い分野に注目しながら加減してください。表示例の、少し極端ですが「ちょっと長めの名前が設定された分野」みたいな長いものは、横に並ぶ数も減ってしまいますし、むしろ全体のバランスを考えながら意図的に折り返させたほうが見やすいでしょう。検索部や検索フレームの幅も適宜あわせておかないと、はみだして横スクロールバーが出現することがあります。/*▼分野一覧の分野(分野名の字数に合わせた幅の調整等)*//*「検索フォームの分野項目をフロート」の設定が1だとg_flt、0だとg_nofが使われます*/.g_flt {float: left;width: 7em;background: #CCCCFF;margin-left: 6px;margin-bottom: 1px;}.g_nof {width: 7em;background: #CCCCFF;margin-left: 6px;margin-bottom: 1px;}HTML要素は外部スタイルシートのセレクタに関連づけられていますので、セレクタにfont-size、color、background属性などの値を設定することで変更できます。
表示例では.s_spaceセレクタに“font-size: 70%;”を指定することで、並び順と出力オプションの文字サイズをまとめて変更しています。
HTML要素の物理的な位置関係の変更(移動や追加)については、要素の親子関係や見出しの深度といったHTMLの約束事がいろいろありますので、それらに注意してください。移動したことで適用する要素が変わることもありますし、そもそも移動してはまずいものもあります。視覚的な表示位置などは外部スタイルシートを使えば自由に調整できます。
HTMLソースの記述のうち、テンプレートファイルに書かれているものはそのまま書き換えられます。
#〜#で囲まれている部分は、設定や処理結果に応じて動的に変化するものなので、スクリプト本体に記述されています。当然これらはスクリプト内部を直接書き換えなければなりません。スクリプト内部から直接探すのは結構面倒なので、検索機能をもったテキストエディタを使うと便利です。
tbplib.pl内に「コメントマークアップ」というサブルーチンがあり、ここにあらかじめいくつかの処理が用意されています。ぱっと見ると複雑そうですが、部分マークアップの箇所なら、行をコピペして書き換えるだけで増やすことができます。追加で必要になるのは殆どの場合、この部分マークアップの強調・強強調だと思います。
この処理はすぐ下にある「タグ→記号戻し」のサブルーチンと対になっているので、そちらも忘れずに書いてください。
### 部分マークアップ# 強調$mkup =~ s/【em→】/<em class="i_com">/ig;$mkup =~ s/【em_spl→】/<em class="i_com_spl" title="特記事項">/ig; # 追加の要領はこれと同じ$mkup =~ s`【←em】`</em>`ig;# より強い強調$mkup =~ s/【strong→】/<strong class="i_com">/ig;$mkup =~ s`【←strong】`</strong>`ig;# 引用部分$mkup =~ s/【q→】/<q class="i_com">/ig;$mkup =~ s`【←q】`</q>`ig;# 単なるCSSによる装飾用# 記法は【al数字→】です。数字は半角の0〜9を一文字です。# 外部スタイルシートには『.aimless_0 {color: red;size: 100%;}』とか追加します。# $mkup =~ s/【al(\d)→】/<span class="aimless_$1">/ig;# $mkup =~ s`【←al】`</span>`ig;開始タグは“<em class="hoge" title="piyo">”といったように、属性も値も一切固定です。表示調整のために値が変わるCOLOR/SIZE/BGCOLOR/ALIGNのようなような属性は使えません。加えて、追加したタグが紹介文中に一箇所でも使われている限り、タグの記述を変更したり処理を削ることはできません(置き換え処理ができなくなります)。一度追加したものは廃止できないと思ってください。
無料サーバでは外部からのコンテンツ参照を禁じていたりして、バナーがリンク切れ状態になることがあります。その場合は、リンク切れのまま/代用バナー適用/自鯖に持ち帰る、などで対応するしかないです。この点、改善しているサーバもあるようです。
言いたいことは解るんですが無料サーバさん、せめてバナーは、外部から参照できないと意味がないんではないですか……?
ブラウザがキャッシュを返しています。ブラウザ側でページを更新してください。
タグのように見えますが、スクリプトが内部処理で使用するための特殊な記号です。
<TEMPLATE TYPE="**">〜</TEMPLATE>で括られた部分が、所定のモードにおいて出力されます。**部分に入るのはb/s/rのいずれかと1です。1が付くと最初のアクセス時にのみ出力されます。br1だとBモードとRモードで最初の一回だけ出力されることになります。参考までに、小学初射のリンクページではBモードの最初だけ(b1)、リンクについての説明が出るようになっています。
注意点は<TEMPLATE TYPE="**">と</TEMPLATE>の“行”は**部分以外なにも変更してはならないということです。文字(タブ・空白含む)の追加はできませんし、大小文字も区別します。この行を書き換えてしまうと、その部分はモードと無関係に出力されるので、FモードのRフレームにも検索部がある、なんていうことになります。逆にSSIでは出力されなくなってしまいます。
T-BookmarkPlus Final改が出力するHTMLソースは、本来PC用で、HTML要素に様々な(携帯端末には不要な)属性が付いていたりします。携帯用の出力件数を設定するなど、携帯端末による閲覧時には一回の転送量を抑えるようにしていますが、携帯端末専用のソースに比べれば、転送量が遥かに多いです。画像なしでも、数10kB程度のトラフィックが受信毎に発生することも考えられますので、頻繁に利用する場合は、パケット料金の増大に注意してください。
DoCoMo1.0のような“5kB”といったファイルサイズ制限のある規格では、途中で切られる可能性があります。また、旧いau機などが搭載していた、HDML用のUP.Browserでは利用できません。