スポンサーサイト

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

--/--/--(--) | スポンサー広告 | トラックバック(-) | コメント(-)

TOPを3カラム化してみよう

 3カラムとは Blogの片側にしかないサイドバーを 両サイドに設置することです。
 BlogのHTML構造でも触れましたが、LivedoorBlogのテンプレートは全て 片方のみ。
 でも  見かけますよね。同じLivedoorBlogなのに どうしてこの人両サイドなの?って・・・・
 他では 両サイドのもありますので 引越しするのもいんですが、せっかく今まで書いた記事を
 引き継ぎたい、引越しも面倒って言う場合、この際自分で3カラム化してみましょう。
 ズラーッと片方に 並んでいるより 見やすくなると思います。
しつこいようですが管理人がお試しに作ったのはこちら↓
 このテンプレートをもとに 説明します。



今回変更する箇所
   A:Bodyの背景色を変える
   B:コンテンツの幅を変更する&背景色を変える
   C:3カラム化する

Step 1
 最初に 肝心の「プラグインの設定」部分で 実際に左右に 分けたいプラグインを決めます。
 たとえば プラグインが10個あって 並び順1~10と順番が ついていますよね。
 後半の6から 反対側のサイドバーへ設置したいのなら プラグインの編集画面を
 開いてください。
 
 開いたら HTMLの最後に</div></div><div id=links2><div>と入れます。
 これは、3カラム化するために サイドバーの<div id="links">を閉じるためです。
 プラグイン6にこれを設定すれば、7以降には設定しなくても大丈夫です。
 なお、設定する時は フォーマットのタグを変換しないで設定します。
 これで 分割する準備はOKです。


Step 2
 次に 「Blogの設定・管理」のデザインの設定を開きます。
 まず、自分が使っているデザインのジャンルの画面を開きます。
 管理人のは フォト→子猫ですが、この子猫へマウスをあてると 左下へ
 javascript:subWin('/html kitten.html')   と表示が出ますので これを覚えておきます。
 実際には、スタンダードのCUSTOMをクリック。「テーマの設定」の小窓を開きます。
 そこで テーマを読み込むのプルダウンから kitten を選び読み込むとスタイルシートが 表示
 されますので、メモ帳などに 原型をコピーを残して置いてください

 コピーは、念のため、失敗した時のためにです、(*^_^*)

Step 3
 ここからが 実際にタグを編集します。

 A:Bodyの背景色を変える
原型 ↓ここを探してください
body{
width:100%;
height:100%;
margin:0;
padding:0;
text-align:center;
background:#f66812 url('/_img/kitten/bg.gif') repeat-y 50% 0;
}

簡単に説明すると
text-align:center; 
  センター配置になっているという意味です。

background:#f66812
  この赤字部分を直します。
  お役立ちの色コードはこちら

B:コンテンツの幅を変更する&背景色を変える

原型 ↓ここを探してください
/* コンテンツ表示部分の基本設定 */
#container{
width:780px;
height:100%;
margin:0 auto 0 auto;
text-align:left;
}

width:780px;
 メインの子猫の画像下の幅です。
 子猫のようにTOPに画像など配置されて
 いる場合、幅が決まっています。
 ライブドアのは 780か800が多いようです。
 3カラム化するとこの幅では、メインの記事幅
 が少し狭い気もしますので 管理人は多めに
 設定(837など)を変えています。
 ←子猫のコンテンツ色が クリーム色に設定され
 ていますので変えるために
 background:#FFFFFF;とtext-align:left;の
 下に入力します

 C:3カラム化する
  このようなところを↓探してください

/****** ナビゲーション部分(カレンダー等)の設定 *******/
#links{
width:160px;
float:right;
padding-right:30px;
margin-top:20px;
}

width:160px; 基本の幅のことです。
 float:right; サイドバーが基本的にどちらに
 配置されているかということです。
 子猫の場合は 右なので、right

 これを直してみると・・
/****** ナビゲーション部分(カレンダー等)の設定 *******/
#links{
position:absolute;
PADDING: 0px;
width:160px;
MARGIN: 0px 0px 0px 15px;
WIDTH: 160px;
TOP: 180px;
TEXT-ALIGN: center
}
#links2{
POSITION: absolute;
PADDING: 0px;
LEFT: 730px;
MARGIN: 0px 0px 0px 0px;
WIDTH: 160px;
TOP: 180px;
TEXT-ALIGN: center
}

 メインサイドバーを右から左に変えるために
 float:right;を削除
 
 コンテツンツの左から15pxに位置に設定
 MARGIN: 0px 0px 0px 15px;
 マージンは /* 上 右 下 左 */ の順です

 分割した左のバーの位置を指定。
 LEFT: 730px;
 画像を含めたTOPからの位置
 TOP: 180px;

この時点で 子猫に設定されていた どぎついオレンジ背景や メイン記事のクリーム色背景、
 もちろん、片方設置のサイドバーが 両サイドに分かれています。

スポンサーサイト

2005/06/05(日) | Blogカスタマイズ | トラックバック(-) | コメント(0)

«  |  HOME  |  »

コメントの投稿














管理者にだけ表示を許可する
 |  HOME  | 
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。