Seesaa[コンテンツ編集]・自由形式のデザインを揃える

以前に書いた、Seesaa[CSS編集]・サイドバーを角丸テーブルで囲うのところでも触れていますが、自由形式コンテンツのデザインを他のサイドバーコンテンツに揃える方法です。

詳しくは以下。

サイドバーコンテンツにデザインを揃える

「デザイン」→「コンテンツ」→「自由形式」を選択します。
自由入力欄のところを、、

<div class="sidetitle">自由形式コンテンツのタイトル</div>
<div class="side">コンテンツの内容</div>

となるように書きます。

ブログ記事にデザインを揃える

「デザイン」→「コンテンツ」→「自由形式」を選択します。
自由入力欄のところを、

<div class="blog">
<div class="blogbody">
<h3 class="title">自由形式コンテンツのタイトル</h3>
<div class="text">
自由形式コンテンツの内容
</div>
<div class="posted"><img src="http://ご自分のSeesaaブログURL/自分が指定したフォルダ/spacer.gif" alt="" width="1" height="1" border="0" /></div>
</div>
</div>

となるように書きます。

※spacer.gifについては、Seesaa[HTML編集]・最近の記事活用法の下部の記事を参照。

背景画像の都合上、日付部分も必要な場合は、

<div class="blog"><h2 class="date"><img src="http://ご自分のSeesaaブログURL/自分が指定したフォルダ/spacer.gif" alt="" width="1" height="1" border="0" /></h2>
<div class="blogbody">
<div class="text">
<h3 class="title">自由形式コンテンツのタイトル</h3>
自由形式コンテンツの内容
</div>
<div class="posted"><img src="http://ご自分のSeesaaブログURL/自分が指定したフォルダ/spacer.gif" alt="" width="1" height="1" border="0" /></div>
</div>
</div>

となるように書きます。

例えばこのブログにはAmazonサーチボックスが設置してありますが、そこは

<div class="sidetitle">Amazonサーチ</div>
<div class="side">Amazonアソシエイトのサーチボックスタグ</div>

となっています。
また、ブログパーツなどにも同様のカスタマイズが出来ます。

「デザイン」から「コンテンツ」を選択し、「ソースコード」の部分を

<div class="sidetitle">ブログパーツの名前</div>
<div class="side">最初から書いてあったソース</div>

と、してみたりとか。


自由形式コンテンツは、フリーなエリアなので、特に詳細なCSS設定などされていません。
そのままの状態で使うと、他のコンテンツに比べて行間が詰まっていたり上下左右の余白がなかったりで、少し見づらくなってしまいます。
自分でCSSを設定するか、上記のように他のサイドバーコンテンツやデザインにあわせてあげるとすっきりと見やすくなります。

注意）この記事はカスタマイズ紹介コードの<h3></h3>の位置に誤りがありましたので、訂正してあります。