« 新規投稿の設定について | トップページ | 初めての動画アップロード »

2009年10月16日 (金)

テンプレートの変更と横幅変更

「ココログ@niftyテンプレートのdecoweb」からテンプレートを入手し、ブログデザインを変更しました。
使用したのは「クールで大人なデザインのテンプレート」。
シンプルでいい感じです。
同じテンプレートで3カラムと2カラムのものが用意されていましたので、2カラムのものにしました。
CSSファイルをダウンロードし、「デザイン」⇒「現在のテンプレートを編集」⇒「カスタムCSSを編集」を開き、ダウンロードしたファイル内容をコピーして、テキストを貼り付け、保存します。
現在のテンプレートと新しいテンプレートのカラムとサイドバーは同じものにしておく必要があります。

なかなかよいデザインですが、横640ピクセルの画像をすでに掲載しているので、このままでは画像の右側が表示されません。
そこで、CSSをカスタマイズすることにします。

CSSが違っても以下の方法なら修正できると思います。
デザインが2カラム、左サイドバーなので、全体(ボディ)と左サイドバー(サイド)と記事部分(コンテナー)があります。
この3つが分かれば修正できるはずです。
CSSによりこの名称が違う場合もあると思いますが、幅(width)の大きさ(px)でこれを判断します。

CSSの内容をメモ帳等で表示し、「width」で検索します。
一番「px」の大きな数値が「全体」でしょう。
今回は次の記述がありました。

#container{
width: 800px;

「左サイドバー」は次の記述でしょう。

/*** 左カラム ***/

#left{
float: left;
width: 200px;

「記事部分」はこれです。

/*** 中央カラム ***/

#center{
float: left;
width: 600px;

つまり「左サイドバー」+「記事部分」が「全体」となり、200+600=800ピクセルです。

一応、「width」で全部検索すると、pxが560と780というのがあり、600と800に近いので、おそらくこれも修正が必要でしょう。

修正後のイメージは、200+700=900として、640pxの画像を700の記事部分に収めようと思います。

修正したのは
600⇒700
800⇒900
560⇒660
780⇒880
です。

該当箇所全て修正します。

変更前のCSSは別に保存して、修正に失敗した場合、復元できるようにしておきます。
結果、いい具合の大きさに修正できました。

まだお気に入りのバナー表示がおかしいのですが、また次回修正しようと思います。

|

« 新規投稿の設定について | トップページ | 初めての動画アップロード »

ウェブログ・ココログ関連」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/1281038/31808687

この記事へのトラックバック一覧です: テンプレートの変更と横幅変更:

« 新規投稿の設定について | トップページ | 初めての動画アップロード »