このコーナーでは、テンプレートのカスタマイズについて、実際のサンプルページを元に紹介していきます。
皆さん、こんにちは。
おちゃのこネットの刑部です。
今回のデザイン道場は、フリーページや自由記入欄、htmlタグ利用可能エリアでhtmlタグを記載いただく際のご注意点をご紹介致します。
タグが正しく閉じられているか
「>」や「"」の記載が抜けているとレイアウト崩れの原因となります。
例1) >の記載漏れ
<font color="#FFFFFF" 正しくは→ <font color="#FFFFFF">
<a href="http://demo.ocnk.net/" 正しくは→ <a href="http://demo.ocnk.net/">
例2) "の記載漏れ
<font size="5> 正しくは→ <font size="5">
<a href="http://demo.ocnk.net/> 正しくは→ <a href="http://demo.ocnk.net/">
開始タグに対する終了タグが抜けていないか
</td></tr></table>等の記載が抜けているとレイアウト崩れの原因となります。
例1) </td></tr></table>の記載漏れ
<table><tr><td>内容 正しくは→ <table><tr><td>内容</td></tr></table>
例2) </center>の記載漏れ
<center>内容 正しくは→ <center>内容</center>
例3) </a>の記載漏れ
<a href="http://demo.ocnk.net/">内容
正しくは→ <a href="http://demo.ocnk.net/">内容</a>
tableタグやimgタグの横幅が大きすぎないか
<table>タグや<img>タグに1000や1500等の大きな数値を指定している場合、横にはみ出して表示されますので、数値を小さくして下さい。
例1) <table>タグの横幅が1000や1500などの大きな数値になっている
<table width="1000" ><tr><td>内容</td></tr></table>
例2) <img>タグの横幅が1000や1500などの大きな数値になっている
<img src="http://demo.ocnk.net/data/demo/image/demo.jpg" width="1000" />
imgタグに横幅の指定をしているか
<img>タグの横幅を指定していない場合、元画像の大きさで表示されます。その際、元画像の横幅が大きすぎる場合、横にはみ出して表示されますので、横幅を指定していただくか、画像の横幅を編集して下さい。
例1) <img>タグの横幅指定をしていない
<img src="http://demo.ocnk.net/data/demo/image/demo.jpg" />
↓変更後
<img src="http://demo.ocnk.net/data/demo/image/demo.jpg" width="450" />