Powered By FC2ブログ
ブログやるならFC2ブログ
今すぐブログを作っちゃおう!

--年--月--日

スポンサーサイト

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

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カラム

blogtube_extra01

左サイドバーの2カラム

blogtube_extra01

右サイドバーの2カラム

blogtube_extra01

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日

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カラム

3カラム

左サイドバーの2カラム

左メニューの2カラム

右サイドバーの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.最後に

カスタマイズを行った後だと、全てを置き換えるわけにはいきませんので、変更した箇所は別エントリーでご紹介します。そちらを参考に、修正される方はチャレンジしてみて下さい。

途中でごちゃごちゃと変更してしまったので、もしかしたらアップロードしているテンプレートに間違いがあるかもしれません。もし何かありましたら、遠慮なくコメントして下さい。お手数ですが、ご協力お願いいたします。

2007年01月29日

FC2ブログ用テンプレートの、コメント欄の投稿者リンクを修正

ひばりさんよりご指摘いただいて気が付いたんですが、コメントフッター部分の投稿者リンクの方法が間違っていたようです。もちろん表示などには問題ありませんが、気になる方は、FC2ブログテンプレートの修正をお願いいたします。

1.FC2ブログテンプレートの修正部分

修正箇所は次になります。


<div class="comment-footer">
投稿者:<a href="<%comment_url>"><%comment_name></a>
| 投稿日:<%comment_month>月<%comment_day>日(<%comment_hour>:<%comment_minute>)
| <a href="<%comment_edit_link>" title="コメント編集のページへ">編集</a>
</div><!-- comment-footer -->

次のように変更して下さい。


<div class="comment-footer">
投稿者:<%comment_url+name> 
| 投稿日:<%comment_month>月<%comment_day>日(<%comment_hour>:<%comment_minute>)
| <a href="<%comment_edit_link>" title="コメント編集のページへ">編集</a>
</div><!-- comment-footer -->

FC2で使用できる変数をよく理解できていなかったようです。また、この変数自体がFC2のブロック変数一覧にも載っていなかったりします。機能はしますので、これで問題は無いと思います。(メールアドレスリンクもあるんですが、メールアドレスを記入することはまず無いと思いますので設定していません)

2.FC2テンプレート変数一覧表

検索して見つけた隠し変数はこちらで紹介されています。公式のFC2変数一覧よりも便利で使いやすいので、本格的にカスタマイズする場合や、FC2ブログ用のテンプレートを作成する際にご利用下さい。

FC2テンプレート変数一覧表 ( それは仕様?様 )

2006年10月07日

「使えて+いじれる」FC2ブログテンプレートにようこそ

「使えて+いじれる」FC2ブログテンプレートにお越しいただきましてありがとうございます。
こちらでは、FC2ブログ用のテンプレートの配布、及びカスタマイズの方法についてご紹介していく予定です。フリーエリアを多く含むテンプレートのため、カスタマイズし易い反面、カスタマイズ初心者の方には多少難しい部分もあるかと思います。

後ほど、フリーエリアのサイズ変更やタグの貼り付け方法、リンクやタイトル部分の色の変更方法などについて解説していきますので、しばらくお待ち下さい。

プロフィール

Author:templatetube
FC2ブログへようこそ!

最近の記事
最近のコメント
最近のトラックバック
月別アーカイブ
カテゴリー
ブロとも申請フォーム

Appendix


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