CSS.jpg

Seesaaブログのカスタマイズ作戦!

ちょっとだけCSS(スタイルシート)を変更してブログを読みやすくする試み。

いじるポイントだけ理解しておけば、変更するのは数字だけ!
そんなに難しいことではありません。

文字サイズ・行間のカスタマイズがうまく行き、記事がとても見やすくなりました。

元々記事スペースの幅が狭く、文字が大きくなったことにより、更に幅が狭くなったように感じます。
そこで、記事スペースの幅も変更してみることにしました。

CSS(スタイルシート)の編集


ブログ編集画面の中から、
「デザイン」→「デザイン設定」→「現在利用中のテンプレート」をクリック→CSSの編集画面が開きます。

SeesaaブログCSS編集.jpg

CSSの編集画面が開いたら英数文字の羅列が出てくるので、あわてず変更箇所をじっくり探しましょう。

  • 「#container」部は、
     外側(全体)をコントロールしています。

  • 「#content」部は、
     記事スペースをコントロールしています。

  • 「#links-left」「#links」部は、
     多分、サイドバーをコントロールしているのだと思います。

記事スペースの幅を変更したいので「#content」部をいじりますが、全体の幅にも影響してくるので「#container」部もいじります。
下の例では、#content・#containerの幅を、ともに50px拡げる変更をしています。

<ポイントは「width:XXXpx;」の数字の部分です>

この数字が横幅を指定しています。

#container{
text-align:center;
margin: 0px auto 0px auto;
padding:0px;
background-image:url(http://blog.seesaa.jp
/img/bg/orange/links_bg.gif);
background-repeat:repeat-y;
background-position:right;
width:800px; ←750pxを50px拡げて800pxに
color:#856F51;
font-size:12px;
}

#content {
float:left;
width:517px; ←467pxを50px拡げて517pxに
text-align:center;
}

#links-left {
}
#links {
font-weight:normal;
width:253px; ←右サイドバーはそのまま
float:left;
margin-left:30px;
}

これで、記事スペースの幅が50px拡がりました。

参考にさせていただいたサイト
Seesaaブログのスタイルシート構造について解説されています。



最後までお読みいただきましてありがとうございます。
にほんブログ村 IT技術ブログへ
にほんブログ村

人気ブログランキングへ


スポンサード・リンク