バカネコ日記

フリーページ

2004年09月23日
XML
カテゴリ:バカネコPC講座


 
ここはにゃんこサイトのはず...なのだが、
行ってみようか、バカネコ講座!

前回、テンプレートが、間延びしておかしくなる例を説明した。
それを防ぐには、自動改行なしに設定すればいい。

だが、トップページやフリーページなら設定が出来るが、
日記ページの場合、どう対処するかが宿題だった。
日記ページでは、テーブルを使わないのが一番だが、どうしても使いたい場合もある。

さて、テーブルが間延びするのは、自動改行のせいであった。
行を変えて書くと、システムが勝手に改行コードを挿入してしまうのである。

HTMLは、もともと、自動改行などしない。
<br>などの改行指定が無い限り、改行しないのである。 だから、

例1 <table><tr><td></td>ネコ</tr></table>

と、続けて書こうと、それぞれのタグを適当に改行して、

例2 <table>
   <tr>
   <td>
   ネコ
   </td>
   </tr>
   </table>


と書こうと、意味は全く同じなのだ。
インターネットエクスプローラでも、ホームページ・ビルダーでも確認してみるといい。
全く同じように表示される。

ここが、落とし穴である。

インターネットエクスプローラやビルダーで確認した、問題がなかった。
だから、安心してそのソースをコピーして、日記に貼り付けた。
なのに、見てみるとヘンテコな表示になっていて、「がお~っ」と吼える。


日記ページは自動改行システムを解除できないから、例2のような書き方をすると、
それぞれの行末に、改行コードが自動追加されてしまう。 
これが間延びする原因だ。


【仔猫の里親募集中】

 ↑この子猫の里親を募集しています。



また、☆ぱせり☆2271さんのテンプレートを例に取ろう。

このテンプレートのソースを見ると、ひとまとまりのタグごとに行を変えて書かれており、
整然としていて非常に読みやすい。
1行置きに空行を入れてあるから、なおさらである。

だが、このように行を変えたり、空行を入れたりすると「自動改行」の餌食になる。
日記ページでは、間延びと無意味なスペースが発生してしまう。

ここまで分かれば、対処方法は簡単。
改行しなければいいのだ。
1行の中に、ずらずらと連続して書いてしまえばいい。

試しに、ぱせりさんのテンプレートを書き直してみる。

■タイトル■
■画像■
■画像■
■画像■
■商品説明■
■商品説明■
■商品説明■
■画像■
■画像■
■画像■
■商品説明■
■商品説明■
■商品説明■
■コメント■

bypaseri

これを正確に、日記ページに再現するには、以下のように書く。

<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>



何のことはない。 改行せずに詰めて書いただけだ。

この書き方でも、インターネットエクスプローラやホームページ・ビルダー
ちゃんと正確に表示する。

だが、こんなもの、覚えられるわけがない。 
まして、これを修正するなんて、とんでもない。 目が回る。
だから覚えなくてよろしい。

ならば、実際の作業はどうするか?
バカネコ講座らしく、ラクをしよう。



ソフトを使おうと、手打ちだろうと、かまわない。
もともとの、整然としたきれいなテンプレートを使って、
写真なり文字なりを入れ、とにかく完成させる。

ここまでは、ごく普通の作業なので誰でもやっている。

そのあとで、行末の改行を全部削除して、1行にしてしまう。
手でやるのが面倒なら、適当なテキストエディタを使って、
置換してしまえばいい。 → (注)
これなら、思いっきりラクが出来る。

かくして、上記のような、団子状のHTMLができあがる。
これをコピーして、お好みの位置に貼り付けるのだ。
非常に見苦しいソースだが、これなら日記ページに書き込んでも崩れることはない。

ふむ。 自動改行、破れたりっ!


【今日のポイント】
1.HTMLは、1行にまとめて書いても良い。
2.日記ページは自動改行が設定されている。
3.日記ページにテーブルタグを使う時は、行を変えずに1行で書くと崩れない。
4.HTMLを1行にまとめるには、TeraPad の置換機能が便利。



この記事が役に立ったと思われたら1票! クリック →
 おもしろかったらクリックしてね


(注)Windows付属のメモ帳では無理だが、フリーソフトで TeraPad というのがある。
これを使えば改行コードも一気に削除できる。

手順は、メニューの検索から置換を選んで、検索する文字列に \n を入れ
置換後の文字列は空白のまま、\n=改行のチェックはON、置換動作の確認の
チェックははずしておく。
すべて置換ボタンをクリックすれば、一瞬で出来あがり。

詳細は割愛するが、TeraPad は他にも便利な点がたくさんあるので、
ダウンロードしておくことをおすすめする。
ワープロは重いので、昔からほとんど使わなかったが、TeraPad を使うようになってからは、
メモ帳さえも使わなくなってしまった。


実は、ぱせりさんのところには、日記ページ対応型のテンプレートが、置いてある。
理屈抜きで、今すぐ使いたい方は、こちらが便利。
ビルダーをお持ちの方は、少々ソースがごちゃごちゃしていても、問題なく編集できる。





ネコでもわかる初心者PC講座はこちら。 →バカネコ講座

とにかく笑いたい方はこちら   → 爆笑ガイド

パソコン買い替えの前にチェック → 費用の削り方



画面右上「日記リンク追加」をクリック、「◎追加する」ボタンを押すとこの日記がリンクできます。
子猫の里親募集にお力添えをいただける方、または、このサイトの新着記事の通知をご希望の方はご利用ください。



 







最終更新日  2004年09月25日 14時22分12秒
コメント(26) | コメントを書く

PR

バックナンバー

2019年08月
2019年07月
2019年06月
2019年05月
2019年04月

プロフィール


海獣トド

コメント新着

 海獣トド@ Re:意外な一面に触れて。(08/14) 泡雪さんへ >マザーテレサって本当にす…
 海獣トド@ うめぼしがキラリ☆さんへ >ひゃー、ブログさぼってる間にトドさん…
 海獣トド@ 鵜の岬さんへ >これからも・・ヨロシク・・ね こち…
 海獣トド@ sshijimisanさんへ >でも、トド様のおかげで少しの村民は救…
 海獣トド@ もぐらのこさんへ >日記の下書き機能残ってるよ(^-^) …
 海獣トド@ archfelisさんへ >せめて12日一杯残せばいいのに・・・…

Copyright (c) 1997-2019 Rakuten, Inc. All Rights Reserved.