いつものことだが、Seesaa系ブログのさくらのブログの標準テンプレートがひどすぎなので、修正方法をQA方式でまとめてみる。
メイン領域の横幅が固定で狭過ぎ。
Seesaa系ブログの標準テンプレートでは、ほとんどの場合横幅等がpx値固定で設定されています。
デザインからCSSを編集し、不要なwidth設定を削除しますが、
#container
#content
辺りにwidthが設定されていると思います。
#containerの方はwidthの代わりにmax-widthを大きめに設定しておくと全体の最大幅が制限できます。
また、floatでサイドバーを左に設置した上でメイン領域に残りの横幅を割り当てるには、
サイドバーをHTML上でメイン領域より先に記述する。
サイドバーにはfloat:left;を設定し、メイン領域にはfloatを設定せずにmargin-left:サイドバーの横幅以上;を設定し、メイン領域は左にサイドバー以上の横幅を設定する必要があります。
Seesaa系ブログの標準テンプレートではサイドバーが左に表示される場合でも内部的には右サイドバーを左に表示しているテンプレートが多く、右サイドバーはHTML上でメイン領域よりも後に記述されています。
そのため、「デザイン→HTML」でHTMLを追加し、
HTMLの下の方に記述されている、
<% if:have_content_right -%>
<div id="links">
<% content_right %>
</div>
<% /if -%>
の部分をメイン領域よりも手前(左サイドバーの場所)に置く必要がある。
また、たいていのテンプレートには背景色や枠線があり、
Seesaa系ブログでは単色の背景などでも色指定ではなく横幅固定の画像で背景が設定されている場合があります。
その場合は背景画像をごっそり削除する必要があり、削除すると真っ白(親領域の背景色)になります。
画像を使わずに色指定で背景を設定しましょう。
サイドバーが狭すぎ
これはCSSでサイドバー要素に設定されているwidthを変更すれば変わります。
#links
#links-left
辺りです。
ただし、サイドバーのコンテンツタイトルに背景画像が設定されている場合があるので、その場合は背景画像を削除する必要があります。
背景画像を削除して代わりに背景色を設定しましょう。
カレンダーを設置する場合は<table>要素でできており、<table>の横幅がpx値で設定されているため、サイドバーの幅に合わせるには、
#calendar table{
width:100%;
}
と横幅を100%にする必要があります。
また、<table>の親要素にも無駄にwidthが設定されているため、
#calendarからwidth設定を削除します。
記事タイトルの上に日付が表示されるが下に表示させたい
記事部分のHTMLはテンプレートと分離されており、「デザイン→コンテンツ→記事→コンテンツHTML編集」から変更できます。
あと、width以外にもfloat,text-align,font等が無駄に設定されまくり。
真面目にやるブログなら1からCSS作りなおしたほうが良いと思う。
さくらのブログ使ってるが、デザイン修正で時間取られちゃうなあ・・・