Comment

スレのデザインは直接HTMLに書くか、それともCSSで外部ファイルに書くかの2種類です。どちらがいいかと言いますと、どちらとも長所と短所を兼ね備えています。直接HTMLの中にstyleを指定してスタイルを書くことにより、HTMLのテキストデータの量が増えてしまうだけでなく、SEO(検索エンジンを対象として検索結果でより上位に合わられやすいようにすること)としては、よろしいとは言えません。しかし日本では携帯からサイトを閲覧する方が多いので、直接書くとと携帯の方でも反映されるというメリットがあります。CSSの外部ファイルは逆のことが言えます。

エクサワロスの設定の仕方は、「オプション」→「書式設定」で行います。丁寧に作られているツールですので上の例を見ながら何をいじるとどこが変化するか、分かりやすく示してます。チェックボックスはチェックを入れるだけですので、今回は説明を省きます。

上の図を見てもらうとここではタグを挿入することになります。ここでは少し知識がないといじれません。1~6の空欄がありますが、すべての欄をうめなくても指定したい場所のみを入れることができます。1と6はレス全体を囲むことができるので、divタグなどを指定するのに向いています。2と3は番号からIDまでを囲み、4から5は本文を囲みます。

方法1

1 <div class="●●">
2   <p class="▲▲">
3   </p>
4   <p class="■■">
5   </p>
6 </div>

全体をdivタグで囲み、IDと本文はpタグでそれぞれ囲むスタイルです。もしスタイルを外部ファイル(CSS)に書くとすると例として、

.●● {
margin-top:10px; (囲んでる上に隙間を10px空ける)
margin-bottom:10px; (囲んでる下に隙間を10px空ける)
}
.▲▲ {
margin-bottom:5px;
font-size:14px (フォントの大きさを14pxにする)
}
.■■ {
font-size:18px;
}

といった感じになります。直接指定する場合は、

1 <div style="margin-top:10px;margin-bottom:10px;">
2   <p  style="margin-bottom:5px;font-size:14px;">
3   </p>
4   <p  style="font-size:18px;">
5   </p>
6 </div>

classがなくなり、その代わりにstyleを入れることによりデザインが直接反映されるようになります。

 <div style=" 直接指定したいもの ">

CSSで指定しなくても一個だけ指定したい時、その場だけ使用したい時、CSSを使えない理由があるときなど、覚えておくと便利です。私は追加でデザインを変更する際などで使用しています。

方法2

1 記入しない
2 <div class="●●"><div class="▲▲">
3 </div>
4 <div class="■■">
5 </div></div>
6 記入しない

すべてをdivタグで囲むスタイルです。1と6のところにdivタグをを設定しても、方法2のように2の所に連続してタグを入れても変わりません。

方法3

1 記入しない
2 <span class="●●">
3 </span>
4 <p class="▲▲">
5 </p>
6 記入しない

レス全体を囲まないスタイルです。

方法4

1 記入しない
2 <dl class="●●"><dt class="▲▲">
3 </dt>
4 <dd class="■■">
5 </dd></dl>
6 記入しない

dlタグを使って囲むスタイルです。この挙げた例のように同じようにみえても書いてあるHTMLはそれぞれ違っています。どれを使うのかはお好みですので、自分にあったスタイルを見つけてください。

Comment

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。