テンプレート配付用ブログ

テンプレート配付用ブログ

アダルトな大人向けのテンプレートを作るよ

このブログについて

アダルトな大人向けのテンプレートを中心に細々と作っていきます。気が向いたら使ってやってください。アダルトなのはテンプレートのみでアダルトコンテンツは一切ありませんので悪しからず。


テンプレートに共通する特徴

  • なるべく正しい文書構造
  • なるべく正しいCSS
  • なるべくブラウザに依存しない
  • なるべく可読性を保つ
  • なるべくゆったりとしたレイアウト
  • アダルト・同人ブログでの利用可能
  • 違法・違反ブログでの使用はお断り

詳細は各テンプレートの説明にて

スポンサーサイト

--/--/--(--) 

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

レイアウトの変更方法

2009/01/13(Tue)   テーマ:共有テンプレート - ジャンル:ブログ

当サイトで配布しているテンプレートのレイアウト変更法です。


2カラムテンプレートの場合


スタイルシートの編集画面を開き、スタイルシートのソースの最下部までスクロールしてください。


stylechange1.gif


以下の部分のソースを書き換えます。



#main {
float: left;
width: 560px;
font-size: 90%;
}
#sub{
float: right;

width: 240px;
font-size: 90%;
}


#main は記事を表示している部分

#sub はプラグインメニューを表示している分です


上記のソースだと #mainfloat;left;#subfloat:right; ですから、記事が左側でメニューが右側に表示されます。

この left と right を入れ替えることで左側にメニュー・右側に記事を表示することができます。
具体的なソースは以下の通りです。



#main{
float: right;
width: 560px;
font-size: 90%;
}


#sub{
float: left;
width: 240px;
font-size: 90%;
}

たったこれだけです。

3カラムテンプレートの場合


スタイルシートの編集画面を開き、スタイルシートのソースの最下部までスクロールしてください。

stylechange1.gif

以下の部分のソースを書き換えるのですが、2カラムと比べてちょっとややこしいです。

#main-column {
float: left;
width: 715px;
}

#main {
float: left;
width: 500px;
}

#sub {
float: right;
width: 200px;
}

#sub2 {
float: right;
width: 200px;
}


3カラムレイアウトにどんな種類があるかを確認しながらソースを書き換えてみてください。

レイアウト1(左側に記事・右側2列メニュー)

レイアウトプレビューを見る

当サイトの3カラムテンプレートは通常このレイアウトで配布しています。
このレイアウトにする場合のソースは以下の通りです。

#main-column {
float: left;
width: 715px;
}

#main {
float: left;
width: 500px;
}

#sub {
float: right;
width: 200px;
}

#sub2 {
float: right;
width: 200px;
}


レイアウト2(右側に記事・左2列メニュー)

レイアウトプレビューを見る

レイアウト1の左右を入れ替えたタイプです。こうするだけで結構印象が変わるもんですねぇ。
このレイアウトにする場合のソースは以下の通りです。

#main-column {
float: right;
width: 715px;
}

#main {
float: right;
width: 500px;
}

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

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


レイアウト3(中央に記事・左右にメニュー)

レイアウトプレビューを見る

オーソドックスな3カラムレイアウトです。
このレイアウトにする場合のソースは以下の通りです。

#main-column {
float: left;
width: 715px;
}

#main {
float: right;
width: 500px;
}

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

#sub2 {
float: right;
width: 200px;
}


以上です。お楽しみください。

コメント

コメントの投稿


管理者にだけ表示を許可する

Trackbabck

このエントリのトラックバックURL

この記事にトラックバックする(FC2ブログユーザー)

-

管理人の承認後に表示されます

|  HOME  | 共有未登録テンプレート ≫

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