Powered By FC2ブログ
ブログやるならFC2ブログ
今すぐブログを作っちゃおう!
今すぐブログを作っちゃおう!
カスタマイズへのショートカット
- テーブル内のフォントサイズが大きくなる⇒CSSを修正してください
- 今使用しているブログとサイズが異なる⇒各カラムサイズは変更可能です
2007年03月24日
背景色を黒、文字を白に。通常テンプレの色を反転したカスタマイズ
今回はFC2ブログテンプレートのカスタマイズの実例として、背景色を黒、文字を白にする、簡単に言うと色を反転させたカスタマイズを紹介します。
特に説明するほどのものではありませんので、興味がある方はスタイルシートをダウンロードして適用してみて下さい。
注意:以下でご紹介するカスタマイズは、blogtube_extra用のカスタマイズになります。
1.カスタマイズしたスタイルシートを適用
フリーエリア有り(blogtube_extra)
フリーエリア無し(blogtube_extra01)
2.スタイルシートのダウンロード
フリーエリア有り(blogtube_extra_bkcss.txt)
フリーエリア無し(blogtube_extra_bk01css.txt)
テキストファイルはクリックで表示ではなく、右クリックメニューからダウンロードして下さい。その後テキストエディタで開きます。
色の変更だけなので、スタイルシートに貼り付ければそれだけでカスタマイズ完了です。
3.カスタマイズのポイント
カスタマイズした範囲が広いので、詳細は控えさせていただきます。
基本的には色を反転させているんですが、文字の色やカラムの背景色などはコントラストの関係上、控えめな明るさにしています。文字の色が白(#ffffff)だと目に良くありません。
また、同様にボーダーも外周だけにして、それ以外は削除しています。これもコントラストの関係で、ボーダーをつけるとかなりしつこくなります。
見た感覚的に、通常の色の反転を再現してみました。
ちなみにフリーエリア有り無しで違う箇所は、フリーエリア無しはバナーの下に20pxのマージンを設けています。違いはそれだけです
2007年03月23日
FC2ブログ用3カラム2カラム共用テンプレート blogtube_extra01
前回紹介したFC2ブログ用テンプレート、blogtube_extraはフリーエリア有りのバージョンでしたので、フリーエリアの無いバージョンもご紹介します。
1.FC2ブログ用テンプレートダウンロード
blogtube_extra01.txt
blogtube_extra01css.txt
圧縮ファイルがアップロードできないので、テキストファイルで配布します。右クリックから対象を保存(名前を付けてリンク先を保存など)で、ダウンロードして下さい。ブラウザで表示(クリック)した場合、内容は保障できません。
(注:htmlのblogtube_extra01.txtをダウンロードすると、拡張子がxmlになってしまうようですので、保存時に拡張子をtxtにするか、もしくは空のテキストファイルを開いてドラッグ&ドロップで開いて下さい)
blogtube_extra.txt→HTMLに貼り付け
blogtube_extracss.txt→スタイルシートに貼り付け
2.blogtube_extra01の概観
3カラム
左サイドバーの2カラム
右サイドバーの2カラム
3.blogtube_extra012カラムテンプレート
カスタマイズ不要のテンプレートですので、2カラム用も配布します。2カラムがお好みでしたら、こちらをダウンロードしてください。
FC2ブログ用テンプレート「blogtube extra01」2カラムのダウンロード
blogtube_extra01_right.txt
blogtube_extra01_left.txt
blogtube_extra01css.txt
テキストファイルはクリックで表示ではなく、右クリックメニューからダウンロードして下さい。その後テキストエディタで開きます。
blogtube_extra_right.txt→右にメニュー。HTMLに貼り付け
blogtube_extra_left.txt→左にメニュー。HTMLに貼り付け
blogtube_extracss.txt→スタイルシートに貼り付け
2007年03月18日
トップを3カラムに、それ以外を2カラムにカスタマイズする
せっかく2カラムを作成しましたので、少しアレンジしてみましょう。トップページを3カラム、それ以外を左メニューの2カラムにしてみます。意外と簡単にできますよ。
1.カスタマイズテンプレートのダウンロード
blogtube_extra_32.txt
blogtube_extracss.txt
解説もしますが、カスタマイズ済みのテンプレートはダウンロードできます。新しいテンプレートを用意して、それに貼り付けてみて下さい。プレビューだとトップだけしか表示されませんので、更新して適用しないと確認できません。
2.index_areaとnot_index_area
今回はトップ(index_area)とそれ以外(not_index_area)でカラム数を変えますので、テンプレートで使用できる変数をうまく使って表示を切り替えます。
<!--index_area-->
<body class="layout-three-column">
<!--/index_area-->
<!--not_index_area-->
<body class="layout-two-column-left">
<!--/not_index_area-->
bodyでカラム数を変更できますので、index_areaとnot_index_areaの変数を用いて切り替えます。もちろん逆もできますし、右メニューと左メニューでの切り替えも可能です。意味ないと思いますが。
3.右メニューの削除
<!--index_area-->
<!-- 右メニュー開始 -->
<div id="box-right">
〜
</div><!-- box-right -->
<!-- 右メニュー終了 -->
<!--/index_area-->
テンプレートの説明で、左メニュー2カラムの場合は右メニューを削除すると説明していますが、トップだけ表示するindex_areaで囲めばトップ以外では削除(非表示)されます。
ちなみに紹介しているテンプレートでは、フリーエリア、プラグイン2が表示されます。
4.左メニューの切り替え
汎用的にするため、トップとそれ以外で切り替えます。トップはプラグイン1とFC2ブログの広告を表示します。
<!--index_area-->
<!-- 左メニュー開始 -->
<div id="box-sub">
<!--plugin-->
<!--plugin_first-->
<div class="lefttitle">
<%plugin_first_title>
</div><!-- lefttitle -->
<div class="leftmain">
<%plugin_first_description>
<%plugin_first_content>
<%plugin_first_description2>
</div><!-- leftmain -->
<!--/plugin_first-->
<!--/plugin-->
<!-- FC2ブログ広告 ★削除不可★ 開始↓ -->
<h3 class="lefttitle">
Appendix
</h3>
<div class="leftmain"><!-- Ad -->
<%ad><br />
<%ad2>
</div><!-- Ad -->
<!-- FC2ブログ広告 ★削除不可★ ここまで↑ -->
</div><!-- box-sub -->
<!--/index_area-->
次にトップ以外ですが、メニューが左だけになるので、プラグイン3を使用してみます。これでトップのメニューと完全に切り離せますので、管理が簡単になります。
もし単純にプラグイン1とプラグイン2を連続させたい場合は変更してください。もちろんFC2ブログの広告も表示します。
<!--not_index_area-->
<!-- 左メニュー開始 -->
<div id="box-sub">
<!--plugin-->
<!--plugin_third-->
<div class="righttitle">
<%plugin_third_title>
</div><!-- righttitle -->
<div class="rightmain">
<%plugin_third_description>
<%plugin_third_content>
<%plugin_third_description2>
</div><!-- rightmain -->
<!--/plugin_third-->
<!--/plugin-->
<!-- FC2ブログ広告 ★削除不可★ 開始↓ -->
<h3 class="lefttitle">
Appendix
</h3>
<div class="leftmain"><!-- Ad -->
<%ad><br />
<%ad2>
</div><!-- Ad -->
<!-- FC2ブログ広告 ★削除不可★ ここまで↑ -->
</div><!-- box-sub -->
<!--/not_index_area-->
やっていることは単純で、カラム変更の応用です。
5.いくつかのヒント
プラグインは以下のようになりますので、変更する場合にどうぞ。(プラグインxという文字は説明文ですので、その下から貼り付けてください)
プラグイン1
<!--plugin-->
<!--plugin_first-->
<div class="lefttitle">
<%plugin_first_title>
</div><!-- lefttitle -->
<div class="leftmain">
<%plugin_first_description>
<%plugin_first_content>
<%plugin_first_description2>
</div><!-- leftmain -->
<!--/plugin_first-->
<!--/plugin-->
プラグイン2
<!--plugin-->
<!--plugin_second-->
<div class="righttitle">
<%plugin_second_title>
</div><!-- righttitle -->
<div class="rightmain">
<%plugin_second_description>
<%plugin_second_content>
<%plugin_second_description2>
</div><!-- rightmain -->
<!--/plugin_second-->
<!--/plugin-->
プラグイン3
<!--plugin-->
<!--plugin_third-->
<div class="righttitle">
<%plugin_third_title>
</div><!-- righttitle -->
<div class="rightmain">
<%plugin_third_description>
<%plugin_third_content>
<%plugin_third_description2>
</div><!-- rightmain -->
<!--/plugin_third-->
<!--/plugin-->
カラムサイズの変更ですが、細かい計算は置いておいて、メニューとメインカラムの変更だけなら以下を参考にしてください。
.layout-two-column-left #box-main,
.layout-two-column-right #box-main{
float: right;
width: 660px;
}
.layout-two-column-left #box-sub{
float: left;
width: 230px;
}
上がメインカラム、下が左カラムです。合計を890pxにしてください。
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に変更しました。これは単に打ち間違いです。通常は使用していないので、特に必要はありません。
2007年03月18日
FC2ブログ用3カラム2カラム共用テンプレート blogtube_extra
予定はしていたものの、全く手をつけていなかった2カラムを作ってみました。応用を考えて、簡単に3カラムと左右2カラムを変更可能にしてあります。基本が3カラムで、2カラムにする場合は多少のカスタマイズが必要です。
またせっかくなので、今まで公開していたテンプレートの問題点を解消したエントリのカスタマイズを全て取り込んであります。文字装飾なども可能になっていて、テーブルの文字もそのまま指定したサイズで表示されます。
カスタマイズしていなければ、そのまま変更すれば特にいじる必要なく、今までのカスタマイズが適用されます。
1.FC2ブログ用テンプレート「blogtube extra」
FC2ブログ用テンプレート「blogtube extra」のダウンロード
blogtube_extra.txt
blogtube_extracss.txt
圧縮ファイルがアップロードできないので、テキストファイルで配布します。右クリックから対象を保存(名前を付けてリンク先を保存など)で、ダウンロードして下さい。ブラウザで表示(クリック)した場合、内容は保障できません。
blogtube_extra.txt→HTMLに貼り付け
blogtube_extracss.txt→スタイルシートに貼り付け
2.FC2ブログ用テンプレート「blogtube extra」の概観
標準設定の3カラム
左サイドバーの2カラム
右サイドバーの2カラム
フリーエリアがあるため、全体サイズは変更せずに、メインカラムを拡げています。2カラムのサイドバーは230pxです。(メインは660px)
3.テンプレート「blogtube extra」使用方法
ダウンロードした、FC2ブログ用テンプレート「blogtube extra」をメモ帳などで開き、使用するレイアウトに応じてカスタマイズします。
3.3カラムの修正
<script type="text/javascript" src="<%server_url>load.js"></script>
<div class="comment-button">
3カラムを使用する場合、修正は必要ありません。サーバー名を取得できる変数がありましたので、手動で変更する必要がなくなりました。
4.左サイドバーの2カラムの場合
サイドバーが左だけになりますので、右のサイドバーを削除する必要があります。
<body class="layout-three-column">
を
<body class="layout-two-column-left">
に変更
body要素のclass属性でレイアウトを変更しています。これにより、トップを3カラム、それ以外を2カラムにすることができます。(後ほどエントリします)
<!-- 左メニュー開始 -->
<div id="box-sub">
<!--plugin-->
<!--plugin_first-->
<div class="lefttitle">
<%plugin_first_title>
</div><!-- lefttitle -->
<div class="leftmain">
<%plugin_first_description>
<%plugin_first_content>
<%plugin_first_description2>
</div><!-- leftmain -->
<!--/plugin_first-->
<!--/plugin-->
<!--plugin-->
<!--plugin_second-->
<div class="righttitle">
<%plugin_second_title>
</div><!-- righttitle -->
<div class="rightmain">
<%plugin_second_description>
<%plugin_second_content>
<%plugin_second_description2>
</div><!-- rightmain -->
<!--/plugin_second-->
<!--/plugin-->
<!--plugin-->
<!--plugin_third-->
<div class="righttitle">
<%plugin_third_title>
</div><!-- righttitle -->
<div class="rightmain">
<%plugin_third_description>
<%plugin_third_content>
<%plugin_third_description2>
</div><!-- rightmain -->
<!--/plugin_third-->
<!--/plugin-->
<!-- FC2ブログ広告 ★削除不可★ 開始↓ -->
<h3 class="lefttitle">
Appendix
</h3>
<div class="leftmain"><!-- Ad -->
<%ad><br />
<%ad2>
</div><!-- Ad -->
<!-- FC2ブログ広告 ★削除不可★ ここまで↑ -->
</div><!-- box-sub -->
</div><!-- box-left -->
<!-- 左メニュー終了 -->
左メニュー開始 から 左メニュー終了 までを上記で上書きします。右カラムにあったプラグインを左メニューに移動しています。使用していないプラグイン部分は削除可能です。
<!-- 右メニュー開始 -->
<div id="box-right">
から
</div><!-- box-right -->
<!-- 右メニュー終了 -->
までを削除(box-rightを削除)
右メニューを削除します。必要ない場所を削除しないようにしてください。また、右メニューにあったフリーエリアを使用する場合は、
<!-- 左メニュー開始 -->
<div id="box-sub">
この間に移動
<!--plugin-->
<!--plugin_first-->
この間に移動、の場所に、「フリーエリアを使用しない場合、ここから下を削除↓」から「フリーエリアを使用しない場合、ここから上を削除↑ 」までを移動してください。
5.右サイドバーの2カラムの場合
基本的には左サイドバーと同じですが、間違い易い部分がありますので注意してください。
<body class="layout-three-column">
を
<body class="layout-two-column-right">
に変更
<!-- 左メニュー開始 -->
<div id="box-sub">
から
</div><!-- box-sub -->
までを削除。
</div><!-- box-left -->
<!-- 左メニュー終了 -->
左メニューを削除しますが、左メニュー開始から-- box-sub --までを削除します。絶対に＜/div＞＜!-- box-left --＞を削除しないで下さい。削除すると右メニューがメインカラムの下に来ます。
<!-- 右メニュー開始 -->
<div id="box-right">
<!--plugin-->
<!--plugin_first-->
<div class="lefttitle">
<%plugin_first_title>
</div><!-- lefttitle -->
<div class="leftmain">
<%plugin_first_description>
<%plugin_first_content>
<%plugin_first_description2>
</div><!-- leftmain -->
<!--/plugin_first-->
<!--/plugin-->
<!--plugin-->
<!--plugin_second-->
<div class="righttitle">
<%plugin_second_title>
</div><!-- righttitle -->
<div class="rightmain">
<%plugin_second_description>
<%plugin_second_content>
<%plugin_second_description2>
</div><!-- rightmain -->
<!--/plugin_second-->
<!--/plugin-->
<!--plugin-->
<!--plugin_third-->
<div class="righttitle">
<%plugin_third_title>
</div><!-- righttitle -->
<div class="rightmain">
<%plugin_third_description>
<%plugin_third_content>
<%plugin_third_description2>
</div><!-- rightmain -->
<!--/plugin_third-->
<!--/plugin-->
<!-- FC2ブログ広告 ★削除不可★ 開始↓ -->
<h3 class="lefttitle">
Appendix
</h3>
<div class="leftmain"><!-- Ad -->
<%ad><br />
<%ad2>
</div><!-- Ad -->
<!-- FC2ブログ広告 ★削除不可★ ここまで↑ -->
</div><!-- box-right -->
<!-- 右メニュー終了 -->
右メニュー開始 から 右メニュー終了 までを上記で上書きします。表示する内容は、左メニューの2カラムと同じです。広告エリアは右メニューにありますが、これを左メニューに移動しないとテンプレートを更新できませんので、必ず表示しましょう。
また、標準で右に設置しているフリーエリアを使用する場合は、上書きする前に下記を行ってください。
<!-- 右メニュー開始 -->
<div id="box-sub">
この間に移動
<!--plugin-->
<!--plugin_first-->
もともと右にあったフリーエリアですが、使用する場合は、この間に移動、の場所に、「フリーエリアを使用しない場合、ここから下を削除↓」から「フリーエリアを使用しない場合、ここから上を削除↑ 」までを移動してください。
6.修正したテンプレートの貼り付け
以上で修正が終わりましたので、FC2ブログのテンプレート編集画面でそれぞれを貼り付けます。
この場合、どれでもいいので、テンプレート名の右メニュー、変更にある複製を押してコピーを作成し、それに対して貼り付けて下さい。その後名称の変更で、blogtube_extraという名前に変更して下さい。名前の変更は必須ではありません。
(もしくは上にある名称の変更で名前をつけて保存。ただし名前をそのままにすると上書きします)
以前のテンプレートを残しておけば、何か問題があっても戻れますので、あとはプレビューで問題なければ更新してください。
7.2カラム用テンプレート
以上のカスタマイズ方法がわかれば、カスタマイズした後でもカラムの変更が可能になります。ただ、ちょっと難しそうだ、という方の為に、2カラム用のテンプレート(上記の変更を行ったテンプレート)も置いておきます。カスタマイズせずに2カラムにする場合などは、こちらをお使い下さい。
FC2ブログ用テンプレート「blogtube extra」2カラムのダウンロード
blogtube_extra_right.txt
blogtube_extra_left.txt
blogtube_extracss.txt
テキストファイルはクリックで表示ではなく、右クリックメニューからダウンロードして下さい。その後テキストエディタで開きます。
blogtube_extra_right.txt→右にメニュー。HTMLに貼り付け
blogtube_extra_left.txt→左にメニュー。HTMLに貼り付け
blogtube_extracss.txt→スタイルシートに貼り付け
8.最後に
カスタマイズを行った後だと、全てを置き換えるわけにはいきませんので、変更した箇所は別エントリーでご紹介します。そちらを参考に、修正される方はチャレンジしてみて下さい。
途中でごちゃごちゃと変更してしまったので、もしかしたらアップロードしているテンプレートに間違いがあるかもしれません。もし何かありましたら、遠慮なくコメントして下さい。お手数ですが、ご協力お願いいたします。
プロフィール
Author:templatetube
ＦＣ２ブログへようこそ！
最近の記事
最近のコメント
最近のトラックバック
月別アーカイブ
カテゴリー
友達申請フォーム
Appendix
ブログ内検索
RSSフィード
リンク
Powered By FC2ブログ
タグリスト