スポンサーサイト

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

--:-- | スポンサー広告 | edit | page top↑

<div>~</div>の使い方(フリーエリアのカスタマイズ)

カスタマイズはCSS(スタイルシート)をいじるだけという初心者のために、HTMLの<div>の使い方を説明しようと思います。

まず基本中の基本なことを簡単に説明しておきますが、HTMLには「ここにこれを置きますよ」というタグを書き、CSSにはその部分の見栄に関する記述をします。その際、HTMLに記述されるのが<div class="xxx"></div>というもので、<div>~</div>で囲まれたものが「ひと固まり」です。classはそのひと固まりになった部分の名前なので、スタイルシートから「HTMLのxxxという固まりはこのような見栄にします」と命令する仕組みになっています。

<div>~</div>で囲んだひと固まりは「1つの箱」だと思ってください。
テンプレートのHTMLを見れば分かるように、テンプレートはたくさんの箱で出来ているようなものです。
レイアウトという箱の中に、ヘッダーという箱、メニューという箱、メインという箱などがあり、メニュー、メインの箱の中にまたいくつもの箱があるというイメージです。

「この部分だけを個別に設定したい」という箇所は<div>~</div>という箱の中に入れ、その箱に名前をつけ、CSSで見栄を設定することができます。


修正前で、プラグインのフリーエリアなんですが、ここに入れられたものは「最近のコメント」や「リンク」等の他のメニューとは異なる表示のされ方をします。右は多くの人が利用されてると思われるトラックバックピープルですが、こんな具合です。文字は左詰めになってますし、上にも余分なスペース(なんなんでしょう、これは)が入ってしまっています。

フリーエリアの見栄は基本的にテンプレートには含まれていませんので、公式・共有テンプレートでプレビューすると、上詰め、左詰めになってるものが多いかと思います。そういう場合は自分で設定するしかありませんので、フリーエリアのカスタマイズ方法を例に<div>の具体的な使い方を説明してみようと思います。



プラグインのフリーエリアのHTMLを見てみると、以下のようになっています。

<!-- &freeareaの中にHTMLが代入されます。 -->
<p class="plugin-freearea" &align>
&freearea
</p>


<p>~</p>は段落(paragraph)のことです。このままだとどういうわけか、上の画像のように余計な余白が入るので、これをdivに変えます。

<!-- &freeareaの中にHTMLが代入されます。 -->
<div class="plugin-freearea" &align>
&freearea
</div>


class="plugin-freearea"とあるので、この箱の名前が「plugin-freearea」だということが分かります。
*&alignはFC2独自の変数ですので、ここでは気にしないでください。

次にCSSに以下のように記述します。
この時、クラス名(箱の名前)の前には必ず「.(ピリオド)」を付けます。

.plugin-freearea {
padding:5px 8px;
}


数値はお好みで。

これで、「plugin-freearea」という箱にpaddingの設定が出来たことになります。



また、トラックバックピープルをいくつも設置している場合、テーマとテーマの間に余白はなく、詰まって表示されていると思います。その場合は上の設定をした上で、トラックバックピープルの各テーマのスクリプトを<div>で囲み、1つずつを箱に入れてしまいます。

まず、プラグインの「設定の変更」を開きます。
その下の方に入れられているスクリプトの1つずつを<div>で囲みます。クラス名は分かりやすいように「tbp」とします。
<div class="tbp"><script language="javascript">b=0;</script>
<script type="text/javascript" src="http://www.blogpeople.net/
display/TB_People/tbp05818_euc.js" >
</script></div>

<div class="tbp"><script language="javascript">
省略
</script></div>



修正後そして、CSSに以下のように書き込みます。

.tbp {
border:1px dotted #D3C27C;
padding:5px 3px;
margin:5px 0px;
}


これで各テーマの間にスペースを設けることができました。
borderは各テーマが「ひと固まりの箱」に入っていることを分かりやすくするために付けてみました。

以上です。


今回はフリーエリアのトラックバックピープルを例に挙げましたが、冒頭に書きましたように、<div>~</div>の使い方が分かれば色んなものに応用できると思います。

ちなみに、前回「BlogPet(フリーエリア)のセンター寄せ」という記事を書きましたが、これも(応用というわけではありませんが)、<div>~</div>を使った方法です。
スポンサーサイト

00:52 | カスタマイズ | edit | page top↑
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。