|
|
|
2004年09月23日
カテゴリ：バカネコＰＣ講座
ここはにゃんこサイトのはず．．．なのだが、 行ってみようか、バカネコ講座！ 前回、テンプレートが、間延びしておかしくなる例を説明した。 それを防ぐには、自動改行なしに設定すればいい。 だが、トップページやフリーページなら設定が出来るが、 日記ページの場合、どう対処するかが宿題だった。 日記ページでは、テーブルを使わないのが一番だが、どうしても使いたい場合もある。 さて、テーブルが間延びするのは、自動改行のせいであった。 行を変えて書くと、システムが勝手に改行コードを挿入してしまうのである。 HTMLは、もともと、自動改行などしない。 <br>などの改行指定が無い限り、改行しないのである。 だから、 例１ <table><tr><td></td>ネコ</tr></table> と、続けて書こうと、それぞれのタグを適当に改行して、 例２ <table> <tr> <td> ネコ </td> </tr> </table> と書こうと、意味は全く同じなのだ。 インターネットエクスプローラでも、ホームページ・ビルダーでも確認してみるといい。 全く同じように表示される。 ここが、落とし穴である。 インターネットエクスプローラやビルダーで確認した、問題がなかった。 だから、安心してそのソースをコピーして、日記に貼り付けた。 なのに、見てみるとヘンテコな表示になっていて、「がお～っ」と吼える。 日記ページは自動改行システムを解除できないから、例２のような書き方をすると、 それぞれの行末に、改行コードが自動追加されてしまう。 これが間延びする原因だ。 また、☆ぱせり☆2271さんのテンプレートを例に取ろう。 このテンプレートのソースを見ると、ひとまとまりのタグごとに行を変えて書かれており、 整然としていて非常に読みやすい。 １行置きに空行を入れてあるから、なおさらである。 だが、このように行を変えたり、空行を入れたりすると「自動改行」の餌食になる。 日記ページでは、間延びと無意味なスペースが発生してしまう。 ここまで分かれば、対処方法は簡単。 改行しなければいいのだ。 １行の中に、ずらずらと連続して書いてしまえばいい。 試しに、ぱせりさんのテンプレートを書き直してみる。 <P><FONT SIZE="-1"><TABLE BORDER=0 BGCOLOR="#99CCFF" CELLSPACING=1 WIDTH=400 HEIGHT=304><TR><TD COLSPAN=3 WIDTH=352 HEIGHT=25 BGCOLOR="#6699FF"><CENTER><FONT COLOR="#FFFFFF"><B>■タイトル■</B></FONT></CENTER></TD></TR><TR><TD WIDTH=117 HEIGHT=60 BGCOLOR="#FFFFFF"><CENTER>■画像■</CENTER></TD><TD WIDTH=117 HEIGHT=60 BGCOLOR="#CCFFFF"><CENTER>■画像■</CENTER></TD><TD WIDTH=118 HEIGHT=60 BGCOLOR="#FFFFFF"><CENTER>■画像■</CENTER></TD></TR><TR><TD WIDTH=117 HEIGHT=60 BGCOLOR="#FFFFFF"><CENTER><FONT SIZE="-1" COLOR="#333333">■商品説明■</FONT></CENTER></TD><TD WIDTH=117 HEIGHT=60 BGCOLOR="#CCFFFF"><CENTER><FONT SIZE="-1" COLOR="#333333">■商品説明■</FONT></CENTER></TD><TD WIDTH=118 HEIGHT=60 BGCOLOR="#FFFFFF"><CENTER><FONT SIZE="-1" COLOR="#333333">■商品説明◆ #</FONT></CENTER></TD></TR><TR><TD WIDTH=117 HEIGHT=60 BGCOLOR="#CCFFFF"><CENTER>■画像■</CENTER></TD><TD WIDTH=117 HEIGHT=60 BGCOLOR="#FFFFFF"><CENTER>■画像■</CENTER></TD><TD WIDTH=118 HEIGHT=60 BGCOLOR="#CCFFFF"><CENTER>■画像■</CENTER></TD></TR><TR><TD WIDTH=117 HEIGHT=60 BGCOLOR="#CCFFFF"><CENTER><FONT SIZE="-1" COLOR="#333333">■商品説明■</FONT></CENTER></TD><TD WIDTH=117 HEIGHT=60 BGCOLOR="#FFFFFF"><CENTER><FONT SIZE="-1" COLOR="#333333">■商品説明■</FONT></CENTER></TD><TD WIDTH=118 HEIGHT=60 BGCOLOR="#CCFFFF"><CENTER><FONT SIZE="-1" COLOR="#333333">■商品説明■</FONT></CENTER></TD></TR><TR><TD COLSPAN=3 WIDTH=352 HEIGHT=20 BGCOLOR="#99CCFF"><CENTER><FONT COLOR="#333333">■コメント■</FONT></CENTER></TD></TR></TABLE><TABLE BORDER=0 CELLSPACING=1 WIDTH=400><TR><TD><P ALIGN=right><A HREF="http://plaza.rakuten.co.jp/insomnia1/"><FONT SIZE="-2" COLOR="#666666">bypaseri</FONT></A></P></TD></TR></TABLE></FONT></P> 何のことはない。 改行せずに詰めて書いただけだ。 この書き方でも、インターネットエクスプローラやホームページ・ビルダーは ちゃんと正確に表示する。 だが、こんなもの、覚えられるわけがない。 まして、これを修正するなんて、とんでもない。 目が回る。 だから覚えなくてよろしい。 ならば、実際の作業はどうするか？ バカネコ講座らしく、ラクをしよう。  ソフトを使おうと、手打ちだろうと、かまわない。 もともとの、整然としたきれいなテンプレートを使って、 写真なり文字なりを入れ、とにかく完成させる。 ここまでは、ごく普通の作業なので誰でもやっている。 そのあとで、行末の改行を全部削除して、１行にしてしまう。 手でやるのが面倒なら、適当なテキストエディタを使って、 置換してしまえばいい。 → (注) これなら、思いっきりラクが出来る。 かくして、上記のような、団子状のHTMLができあがる。 これをコピーして、お好みの位置に貼り付けるのだ。 非常に見苦しいソースだが、これなら日記ページに書き込んでも崩れることはない。 ふむ。 自動改行、破れたりっ！ 【今日のポイント】 １．HTMLは、１行にまとめて書いても良い。 ２．日記ページは自動改行が設定されている。 ３．日記ページにテーブルタグを使う時は、行を変えずに１行で書くと崩れない。 ４．HTMLを１行にまとめるには、TeraPad の置換機能が便利。 この記事が役に立ったと思われたら１票！ クリック →  (注)Windows付属のメモ帳では無理だが、フリーソフトで TeraPad というのがある。 これを使えば改行コードも一気に削除できる。 手順は、メニューの検索から置換を選んで、検索する文字列に \n を入れ 置換後の文字列は空白のまま、\n=改行のチェックはON、置換動作の確認の チェックははずしておく。 すべて置換ボタンをクリックすれば、一瞬で出来あがり。 詳細は割愛するが、TeraPad は他にも便利な点がたくさんあるので、 ダウンロードしておくことをおすすめする。 ワープロは重いので、昔からほとんど使わなかったが、TeraPad を使うようになってからは、 メモ帳さえも使わなくなってしまった。 実は、ぱせりさんのところには、日記ページ対応型のテンプレートが、置いてある。 理屈抜きで、今すぐ使いたい方は、こちらが便利。 ビルダーをお持ちの方は、少々ソースがごちゃごちゃしていても、問題なく編集できる。 ネコでもわかる初心者ＰＣ講座はこちら。 →バカネコ講座 とにかく笑いたい方はこちら → 爆笑ガイド パソコン買い替えの前にチェック → 費用の削り方 画面右上「日記リンク追加」をクリック、「◎追加する」ボタンを押すとこの日記がリンクできます。 子猫の里親募集にお力添えをいただける方、または、このサイトの新着記事の通知をご希望の方はご利用ください。 お気に入りの記事を「いいね！」で応援しよう
[バカネコＰＣ講座] カテゴリの最新記事
|
|
||||||||||||||||||||||||
