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日

トップを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カラム

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年02月17日

テンプレートに、コメント欄の絵文字・デコレーション機能を追加

今回はリクエストにお応えする形ですが、需要はあると思いますのでエントリでご紹介します。
FC2ブログの機能にある、コメント時に絵文字&装飾を使用できる機能を追加します。公式のテンプレだと付いているようですが、こちらでご紹介しているFC2ブログ用のテンプレートには付いていません。必要と思われる方は以下の方法でカスタマイズをお願いいたします。

0.記事を書く機能にある装飾機能を利用する場合

(コメント時の絵文字&装飾機能とは関係ありませんので、それだけをカスタマイズする場合は必要ありません。)
このテンプレだと、FC2の標準機能を用いた場合の、文字を大きくしたり小さくしたりする機能がうまく利用できませんので、それを修正するカスタマイズです。以下の通りに変更してください。

CSS部分

  • テキストエディタにCSS全文をペースト
  • 置換機能を使って、font-size: 12px;を全て削除
    (置換部分を空白にしておけば、削除(空白で置換)されると思います。改行はそのままでも大丈夫です)
  • 以下を追加

* {
margin: 0;
padding: 0;
font-style : normal;
font-weight: normal; /*太字を使うなら削除*/
word-break: break-all;
font-size: 12px; /*追加*/
font-family: Verdana, Arial, sans-serif;
}

.maincontent{
padding: 0 10px;
margin-bottom: 10px;
color: #000;
font-size: 14px;/*追加*/
line-height: 1.5;/*変更*/
}

これで修正は終わりですので、テキストエディタ全文をコピーして、FC2ブログ管理画面のテンプレート編集画面でペーストして下さい。
プレビューでは確認できませんので、元のCSSをテキストエディタなどで保存した上で、管理画面の方も保存して、表示を確認してください。
また、エントリ本文の太字が効かない件に関してはこちらもご覧下さい。
FC2の新しく記事を書く機能を使って強調文字を使用する場合

1.FC2ブログの機能、コメント時に絵文字&装飾の追加

コメント時に絵文字&装飾機能の追加はHTMLを編集します。追加だけですので、以下箇所を変更して下さい。


<!-- コメント投稿フォーム -->
から3行下にある、
<form method="post" action="./"><form method="post" action="./" name="comment_form">
に変更


<dt><label for="comment">comment :</label></dt>
<dd><textarea id="comment" cols="44" rows="8" name="comment[body]"></textarea></dd>
<dt><label for="pass">pass :</label></dt>
<dd><input id="pass" type="password" name="comment[pass]" size="45" /></dd>
<dt><label for="himitu">secret :</label></dt>
<dd><input id="himitu" type="checkbox" name="comment[himitu]" />サイト管理者にのみ通知する</dd>
</dl>
<div class="comment-button">

上記の部分を下記に置き換えて下さい(該当部分にそのまま貼り付けて、その下の説明箇所だけ更に変更してください)。


<dt><label for="pass">pass :</label></dt>
<dd><input id="pass" type="password" name="comment[pass]" size="45" /></dd>
<dt><label for="himitu">secret :</label></dt>
<dd><input id="himitu" type="checkbox" name="comment[himitu]" />サイト管理者にのみ通知する</dd>
<dt><label for="comment">comment :</label></dt>
<dd><textarea id="comment" cols="44" rows="8" name="comment[body]"></textarea></dd>
</dl>
<script type="text/javascript" src="http://blogxx.fc2.com/load.js"></script>
<div class="comment-button">

赤が追加青が移動箇所です。また、http://blogxx.fc2.comのxx部分はご利用のFC2ブログのサーバー名を入れて下さい。このブログならblog78.fc2.comなので、xxは78になります。

これでFC2ブログのコメント機能である、絵文字&装飾が追加されます。java scriptですので機能を有効にしないと表示されませし利用できません。

カスタマイズは以上です。ちなみにこの絵文字&装飾機能についてはこちらが公式の情報のようです。この記事もこちらを参考にしています。
コメント欄での絵文字・デコレーション機能のカスタマイズについて

プロフィール

templatetube

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

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

Appendix


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