設定ワンポイント


このページはCGIとして動作しません。スタイルの表示調整例と、それを含むいくつかの事柄についての解説が書かれています。

T-BookmarkPlus Final改(CSS表示例)


検索部


登録数
115


抽出方式

抽出方式 /

並び順

並び順
方向 /

出力オプション

出力オプション

分野



結果部

条件設定なし
1件

状態

範囲
No.1 〜 No.1
並び順
登録降順
ページ
  1. 1
出力オプション
Banner
URL
Genre
Keyword
Serial
ID

検索結果

結果個別データ

No.
1
サイト名&バナー
小学初射
URL
http://www.twin.ne.jp/~fairfox/cgi-bin/tbpvf/
更新日
2008/07/15
参照数
0
分野
分野1
ちょっと長めの名前が設定された分野
ID
2008071500000001

紹介文

これはCSSによる表示例を示すためのものです。

右に検索部が表示されていてわかりにくいと思いますが、このサイト情報部分は“中央寄せ”になっています。



状態

範囲
No.1 〜 No.1
並び順
登録降順
ページ
  1. 1

解説


サイト情報を枠で囲みたい。サイト情報の幅を絞りたい。

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;
}
◆→*/
/*▲サイトデータ一件分の括り*/

分野一覧の項目が折り返ってしまう。

VF-A/B
検索部や検索フレームの幅の設定を調整してください。
VF-S
.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要素の背景色などの設定を変えたい。

HTML要素は外部スタイルシートのセレクタに関連づけられていますので、セレクタにfont-size、color、background属性などの値を設定することで変更できます。

表示例では.s_spaceセレクタにfont-size: 70%;を指定することで、並び順と出力オプションの文字サイズをまとめて変更しています。


HTML要素の配置・表示位置など画面デザインを変えたい。

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>とは?

タグのように見えますが、スクリプトが内部処理で使用するための特殊な記号です。

<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では利用できません。