CMS「すぐ使えるCGI」の開発者がご質問にお答えします

 

短い一覧の記事の間隔について (No. 116)

回答日: 2006-10-12
<< 掲示板一覧  >> 質問する

質問

SSIでの短い一覧の組み込みをしましたが、フォントサイズをかえたのですが、一つ一つの記事の間を離したいのですが、記述の仕方がわかりません。教えてください。

あと、日付を消したのですが、記事の頭に、■の記号を入れたいのです。
もし二行になる場合は、二行目をインデントで一文字分下げたいのですが。
記述のしかたが解りません。教えてください。

現在のタグ short_list.html

<!-- mini index table begin -->
<p style="line-height:110%"><span style="font-size:13px">%_article_list_%</span></p>
<table width="178">
</table>
<!--- article list : generate from short_list.txt ---><!--リストを組み込むマーカー -->
<!-- mini index table end -->


現在のタグ short_list.txt

<tr>
<td class="left_table_cell">
<a href="adminnewdir/%_d_%.html"><p style="line-height:110%"><span style="font-size:13px">%_subject_%</span></p></A>
</td>
</tr>
投稿日時: 2006-10-11 22:06

回答

■タグの整合性について

まず short_list.html ですが、現在の記述ですと short_list.txt で指定している <tr> 〜 </tr> が <table> タグの外に出てしまいますので、以下のように 「 %_article_list_% 」が <table> タグ内に入るように修正して下さい。

====== short_list.html の文法修正例 ===ここから========

<!-- mini index table begin -->
<table width="178">
<!--- article list : generate from short_list.txt --->
%_article_list_%
</table>
<!-- mini index table end -->

====== short_list.html の文法修正例 ===ここまで========


■記事の間を離す方法

short_list.txt に指定して下さい。
具体的な記述方法は、通常 HTML のレイアウトに使うどのような方法でもご指定頂けます。

下記例は、<tr> を追加して行間を確保する方法です。


====== short_list.txt の記述例 ===ここから========

<tr>
<td class="left_table_cell">
<a href="adminnewdir/%_d_%.html"><p style="line-height:110%"><span
style="font-size:13px">%_subject_%</span></p></A>
</td>
</tr>
<!-- ↓スペーサー行 -->
<tr>
<td height="15"></td>
</tr>
<!-- ↑スペーサー行 -->

====== short_list.txt の記述例 ===ここまで========


■記号の追加とインデントについて

>記事の頭に、■の記号を入れたいのです。

これについては、short_list.txt に追加していただければ表示されますが、下記の字下げ対応はできません。

>もし二行になる場合は、二行目をインデントで一文字分下げたいのですが。


2行目に折り返された場合行頭から始まってしまいますが、以下のように編集すれば頭に「■」が追加されます。

====== short_list.txt の記述例 ===ここから========

<tr>
<td class="left_table_cell">
■<a href="adminnewdir/%_d_%.html"><p style="line-height:110%"><span
style="font-size:13px">%_subject_%</span></p></A>
</td>
</tr>

====== short_list.txt の記述例 ===ここまで========


もし「■」を箇条書き風に表示させたい場合、テーブルの列を分割するか(下記例1)、実際にリストでの記述(下記例2)を試してみて下さい。

実際の表示は全体のスタイル設定や組み込み先のページのレイアウトによって変わりますので、ページを確認しながら調整して下さい。

一般的なHTMLタグやCSSの設定方法に関しては、下記のサイトがおすすめです。
http://www.tagindex.com/


◇例1:テーブルの列分割をする方法

====== short_list.txt の記述例 ===ここから========

<tr>
<td class="left_table_cell">■</td>
<td class="left_table_cell">
<a href="adminnewdir/%_d_%.html"><p style="line-height:110%"><span style="font-size:13px">%_subject_%</span></p></A>
</td>
</tr>
<!-- ↓スペーサー行 -->
<tr>
<td height="15" colspan="2"></td>
</tr>
<!-- ↑スペーサー行 -->

====== short_list.txt の記述例 ===ここまで========


◇例2:リストタグ <ul> を使う方法

この例の場合、short_list.html と short_list.txt 両方を変更します。

====== short_list.html の記述例 ===ここから========

<!-- mini index table begin -->
<table width="178">
<tr><td>
<ul type="square">
<!--- article list : generate from short_list.txt --->
%_article_list_%
</ul>
</td></tr>
</table>
<!-- mini index table end -->

====== short_list.html の記述例 ===ここまで========

====== short_list.txt の記述例 ===ここから========

<li>
<a href="adminnewdir/%_d_%.html"><p style="line-height:110%"><span
style="font-size:13px">%_subject_%</span></p></A>
</li>

====== short_list.txt の記述例 ===ここまで========



◆いただいた入力からの変更点

メールでいただいた情報も追加しました。
回答日: 2006-10-12

さらに詳しく