バカネコ日記

フリーページ

保存ﾌｧｲﾙ見方

< 新しい記事

新着記事一覧(全963件)

過去の記事 >

全て | カテゴリ未分類 | バカネコＰＣ講座 | バカネコのお話

2004年09月23日

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

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

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

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

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

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

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

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

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

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

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

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

【仔猫の里親募集中】

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

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

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

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

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

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

■タイトル■

■画像■

■商品説明■

■画像■

■商品説明■

■コメント■

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>

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

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

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

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

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

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

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

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

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

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

この記事が役に立ったと思われたら１票！　クリック　→

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

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

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

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

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

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

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

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

お気に入りの記事を「いいね！」で応援しよう