Powered By FC2ブログ
ブログやるならFC2ブログ
今すぐブログを作っちゃおう!
今すぐブログを作っちゃおう!
カスタマイズへのショートカット
- テーブル内のフォントサイズが大きくなる⇒CSSを修正してください
- 今使用しているブログとサイズが異なる⇒各カラムサイズは変更可能です
2007年03月18日
FC2ブログ用テンプレート、blogtube_basicとblogtube_extraの違い
ここではFC2ブログ用テンプレート、blogtube_basicとblogtube_extraの違いを説明します。以前のblogtube_basicをお使いで、カスタマイズしてある場合に参考にして下さい。細かい修正をしているだけなので、特に気にならなければ修正しなくてもそれ程問題はないはずです。基本的には3カラムと2カラム共用のテンプレートに変更しただけですので。
1.ブログで紹介したカスタマイズの適用
今までご紹介したカスタマイズを、blogtube_extraでは標準で適用しています。ですので、そのカスタマイズを適用すれば同じ内容になります。
適用したのは以下のエントリです。
以上のカスタマイズを適用しています。必須ではありませんので、必要なカスタマイズだけ適用すれば十分です。
2.スタイルシートの変更点
これから紹介する変更は、2カラムを使用しなければ特に必要ありません。必要な場合だけ変更してください。
変更した箇所(カラム変更に関する箇所)だけ紹介します。
body.layout-three-column,
body.layout-two-column-left,
body.layout-two-column-right{
text-align: center;
}
.layout-three-column #bodyid,
.layout-two-column-left #bodyid,
.layout-two-column-right #bodyid{
margin-top: 10px;
margin-bottom: 20px;
text-align: center;
background: #fff;
}
.layout-three-column #box,
.layout-two-column-left #box,
.layout-two-column-right #box{
width: 930px;
margin-right: auto;
margin-left: auto;
border: solid 1px #000;
}
.layout-three-column #box-margin,
.layout-two-column-left #box-margin,
.layout-two-column-right #box-margin{
margin: 0 15px;
}
.layout-three-column #box-left,
.layout-two-column-right #box-left{
float: left;
width: 660px;
}
.layout-two-column-left #box-left{
width: 900px;
}
.layout-three-column #box-right,
.layout-two-column-right #box-right{
float: right;
width: 230px;
}
.layout-three-column #box-main{
float: right;
width: 500px;
}
.layout-two-column-left #box-main,
.layout-two-column-right #box-main{
float: right;
width: 660px;
}
.layout-three-column #box-sub{
float: left;
width: 150px;
}
.layout-two-column-left #box-sub{
float: left;
width: 230px;
}
以上がカラムに関係する変更箇所になります。ここだけ置き換えれば、カラムの変更ができるようになります。
また、カラムサイズの変更も、ここを変更すればできます。
3.HTMLの変更点
HTMLの変更は、blogtube_extraのエントリも参考にして下さい。3カラムの場合はbody要素だけ、2カラムの場合はbody要素と使用するメニューの反対カラムを削除します。
3カラム→<body class="layout-three-column">
右メニュー2カラム→<body class="layout-two-column-right">
左メニュー2カラム→<body class="layout-two-column-left">
bodyを使用するカラムに応じて変更します。3カラムの場合はこのままで、2カラムの場合は逆側のカラムを削除します。削除はblogtube_extraのエントリで解説しています。
変更は以上になります。まずはblogtube_extraのテンプレートを新しく追加して試してみて、それからblogtube_basicのテンプレートをカスタマイズしてみるのが分かりやすいかと思います。
4.その他
一部コメント文の変更と、スタイルシートの.leftframeを.leftiframeに変更しました。これは単に打ち間違いです。通常は使用していないので、特に必要はありません。
コメント
トラックバックURL
http://templatetube.blog78.fc2.com/tb.php/21-9fd8b85e
プロフィール
Author:templatetube
ＦＣ２ブログへようこそ！
最近の記事
最近のコメント
最近のトラックバック
月別アーカイブ
カテゴリー
友達申請フォーム
Appendix
ブログ内検索
RSSフィード
リンク
Powered By FC2ブログ
タグリスト
コメントの投稿